フロントエンド開発における各種テスト手法
UIコンポーネントテスト
UIコンポーネント単体テスト
→一つの関数、一つのコンポーネントを対象に行うテスト
UIコンポーネントは単体テストとの相性がよい。
UIコンポーネント結合テスト
→非同期処理の実行結果などの外部要因も含めたテスト。
ビジュアルリグレッションテスト
ある特定の開発時点からの差分を検出して不具合を検証するテスト。
E2Eテスト
ヘッドレスブラウザ（テストマシン用の見えないブラウザ）を用いて行う。
DBに接続した挙動や画面遷移を含めたテストに向いている。
Storybook
有名なフロントエンド開発用テスティングフレームワーク/ツール
1. Jest
- 説明: Jestは主にJavaScriptやTypeScriptで書かれたコードのユニットテストや統合テストに使用されるテスティングフレームワークです。Reactを含む多くのJavaScriptフレームワークとよく統合され、スナップショットテストやモック機能などの便利な機能も提供します。
- 主な用途: ユニットテスト、統合テスト
2. Playwright
- 説明: Playwrightは、クロスブラウザのエンドツーエンドテストを行うためのフレームワークです。ヘッドレスブラウザを使って、ユーザーが実際に行う操作をシミュレーションし、ウェブアプリケーションが正しく動作するかをテストします。Chromium、Firefox、WebKitなど複数のブラウザをサポートしています。
- 主な用途: エンドツーエンドテスト（E2Eテスト）
3. reg-suit
- 説明: reg-suitは、視覚的なリグレッションテストを行うためのツールです。以前のバージョンのウェブページのスクリーンショットと現在のバージョンのスクリーンショットを比較し、デザインやレイアウトに変更がないかをチェックします。CI/CDパイプラインでの自動化にも対応しています。
- 主な用途: ビジュアルリグレッションテスト
4. Storybook
- 説明: Storybookは、UIコンポーネントの開発およびテストを行うためのツールです。コンポーネントを独立して開発・テストする環境を提供し、コンポーネントの見た目や挙動をドキュメント化しながら確認できます。また、Storybookに追加できるアドオンを利用して、コンポーネントのスナップショットテストやアクセシビリティテストなども行えます。
- 主な用途: コンポーネントの開発、ドキュメンテーション、テスト
まとめ
- Jest: ユニットテストや統合テスト向け。
- Playwright: エンドツーエンドテスト（E2Eテスト）向け。
- reg-suit: ビジュアルリグレッションテスト向け。
- Storybook: UIコンポーネントの開発、ドキュメンテーション、テスト向け。