ShinCode_Camp

本講座で学べる事

本講座の完成品ソースコード

※質問する場合はDiscordサーバーへ

テストとは何か？テストの種類は？

静的、単体、統合、E2Eテストに使われる技術の紹介

4つのテストのメリット・デメリット/トレードオフの理解

結論、なぜテストをする必要があるのか？

Reactの開発環境構築をはじめよう

テストの中身を実際に見てテストしてみよう

npm run testコマンドで実際にテストを実行してみよう

初めてのテストファイルを記述してみよう

TDD(テスト駆動開発)とは何か？

TDDでテスト駆動開発を体験してみよう

コンポーネントにpropsを渡したテストをしてみよう

Jestのwatchモードについて

describeを使ってテストのグルーピングをしてみよう

カバレッジテストとは？実際にカバレッジテストしてみよう

カバレッジの閾値の設定してテストの合格ラインを決めてみよう

簡単なフォーム付きアプリケーションを作ってみよう

getByRole()

comboboxやcheckboxの役割を担っているHTML要素があるかのテストをしよう

getByRole() Options

getByLabelText()

RTLクエリの優先度について

getByPlaceholder()

getByText()

getByDisplayValue()

getByAltText()

getByTitle()

getByTestId()

getByTestId()の適切な使い方

複数要素が存在した場合のテスト手法の解説

getAllBy()

存在しない要素をテストする手法の解説

queryBy()

非同期に取得したい場合のテスト手法の解説

findBy()

テスト内でDOMをデバッグしてみよう

Testing PlaygroundでDOM要素の役割を確認してみよう

ユーザーイベントテストの準備をしよう

ボタンのインクリメント機能が正常に動いているかテストしよう

user-eventライブラリのインタラクションテストを実装してみよう

キーボードインタラクションテストの準備をはじめよう

user.type()を使ってインタラクションテストをしよう

user.tab()を使ってタブを押したときの挙動をテストしよう

カスタムフックスのテストの準備をはじめよう

カスタムフックスはReactComponent内でしか呼び出せないことを確認しよう

renderHook()を使って疑似的に関数コンポーネントを実現してテストしよう

act()を使ってカスタムフックスで作った関数のテストもしてみよう

モックAPIテスト用のコンポーネントを用意しよう

今までの復習として簡単にテストを実装しよう

mswのセットアップをはじめよう

handlerにモックAPIを作成してみよう

モックAPIをテストへ反映させてみよう

モックAPIを呼び出す際のネットワークエラーについて

APIフェッチのエラーハンドリングを実装してみよう

200番と500番のレスポンステストを行う場合

EslintとPrettierの解説について

Viteを使ってReact開発環境構築をはじめよう

importパスエイリアス設定をしよう

vitestを導入してテスト環境の構築をはじめよう

vite.config.tsファイルの修正をしよう

仮のテスト実装をはじめよう

vitestとtesting-libraryを使って簡単にテストコードを書こう

Eslintでプロジェクトの構文ルールを決めよう

Prettierでコード整形を手軽にしよう

Haskyとlint-stagedを導入してみよう

lint-stagedでcommit前にコードフォーマットや構文チェック、push前に自動テストを走らせてみよう

TailwindCSSでCSS記述を手軽にしてみよう

shadcn/uiを導入して楽にUIコンポーネントを作成しよう

StoryBookでUIカタログを導入してみよう