【Reactテスト入門】React Testing Library/Jest/Vitestで学ぶフロントエンドテスト入門

Description

本講座ではReactのテストライブラリ(React Testing Library/Jest/Vitest)を使ってフロントエンドテストに入門する内容となっています。主に単体テストにフォーカスした内容となっており、テストの意味とは？どういう流れでテストするのか？をハンズオン形式で理解できる内容となっています。

■ 本コースの対象者

・Reactのフロントエンドテストが右も左も分からない方

・これから現場でReact Testing LibraryやJest、Vitestを使用してフロントエンドテストを行う予定の方

・フロントエンドの単体テストの導入方法や流れが分からない方

・プロジェクト内でのコード品質の向上やバグの早期発見にお困りの方

・安定したフロントエンド開発のためのテスト戦略を理解し、適用したい方

・単体テストの重要性や具体的な実施方法を学びたい方

・etc...

■ 本コースを受講する際の注意点

・HTML/CSS/JavaScriptの基本的な文法とルールは教えていません。

・Reactの基礎知識は知っている前提でお話を進めております(コンポーネントやJSX記法等)。

・ある程度Javascriptを触ったことがある人だとスムーズに受講できると思います。

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の意味と実装方法が分かる

Who Should Attend!

• フロントエンドテスト初学者の方
• Reactにおけるテスト手法を学びたい方
• テストを導入して保守・堅牢性の高いアプリケーション開発がしたい方
• 実務でテストする必要がある方

TAKE THIS COURSE