실무에 바로 적용하는 프런트엔드 테스트 - 2부. 테스트 심화: 시각적 회귀・E2E 테스트
코드 조커, 오프
이 강의를 통해 전반적인 프런트엔드 테스트 종류를 파악하고, 상황에 맞는 적절한 테스트 선택을 통해 신뢰감 있는 테스트를 작성하는 방법을 배웁니다.
초급
소프트웨어 테스트, JavaScript, e2e
BEST
実務にすぐに適用できるフロントエンドテスト - 1部。テストの基礎：単体テスト・結合テスト
この講義を通して、フロントエンドテストの全体的な種類を把握し、状況に合った適切なテストを選択することで、信頼感のあるテストを作成する方法を学びます。
学習した受講者のレビュー
こんなことが学べます
テスト作成に必要な重要概念
自分が書いたコードの信頼性を高めることができるフロントエンドテストの作成方法
Vitestを活用したユニット・統合テストの作成方法
Testing Library、MSWなどのテストツールの使い方
🎊 イベント 🎊
第1部30%クーポンをお受け取りください！
📌 リンク (77,000 -> 53,600円)
1. クーポンの使用方法は？[受講カート → クーポン選択 → 利用可能クーポン]で希望するクーポンをクリックして使用できます。
2. クーポンの登録方法は？[受講カート → クーポン選択]、[ダッシュボード → クーポンボックス]で保有しているクーポンコードを入力するとクーポンが発行されます。
1部の講義を受講された方は、2部50%割引クーポンをお受け取りください！
1部の講義をすべて受講された方に、2部の講義を50%割引価格でより安く購入できるクーポンを共有しています。下記の投稿にアクセスして、購入前にクーポンをご利用ください！
📌 投稿リンク：リンク
⚠️ この投稿は1部購入者のみに表示されます。
学生・就活生の皆様に講座料金をサポートいたします 💪
収入のない学生の方や就活生の方が負担を感じないよう、フォームに入力して提出していただければ50%割引クーポンを差し上げます。申請リンクが開いていれば申請可能です。皆さんの学習を応援しています。頑張ってください！🔥
📌 申込リンク: https://forms.gle/ohs7KywvSGXoJXGM7
⚠️ FEの勉強を始めたばかりの方には少し難しいトピックかもしれません。前提知識を必ず確認してから受講してください！
こんな悩みを抱えていませんか？🤔
フロントエンドテストは
何を検証するのか
気になります
手でデバイスから
直接行うテストは
とても反復的で大変です
実務で作成する
本当のフロントエンドテストが
気になります
フロントエンドテストの様々なタイプを学習し、実際の事例に近い例題を使用してテストを作成します！
- 🤔 アプリを作ることにはある程度慣れてきたけれど、実際にプロダクション環境でうまく動作するか不安でしたか？
- 🤔 テストが本当に必要だと言われているけれど、あまりにも多様なフロントエンドテストがあって始める気力が湧かなかったのではないでしょうか？
- 🤔 特定のテストタイプにこだわりながらより多くのことを検証し自動化したいと思われましたか？
- 🤔 どのようなテストを書くべきか、テストの目的について整理したかったのでしょうか？
このような悩みをお持ちでしたら、よくいらっしゃいました！
「実務にすぐ適用するフロントエンドテスト」を皆様におすすめします。
現役フロントエンド実務者たちが推薦したあの講座！
テストコードの必要性から、様々な種類のテスティング概念と活用方法をすべて学ぶことができる講義です。まだテストに慣れていない方は講義を通してテスティングの概念をしっかりと身につけることができ、既にテストコードを書いていた方は講義の例題と実習でより効果的で意味のあるテストコードを習得して実務に適用してみることができます。
- Kurly フロントエンド開発者 ユ・ギョンサン
テストコードを書くときには、自分自身を納得させる必要がある瞬間があります。「テストによって開発スケジュールが遅れるのではないか？」「これをテストするのが正しいのか？」「今後変更される内容をテストすべきなのか？」
この講義は、単純なショッピングモールサイトをどれほど戦略的にテストできるかを、様々な技法を用いて示しています。動画を全て見終えた後は、自分で納得できるテストコードを自信を持って書けるようになると思います。多くの方がこの動画をご覧になって、テストに自信を得られることを願っています。
- LINE Plus フロントエンド開発者 イ・サンチョル
「なぜテストコードを書く必要があるのか」から「どのように書くべきか」まで、実務で使えそうな例題をベースに核心を押さえた講義です。テストコードは信頼性のあるアプリケーションのために必ず必要な部分ですが、何をどのようにテストするかいつも悩みが多かったと思うのですが、その基準と方法をきれいに整理して説明してくれて、とても役に立ちました。
- LINE Plus フロントエンド開発者 キム・ウンビン
この講義を通じて様々なフロントエンドテストの目的を理解し、完成度の高い堅実なアプリを制作してみましょう。😍
様々なフロントエンドテストを
一度に学習するのに最適な講座🚀
この講義では1部/2部にわたって単体、統合、スナップショット、ビジュアル回帰、E2Eテストを実務に近いプロジェクトを使って簡単かつ迅速に習得します。各テストの長所と限界を理解し、テストの目的を明確に理解して自分だけのワークフローを構築できる能力を身につけます。
講義の核心ポイント！
重要な概念から一歩ずつ
テストの必要性と共通して知っておくべきテスト作成ルールと概念について説明します。
初めて接する概念があっても
各ツールとAPIをなぜ使用するのか目的を明確に伝え、各テストタイプの定義と対象を選定する方法を丁寧に見ていきます。
自ら学習していけるように
学習した内容をベースにテストを直接作成できる例題と正解を一緒に提供し、効果的なテスト学習をサポートします。
実務と同様に
実際のサーバー環境と通信するショッピングモールの例を基にテストを作成し、文法とツールを学習して実務でも簡単に適用できるよう例題プロジェクトを提供します。
第1部は全部で5つのセクションで
構成されています📚
セクション 1
フロントエンドテスト作成の準備
- テストとは何かを確認し、テストコードを作成した際の効果を見てみます。
- フロントエンドテストを作成する際に、正しいテストを作成するルールを見ていきます。
- これから使用する予定のサンプルプロジェクトの機能について紹介します。
セクション2
単体テストとは？
- 単体テストの概念と目的について説明します。
- 単体テストを作成する際に検証すべき内容について説明します。
- テストフレームワークVitestについて紹介し、サンプルコードを基にユニットテストを作成します。
- この過程でマッチャー（Matcher）とアサーション（Assertion）、it、setup、teardownなどテスト作成に必要な文法を見ていきます。
- コンポーネントテストを支援するツールTesting Libraryについて見ていきます。
セクション 3
単体テストの作成
- ショッピングモールの例を基に単体テストの対象として選定する基準を見ていきます。
- モッキング（Mocking）とモッキング初期化方法について確認し、独立したテストの作成方法について見ていきます。
- Reactフックとよく出会うタイマーを対象にテストを作成する方法を学び、act関数とReact Testing Libraryをうまく活用する方法と注意点について見ていきます。
- 単体テストの限界について見ていきます。
セクション 4
統合テストとは？
- 統合テストの概念と目的について説明します。
- ショッピングモールの例を基に統合テストの対象として選定する基準を見てみます。
- 状態管理ライブラリをモックする方法とMSWを活用したAPIモック方法について見ていきます。
- ショッピングモールの例を基に単体テストの対象として選定する基準を見ていきます。
- React Testing Libraryの非同期ユーティル関数を活用する方法を見ていきます。
セクション 5
統合テストの作成
- ショッピングモールの例を基にした統合テストを作成してみます。
- 統合テストの限界について学びます。
- GitHub Actionsを活用してテストを自動化する方法を見ていきます。
関連講義
実務にすぐ適用するフロントエンドテスト
2部: テスト深化 - ビジュアル回帰 · E2Eテスト
リンク: https://inf.run/DRRLB
Q&A 💬
Q. Windows / macOS関係なく受講できますか？
はい、可能です。授業はmacOSで進行され、VSCodeとブラウザ（Google Chrome）環境で進行されます。
Q. 学習資料はどこで受け取ることができますか？
講義資料は講義に含まれており、サンプルコードはGitHubを参考してください。
Q. 講義を受講する前に知っておくべき知識はありますか？
JavaScript（ES6）とReactに関する基礎知識が必要です。この講義はテストについて話すため、プロジェクトを進めていく技術についての紹介は簡単に行いますが、具体的な使用法は直接学習していただく必要があります。難しくないレベルで使用しているので、使用技術を学習しながらゆっくりついてきていただいても十分にやり遂げることができます。
Q. 順序に関係なく、希望するセクションを先に受講しても大丈夫ですか？
この講義は順次的にテストの概念と各テストの作成方法、限界を説明し、限界を克服する新しいテスト方法を紹介しています。そのため、前のセクションから順次的に学習されることをお勧めします。
Q. 1部と2部は続きの講義でしょうか？
はい。講義は同じサンプルプロジェクトで進行され、1部で紹介した内容は2部で再度紹介しません。可能でしたら1部、2部を一緒に学習されることをお勧めします。
こんな方に
おすすめです
学習対象は
誰でしょう？
テストを通じて、自分が作成したコードに自信を持ちたい方
テストを通じて手作業による反復的な検証を自動化したい方
普段フロントエンドテストが何を検証するものなのか疑問に思っていた方
様々なフロントエンドテストのタイプを一度に学習し、適切に溶け込んだワークフローを構築したい方
前提知識、
必要でしょうか？
JavaScript
CSS・HTML
React
1,543
受講生
89
受講レビュー
66
回答
4.9
講座評価
2
講座
코드 조커
◦ 기초부터 완성까지, 프런트엔드(개발부터 테스트까지, 이론과 예제로 배우는 프런트엔드) 저자
◦ 12년차 프런트엔드 개발자
◦ (현) 글로벌 컨텐츠 회사 FE 개발 부문 팀장
◦ (전) NHN TOAST Cloud FE 개발 팀장
◦ (전) 삼성 SDS FE 개발자
오프
◦ 기초부터 완성까지, 프런트엔드(개발부터 테스트까지, 이론과 예제로 배우는 프런트엔드) 저자
◦ 8년차 프런트엔드 개발자
◦ (현) 글로벌 메신저 회사 FE 개발자
◦ (전) NHN TOAST UI 오픈소스 개발자
カリキュラム
全体
25件 ∙ (4時間 42分)
講座資料（こうぎしりょう）:
授業資料
講座掲載日:
最終更新日:
受講レビュー
全体
72件
4.9
72件の受講レビュー
Dongja受講レビュー 2
∙
平均評価 5.0
5
100% 受講後に作成테스트가 무엇인지, 무엇을 테스트할지, 어떻게 테스트 할지에 대해서 많은 분들이 고민을 하고 계실거라고 생각합니다. 이 강의를 들으면 테스트를 처음 접하시는 분들도 쉽게 따라하실 수 있을 것 같습니다. 테스트와 별개로 예제 프로젝트 세팅들을 보면서도 얻어가는 부분들이 있어서 좋았습니다 :) 좋은 강의 만들어주셔서 감사합니다! 2부도 열심히 들을게요~
- 코드 조커, 오프知識共有者
강의를 잘 활용해주시는 것 같아 좋네요! 나머지 테스트 코드들도 꼭 함께 살펴보시면서 공부해보시면 더 큰 도움이 될 겁니다. 2부까지 꼭 완강하시고 실무에 적용하신 내용 공유해주신 내용도 들려주시면 좋겠네요! 새해 복 많이 받으세요~
- 프레디
受講レビュー 7
∙
平均評価 5.0
- 컴공ㄷㄷ해
受講レビュー 2
∙
平均評価 5.0
￥9,003
hanjungvの他の講座
知識共有者の他の講座を見てみましょう！
似ている講座
同じ分野の他の講座を見てみましょう！
![[CSS&JS Master] - 트렌디한 감정기록 일기장 만들기강의 썸네일](https://cdn.inflearn.com/public/courses/335863/cover/836195ea-22e0-4a97-84a9-5c520b028729/335863.png?f=avif&w=420)
