フロントエンド開発のためのテスト入門 今からでも知っておきたい自動テスト戦略の必須知識

第1章 テストの目的と障壁
1-1 本書の構成
1-2 テストを書く目的
1-3 テストを書く障壁

第2章 テスト手法とテスト戦略
2-1 範囲と目的で考えるテスト
2-2 フロントエンドテストの範囲
2-3 フロントエンドテストの目的
2-4 テスト戦略モデル
2-5 テスト戦略計画

第3章 はじめの単体テスト
3-1 環境構築
3-2 テストの構成要素
3-3 テストの実行方法
3-4 条件分岐
3-5 閾値と例外処理
3-6 用途別のマッチャー
3-7 非同期処理のテスト

第4章 モック
4-1 モックを使用する目的
4-2 モックモジュールを使ったスタブ
4-3 Web APIのモック基礎
4-4 Web APIのモック生成関数
4-5 モック関数を使ったスパイ
4-6 Web APIの詳細なモック
4-7 現在時刻に依存したテスト

第5章 UIコンポーネントテスト
5-1 UIコンポーネントテストの基礎知識
5-2 必要なライブラリのインストール
5-3 はじめのUIコンポーネントテスト
5-4 アイテム一覧UIコンポーネントテスト
5-5 インタラクティブなUIコンポーネントテスト
5-6 ユーティリティ関数を使用したテスト
5-7 非同期処理を含むUIコンポーネントテスト
5-8 UIコンポーネントのスナップショットテスト
5-9 暗黙のロールとアクセシブルネーム

第6章 カバレッジレポートの読み方
6-1 カバレッジレポートの概要
6-2 カバレッジレポートの読み方
6-3 カスタムレポーター

第7章 Webアプリケーション結合テスト
7-1 Next.jsアプリケーション開発と結合テスト
7-2 React Contextの結合テスト
7-3 Next.js Routerの表示結合テスト
7-4 Next.js Routerの操作結合テスト
7-5 Formを扱いやすくするReact Hook Form
7-6 Formのバリデーションテスト
7-7 Web APIレスポンスをモックするMSW
7-8 Web APIの結合テスト
7-9 画像アップロードの結合テスト

第8章 UIコンポーネントエクスプローラー
8-1 Storybookの基本
8-2 Storybookの必須アドオン
8-3 Context APIに依存したStoryの登録
8-4 Web APIに依存したStoryの登録
8-5 Next.js Routerに依存したStoryの登録
8-6 Play functionを利用したインタラクションテスト
8-7 addon-a11yを利用したアクセシビリティテスト
8-8 StorybookのTest runner
8-9 Storyを結合テストとして再利用する

第9章 ビジュアルリグレッションテスト
9-1 ビジュアルリグレッションテストの必要性
9-2 reg-cliで画像比較をする
9-3 Storycapの導入
9-4 reg-suitを導入する
9-5 外部ストレージサービスを準備する
9-6 GitHub Actionsにreg-suitを連携する
9-7 ビジュアルリグレッションテストを活用した積極的なリファクタリング

第10章 E2E テスト
10-1 E2Eテストの概要
10-2 Playwrightのインストールと基礎
10-3 テスト対象アプリケーションの概要
10-4 開発環境でE2Eテストを実行する
10-5 Prismaの簡単な紹介とテスト準備
10-6 ログイン機能のE2Eテスト
10-7 プロフィール機能のE2Eテスト
10-8 Like機能のE2Eテスト
10-9 新規投稿ページのE2Eテスト
10-10 記事編集ページのE2Eテスト
10-11 投稿記事一覧ページのE2Eテスト
10-12 Flakyテストと向き合う

【ダウンロード付録】
付録A GitHub Actionsで実行するUIコンポーネントテスト
付録B GitHub Actionsで実行するE2Eテスト

• 本商品の内容についての問い合わせ
• ご購入等に関する問い合わせ