강의

멘토링

로드맵

Inflearn brand logo image
BEST
Programming

/

Front-end

実務に直接適用するフロントエンドテスト - パート2。テスト深化:視覚的回帰・E2Eテスト

このレッスンでは、全体的なフロントエンドテストの種類を把握し、状況に応じた適切なテストを選択して信頼できるテストを作成する方法を学びます。

  • hanjungv
테스트코드
tdd
e2e
vitest
Software Test
JavaScript
chromatic

学習した受講者のレビュー

こんなことが学べます

  • テスト作成に必要な重要概念

  • 私が書いたコードの信頼を上げることができるフロントエンドテストの書き方

  • vitestを活用したスナップショットテストの作成方法

  • StorybookとChromaticを活用した視覚回帰テストの作成方法

  • Cypressを活用したE2Eテストの書き方

🎊イベント 🎊

1部の講義を受講された方は、2部50%割引クーポンをお受け取りください!

1部の講義をすべて受講された方に、2部の講義を50%割引価格でより安く購入できるクーポンを共有しています。下記の投稿にアクセスして、購入前にクーポンをご利用ください!
📌投稿リンク: リンク
この投稿は1部購入者にのみ表示されます。


学生・就活生の皆様に講座料金をサポートいたします💪

収入のない学生の方や就活生の方がより負担を感じないよう、フォームに入力して提出していただければ50%割引クーポンをお渡しします。申請リンクが開いていれば申請可能です。皆さんの学習を応援しています。頑張ってください 🔥
📌申請リンク: https://forms.gle/ohs7KywvSGXoJXGM7
FEの勉強を今から始める方には少し難しいトピックかもしれません。前提知識を必ず確認してから受講してください!

現場で数年間、様々なサービスでテストを作成したノウハウで
フロントエンドテストのすべてをお教えします!

このような悩みを
お持ちではありませんか?🤔

フロントエンドテストは
何を検証するのか
気になります

機器で手動で直接行う
テストは
とても反復的大変です

実務で書く
本当のフロントエンドテスト
気になります

🤔 アプリを作ることにはある程度慣れたものの、実際にプロダクション環境でうまく動作するか不安でしたか?
🤔 テストが本当に必要だと言われるものの、あまりにも多様なフロントエンドテストがあって始める気が起きませんでしたか
🤔 特定のテストタイプにこだわりながらより多くのことを検証し自動化したいと思いませんでしたか?
🤔 どのようなテストを書くべきか、テストの目的について整理したいと思いませんでしたか?

このような悩みをお持ちでしたら、よくいらっしゃいました!
"実務にすぐ適用するフロントエンドテスト"をおすすめします。

現場のフロントエンド実務者たちが
推薦したあの講義👍

テストコードの必要性から、様々な種類のテスティング概念と活用方法をすべて学ぶことができる講義です。まだテストに慣れていない方は講義を通してテスティングの概念をしっかりと身につけることができ、既にテストコードを作成されていた方は講義の例題と実習でより効果的で意味のあるテストコードを習得して実務に適用してみることができます。

- Kurly フロントエンド開発者 ユ・ギョンサン

テストコードを書く時には、自分自身が納得する必要がある瞬間があります。「テストによって開発スケジュールが遅れるのではないか?」「これをテストするのが正しいのか?」「今後変更される内容をテストすべきなのか?」

この講義は、単純なショッピングモールサイトをどれほど戦略的にテストできるかを、様々な技法を用いて示しています。動画を全て見終えた後は、自分で納得できるテストコードを自信を持って書けるようになると思います。多くの方がこの動画をご覧になって、テストに自信を得られることを願っています。

- LINE Plus フロントエンド開発者 イ・サンチョル

「なぜテストコードを書く必要があるのか」から「どのように書くべきか」まで、実務で使えそうな例題をもとに核心を押さえた講義です。テストコードは信頼性のあるアプリケーションのために必ず必要な部分ですが、何をどのようにテストするかいつも悩みが多かったと思うのですが、その基準と方法をきれいに整理して説明してくれて、とても役に立ちました。

- LINE PLUS フロントエンド開発者 キム・ウンビン

この講義を通じて様々なフロントエンドテストの目的を理解し、完成度の高い堅実なアプリを制作してみましょう。😍

様々なフロントエンドテスト
一度に学習するのに最適な講義 🚀

この講義では1部・2部にわたって単体、統合、スナップショット、ビジュアル回帰、E2Eテストを実務に近いプロジェクトを使って簡単かつ迅速に習得します。各テストの長所と限界を理解し、テストの目的を明確に理解して自分だけのワークフローを構築できる能力を身につけます。

講義の核心Point!

重要な概念から一歩ずつ

テストの必要性と共通して知っておくべきテスト作成ルールと概念について説明します。

初めて触れる概念があっても

各ツールとAPIをなぜ使用するのか目的を明確に伝え、各テストタイプの定義と対象を選定する方法を丁寧に見ていきます。

自分で学習を進められるように

学習した内容を基に、テストを直接作成できる例題と正解を一緒に提供し、学習をサポートします

実務と同様に

実際のサーバー環境と通信するショッピングモールの例を基にテストを作成し、文法とツールを学習して実務でも簡単に適用できるよう例題プロジェクトを提供します。

2部は全部で6つのセクションで
構成されています 📚

セクション 1.
TDDと
フロントエンドテスト

📌 フロントエンドの観点からテスト駆動開発について学びます。
📌 1部で学んだ単体・統合テストをTDDと一緒に適用してみます。

セクション 2.
スナップショットテスト

