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

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

フロントエンドの自動テストを、どこから、どのように始めればよいかを、手を動かしながら学ぶための入門書です。『フロントエンド開発のためのテスト入門』 (吉井 健文 著、翔泳社、2023 年 4 月刊) は、副題に「今からでも知っておきたい自動テスト戦略の必須知識」を掲げ、Web アプリケーション開発に携わるフロントエンドエンジニアを対象に、テストの基本知識と具体的な実践手法を解説しています。版元の紹介文によると、解説はサンプルの Web アプリケーション (Next.js) を舞台にしたハンズオン形式で進み、取り上げるテストツールとして Jest、Testing Library、Storybook、reg-suit、Playwright などが挙がっています。初版年月日は 2023 年 4 月 20 日、書店発売日は 2023 年 4 月 24 日です。

全 10 章の構成、テスト戦略から単体テストとモックへ

1 章「テストの目的と障壁」でテストを書く目的と障壁を整理し、2 章「テスト手法とテスト戦略」で、範囲と目的からテストを分ける考え方と、フロントエンドのテストの範囲と目的、テスト戦略モデルとテスト戦略計画を扱います。3 章「はじめの単体テスト」は環境構築から始まり、条件分岐、閾値と例外処理、用途別のマッチャー、非同期処理のテストへ進みます。4 章「モック」は、モックモジュールを使ったスタブ、Web API のモック、モック関数を使ったスパイ、テストを実行する時刻に結果が左右される処理のテストまでを取り上げます。外部の API や時刻のように、テストのたびに結果が変わりうる依存を モック で置き換えるのは、画面の処理を安定して検証するための基本の技法で、本書はこれを UI コンポーネントのテストより前に置いています。

UI コンポーネントテストと Storybook、見た目の比較まで

5 章「UI コンポーネントテスト」は、操作を伴うコンポーネントや非同期処理を含むコンポーネントのテスト、スナップショットテストを扱い、最後の節が「暗黙のロールとアクセシブルネーム」です。Testing Library は、画面の要素をボタンや見出しといった役割と、読み上げに使われる名前で探す書き方を勧めるライブラリで、要素を探しやすいかどうかが、支援技術から操作しやすいかどうかと重なります。6 章はカバレッジレポートの読み方、7 章は Next.js のアプリケーションを題材にした結合テストで、React Context、Next.js Router の表示と操作、React Hook Form を使ったフォームのバリデーション、Web API のレスポンスをモックする MSW、画像アップロードを順に扱います。8 章は Storybook を扱い、Play function によるインタラクションテスト、addon-a11y によるアクセシビリティテスト、Test runner、Story を結合テストとして再利用する方法までを取り上げます。9 章のビジュアルリグレッションテストは、reg-cli による画像比較から Storycap と reg-suit の導入、外部ストレージサービスの準備、GitHub Actions との連携へ進み、最後の節はビジュアルリグレッションテストを活用した積極的なリファクタリングです。コンポーネントを状態ごとに描き分けて登録しておく Storybook の Story は、動作の確認だけでなく、画面を画像として撮って前回との差を比べる見た目の検査にも使えるため、8 章と 9 章が続けて並ぶ構成と読めます。

Playwright の E2E テストとダウンロード付録

10 章では Playwright を使い、Prisma の簡単な紹介とテスト準備を経て、ログイン、プロフィール、Like、新規投稿、記事編集、投稿記事一覧の各機能の E2E テストを書きます。章の最後の節は「Flaky テストと向き合う」で、実行のたびに成否が揺れるテストへの向き合い方で締めくくる構成です。付録 A「GitHub Actions で実行する UI コンポーネントテスト」と付録 B「GitHub Actions で実行する E2E テスト」はダウンロード付録で、翔泳社の書籍サイトから PDF で入手する形です。ブラウザー全体を動かす E2E テスト は実行に時間がかかり、壊れやすくもなるため、どの確認を単体テストや結合テストに任せ、どこを E2E テストで押さえるかを決めることが、2 章のテスト戦略の話とつながります。

版元は、テストの必要性は理解しているが着手できていない人、それなりに開発経験はあるがテストを書いたことがない人、取り組んでいるテスト手法が最適かわからない人を、おすすめの読者に挙げています。7 章以降は Next.js のアプリケーションと React Context、React Hook Form を題材にしており、React と Next.js のコードを読めると進めやすい構成と読めます。コードは 2023 年 4 月の刊行時点のものなので、ツールの版を上げて動かす時は各ツールの公式の資料と照らし合わせてください。単体テストから E2E テストまでの手法を 1 本のサンプルアプリケーションで通して試し、自分のチームでどのテストをどこまで書くかを決める手がかりがほしい人には、投資に見合う 1 冊です。