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

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

• 要旨（「BOOK」データベースより）

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

• 目次

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

• 出版社からのコメント

  フロントエンドエンジニアを対象にした、開発工程における「テスト」の解説書。基本知識から実践手法までが一冊で身につきます。

• 内容紹介

  現場で役立つテスト手法を基礎から解説！
  「どこから」「どうやって」手をつければよいかわかる

  本書は、Webアプリケーション開発に携わるフロントエンドエンジニアを対象に、「テスト」の基本知識と具体的な実践手法を解説した書籍です。

  高度な機能を画面上で提供する現代のWebアプリケーションでは、その品質や保守性を担保するうえで、フロントエンドにおける自動テストが重要な役割を持ちます。

  本書はそんな「フロントエンドにおけるテスト」をテーマに、基本的なテストコードの書き方や、目的に応じたテスト手法・ツールの使い分け方を解説します。「UIコンポーネントテスト」や「ビジュアルリグレッションテスト」など、フロントエンドならではの具体的なテスト課題に重点を置いており、基本から実践まで必要な知識を体系的に身につけることができます。

  解説はサンプルWebアプリケーション（Next.js）を舞台にしたハンズオン形式で進みます。「アクセシビリティの改善」や「CIでのテスト実行」といったトピックもフォローしているので、開発現場で役立つ実践的な知識・ノウハウがきちんと身につく一冊です。

  ■こんな方におすすめ
  ・テストの必要性は理解しているが着手できていない
  ・それなりに開発経験はあるがテストを書いたことがない
  ・現在取り組んでいるテスト手法が最適かわからない

  ■本書で取り上げるテストツール
  Jest／Testing Library／Storybook／reg-suit／Playwright...etc

  ■目次
  第1章　テストの目的と障壁
  第2章　テスト手法とテスト戦略
  第3章　はじめの単体テスト
  第4章　モック
  第5章　UIコンポーネントテスト
  第6章　カバレッジレポートの読み方
  第7章　Webアプリケーション結合テスト
  第8章　UIコンポーネントエクスプローラー
  第9章　ビジュアルリグレッションテスト
  第10章　E2E テスト

  【ダウンロード付録】
  付録A　GitHub Actionsで実行するUIコンポーネントテスト
  付録B　GitHub Actionsで実行するE2Eテスト
  ※翔泳社の書籍サイトからPDFをダウンロードできます。

• 著者紹介（「BOOK著者紹介情報」より）（本データはこの書籍が刊行された当時に掲載されていたものです）

  吉井 健文(ヨシイ タケフミ)
  フロントエンド開発現場の実践的ノウハウを趣味で寄稿。本業ではフロントエンド・アーキテクトとして、社内横断組織に従事

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