本書は、Ｗｅｂアプリケーション開発の「フロントエンドにおけるテスト」について、その基本知識と具体的な実践手法を解説した書籍です。高度な機能を画面上で提供する現代のＷｅｂアプリケーションでは、その品質や保守性を担保するうえで、フロントエンドにおける自動テストが重要な役割を持ちます。「テストの必要性は理解しているが着手できていない」「それなりに開発経験はあるがテストを書いたことがない」「取り組んでいるテスト手法が最適かわからない」本書はこのような悩みを抱えているフロントエンドエンジニアを対象に、基本的なテストコードの書き方や、代表的な手法・ツールの使い分け方などを解説します。「ＵＩコンポーネントテスト」「ビジュアルリグレッションテスト」など、フロントエンドならではのテスト手法についても、実際のコードをもとに具体的なやり方を学習できます。そのほか、「アクセシビリティへの配慮」や「ＣＩでのテスト実行」といったトピックもフォローしているので、実際の開発現場で求められるテストの知識やノウハウがしっかり身につきます。

第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テスト