【Reactテスト入門】React Testing Library/Jest/Vitestで学ぶフロントエンドテスト入門
プロジェクト開発でフロントエンドテストは重要です。バグの早期発見や開発速度の向上、何よりも開発者が安心してコーディングできる環境を作ることができます。今までテストに触れて来なかった方、実務でテストを書く必要になった方にオススメの講座です。
Ratings 4.35 / 5.00
What You Will 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の意味と実装方法が分かる
Description
本講座ではReactのテストライブラリ(React Testing Library/Jest/Vitest)を使ってフロントエンドテストに入門する内容となっています。主に単体テストにフォーカスした内容となっており、テストの意味とは？どういう流れでテストするのか？をハンズオン形式で理解できる内容となっています。
■ 本コースの対象者
・Reactのフロントエンドテストが右も左も分からない方
・これから現場でReact Testing LibraryやJest、Vitestを使用してフロントエンドテストを行う予定の方
・フロントエンドの単体テストの導入方法や流れが分からない方
・プロジェクト内でのコード品質の向上やバグの早期発見にお困りの方
・安定したフロントエンド開発のためのテスト戦略を理解し、適用したい方
・単体テストの重要性や具体的な実施方法を学びたい方
・etc...
■ 本コースを受講する際の注意点
・HTML/CSS/JavaScriptの基本的な文法とルールは教えていません。
・Reactの基礎知識は知っている前提でお話を進めております(コンポーネントやJSX記法等)。
・ある程度Javascriptを触ったことがある人だとスムーズに受講できると思います。
Who Should Attend!
- フロントエンドテスト初学者の方
- Reactにおけるテスト手法を学びたい方
- テストを導入して保守・堅牢性の高いアプリケーション開発がしたい方
- 実務でテストする必要がある方