📌 スナップショットテストについて学びます。
📌 vitestを活用してスナップショットテストを作成する方法について学びます。
📌 スナップショットテストを管理する方法について学びます。
📌 スナップショットテストの限界について一緒に見ていきます。

セクション 3.
Storybookとchromaticを活用したビジュアル回帰テスト

📌 UIテストのためのストーリーブック作成方法と作成対象について見ていきます。
📌 ビジュアル回帰テストの概念について見ていきます。
📌 Chromaticを活用したビジュアル回帰テスト作成方法について見ていきます。
📌 Github Actionsと連携してビジュアル回帰テストワークフローを一緒に作ってみます。
📌 ビジュアル回帰テストの限界について見ていきます。

セクション 4.
E2Eテストとは?

📌 E2Eテストの概念と作成時に重要に考慮すべき点について紹介します。
📌 Cypressをインストールし、これを活用してE2Eテストを作成します。
📌 Cypressを構成するクエリ、コマンド、Retry-abilityなど核心概念について学び、一緒にE2Eテストを作成しながら使用するAPIについて見ていきます。

セクション 5.
Cypressを活用した
E2Eテスト作成

📌 カスタムコマンドとクエリの概念を学び、一緒に作成します。
📌 一緒にE2Eテストを作成しながら、session、interceptなどを活用してテストの速度を向上させ、制限された環境を改善する方法について学びます。
📌 テストダブルの概念についてより深く学びます。
📌 E2Eテストの限界について見ていきます。

セクション 6.
まとめ

📌 1部と2部で学んだテストを再整理します。
📌 これを基に様々な状況に適したテスト戦略を考えてみます。

関連講義 📺

実務にすぐ適用するフロントエンドテスト

1部. テスト基礎:単体・統合テスト

リンク: https://inf.run/coESp

予想質問Q&A 💬

Q. Windows / MacOSに関係なく受講できますか?
A.
はい、可能です。授業はMacOSで進行され、VS Codeとブラウザ(Chrome)環境で進行されます。

Q. 学習資料はどこにありますか?
A.
講義資料は講義に含まれており、サンプルコードはGitHubを参考にしてください。

Q. 講義を受ける前に知っておくべき知識はありますか?
A.
JavaScript(ES6)とReactに関する基礎知識が必要です。この講義はテストについて話すため、プロジェクトを進めていく技術についての紹介は簡単に行いますが、具体的な使用法は直接学習していただく必要があります。難しくないレベルで使用しているので、使用技術を学習しながらゆっくりついてきていただければ十分にやり遂げることができます。

Q. 順序に関係なく、希望するセクションを先に受講しても良いでしょうか?
A.
この講義は順次的にテストの概念と各テストの作成方法、限界を説明し、限界を克服する新しいテスト方法を紹介しています。そのため、前のセクションから順次的に学習されることをお勧めします。

Q. 1部と2部は続きの講義でしょうか?
A.
はい。講義は同じサンプルプロジェクトで進行され、1部で紹介した内容は2部で再度紹介しません。可能でしたら1部、2部を一緒に学習されることをお勧めします。

こんな方に
おすすめです

学習対象は
誰でしょう?

  • テストを通じて自分が書いたコードに自信を持たせたい方

  • テストを通じて手で直接する繰り返し検証を自動化させたい方

  • 普段のフロントエンドテストが何を検証するのか気になった方

  • 複数のフロントエンドテストタイプを一度に学習し、適切に溶け込んだワークフローを構築したい方

前提知識、
必要でしょうか?

  • JavaScript

  • CSS・HTML

  • React

こんにちは
です。

1,551

受講生

90

受講レビュー

67

回答

4.9

講座評価

2

講座

코드 조커

기초부터 완성까지, 프런트엔드(개발부터 테스트까지, 이론과 예제로 배우는 프런트엔드) 저자
12년차 프런트엔드 개발자
(현) 글로벌 컨텐츠 회사 FE 개발 부문 팀장
(전) NHN TOAST Cloud FE 개발 팀장
(전) 삼성 SDS FE 개발자

오프

기초부터 완성까지, 프런트엔드(개발부터 테스트까지, 이론과 예제로 배우는 프런트엔드) 저자
8년차 프런트엔드 개발자
(현) 글로벌 메신저 회사 FE 개발자
(전) NHN TOAST UI 오픈소스 개발자

カリキュラム

全体

23件 ∙ (3時間 59分)

講座資料(こうぎしりょう):

授業資料
講座掲載日: 
最終更新日: 

受講レビュー

全体

18件

4.9

18件の受講レビュー

  • thdnjs95701302님의 프로필 이미지
    thdnjs95701302

    受講レビュー 1

    平均評価 5.0

    5

    22% 受講後に作成

    I am a new developer who has always been curious about testing. I listened to the first part, and after listening to the second part, I was able to write a combination of front-end tests that fit the project situation, so I gained confidence in writing tests that I had been vague about. Now I have to apply it to my work.

    • jypark님의 프로필 이미지
      jypark

      受講レビュー 2

      平均評価 5.0

      5

      30% 受講後に作成

      • dbfrontier님의 프로필 이미지
        dbfrontier

        受講レビュー 41

        平均評価 4.6

        5

        100% 受講後に作成

        • honghs95님의 프로필 이미지
          honghs95

          受講レビュー 4

          平均評価 5.0

          5

          30% 受講後に作成

          • human2642622님의 프로필 이미지
            human2642622

            受講レビュー 56

            平均評価 5.0

            5

            61% 受講後に作成

            This is a good lecture on testing.

            ¥7,873

            hanjungvの他の講座

            知識共有者の他の講座を見てみましょう!

            似ている講座

            同じ分野の他の講座を見てみましょう!