【Reactテスト入門】React Testing Library/Jest/Vitestで学ぶフロントエンドテスト入門
プロジェクト開発でフロントエンドテストは重要です。バグの早期発見や開発速度の向上、何よりも開発者が安心してコーディングできる環境を作ることができます。今までテストに触れて来なかった方、実務でテストを書く必要になった方にオススメの講座です。
Created by Shin Code
What you'll learn
- テストとは何か？なぜテストする必要があるのかが分かる
- フロントエンドテストの基礎が理解できる
- React環境でテストを実装する方法が分かる
- Testing Library/Jest/vitestを使ってテストを書くことができる
- TDDの意味とハンズオンでTDD設計の流れが分かる
- Jestのwatchモードについて理解できる
- describeを使ってテストのグルーピングテストが実装できる
- カバレッジテストの意味とその使い方が分かる
- 簡単なフォームを作成しながらTesting Library/Jestのクエリが学べる
- RTLクエリ(get/query/find)の基礎が分かる
- RTLクエリの優先度について理解できる
- 複数要素が存在する場合のDOMテストが分かる
- 非同期処理のテスト実装方法が分かる
- Testing Playground拡張機能の使い方が分かる
- ユーザーイベントテスト手法が学べる
- user-eventライブラリを使ってクリックやキーボードインタラクションテストが実装できる
- Reactのカスタムフックスの実装とそのテストができる
- mswの基礎を学んでWebAPIモックテストができる
- エラーハンドリングテストが実装できる
- vite/vitestを使ったモダンReact開発環境が学べる
- eslint/prettierのセットアップ方法が分かる
- lint-staged/Huskyの意味と実装方法が分かる
Requirements
- プログラミングの基礎(if文/for文等)
- Reactの基礎(jsx/コンポーネントの理解等)
Description
本講座ではReactのテストライブラリ(React Testing Library/Jest/Vitest)を使ってフロントエンドテストに入門する内容となっています。主に単体テストにフォーカスした内容となっており、テストの意味とは？どういう流れでテストするのか？をハンズオン形式で理解できる内容となっています。
■ 本コースの対象者
・Reactのフロントエンドテストが右も左も分からない方
・これから現場でReact Testing LibraryやJest、Vitestを使用してフロントエンドテストを行う予定の方
・フロントエンドの単体テストの導入方法や流れが分からない方
・プロジェクト内でのコード品質の向上やバグの早期発見にお困りの方
・安定したフロントエンド開発のためのテスト戦略を理解し、適用したい方
・単体テストの重要性や具体的な実施方法を学びたい方
・etc...
■ 本コースを受講する際の注意点
・HTML/CSS/JavaScriptの基本的な文法とルールは教えていません。
・Reactの基礎知識は知っている前提でお話を進めております(コンポーネントやJSX記法等)。
・ある程度Javascriptを触ったことがある人だとスムーズに受講できると思います。
Who this course is for:
- フロントエンドテスト初学者の方
- Reactにおけるテスト手法を学びたい方
- テストを導入して保守・堅牢性の高いアプリケーション開発がしたい方
- 実務でテストする必要がある方
Instructor
Webエンジニア
- 4.5 Instructor Rating
- 8,173 Reviews
- 30,199 Students
- 31 Courses
皆さんはじめまして。Shinと申します。
休みの日はプログラミングばかり触っているちょっと変わった人です。便利なアプリや好奇心をくすぐられるようなアプリを作るのが趣味です。
動画レクチャーは分かりやすいように作成するように心がけています。
どうぞよろしくお願いします。