私は約2年前からReactの開発をしていますが、フロントエンド開発におけるテストには、ユニットテストや、UIコンポーネントテスト、E2Eテスト、ビジュアルリグレッションテストがあり、それぞれのテストの重要度や、どのテストを優先的に書けば良いか分からず困っていました。
「フロントエンド開発のためのテスト入門
今からでも知っておきたい自動テスト戦略の必須知識」はそのような時に適切に判断できるようなヒントになりそうな本だと思い購入しました。表紙には「何から始めるべきかを示す一冊」とも書いてありました。
今回は本書のレビューをします。
基本情報と対象読者
本書は307ページあり、全10章で構成されています。
プログラミング言語はType Scriptを、サンプルアプリはNext.js（React）を使っています。
対象読者
- フロントエンドの実装をしたことがない方
- テストコードを書いたことがない方
- DBまで含めたE2Eを書いたことがない方
対象読者から分かる通り、内容は初心者向きです。様々あるフロントエンドテストを広く浅く学べる内容になっています。
1章〜2章 ソフトウェアテストについて
第1章は「テストの目的と障壁」、第2章は「テスト手法とテスト戦略」、について書かれています。
2章1~3節では、単体テストや結合テスト、E2Eテストなどテスト手法の説明があります。
2章4節では、テスト戦略モデルとしてアイスクリームコーン型、テストピラミッド型、テスティングトロフィー型の短い説明があります。
2章5節では、上記の内容を踏まえてテスト戦略計画について書いてあります。
テスト戦略モデル図を参考に、プロジェクトに最適なテスト手法を選択していきます。自分たちのプロジェクトに向き合い「テスト対象は何なのか？」「目的は何なのか？」という判断基準を持つことが大切です。
上記の文章の後に判断基準の一例がありますが、内容が薄いと感じました。
個人的には「どのテストが良く書かれているか」「UIコンポーネントテストを採用しているプロジェクトの割合はどれくらいか？」「E2Eテストを開発初期から作成したか、一通りの機能を実装し終え、結合テストを実施するタイミングで一気に作成したか？」など統計的な情報が欲しかったです。
3章〜10章 様々なテストの実践と解説
3章以降はフロントエンドで書かれる様々なテストの基本的な作成例が紹介されています。3章以降は以下の内容について書かれています。
3章 初めての単体テスト
4章 モック
5章 UIコンポーネントテスト
6章 カバレッジレポートの読み方
7章 Webアプリケーション結合テスト
8章 UIコンポーネントエクスプローラー
9章 ビジュアルリグレッションテスト
10章 E2Eテスト
対象読者に「テストコードを書いたことがない方」とある様に内容は入門者向けです。
私にとっては既に知っている内容が多かったですが、サンプルコードが多いので、知らなかったテクニックを発見できることが何度もありました。
本格的にテストコードを書く場合は、公式サイトや専門書を参照した方が良いでしょう。
サンプルのNext.jsを使用したWebアプリケーションは小規模ですがログイン機能、記事作成機能、記事の一覧ページ表示など実践的な内容で参考になりました。
総評
フロントエンド開発の様々なテスト方法を広く浅く学べる初心者向けの内容でした。
経験者でも所々開発に役立つテクニックや考え方はあると思いますが、より本格的に学びたい人は各テストの専門書を読んだり公式ドキュメントを読む方が良いでしょう。
