🐣
フロントエンド開発のためのテスト入門の自分なりの整理
モチベーション
フロントエンド開発のためのテスト入門 今からでも知っておきたい自動テスト戦略の必須知識について自分の理解を深めるため本に書かれた内容を整理します。
整理内容
単体テスト
- 利用するテスティングフレームワーク、ライブラリー
- Jest: Meta社（Facebook社）発のOSS
- スタブ、スパイの実装
- jest.mock: 未実装なモジュールの代用品（スタブ）を定義する際に利用
- jest.spyOn: 同上。Web APIクライアントのスタブ実装の事例で登場
- jest.fun: 関数やメソッドの呼び出しを記録するオブジェクト（スパイ）を定義する際に利用。コールバック関数をこれで代用する
- jest.useFakeTimers/jest.setSystemTime/jest.useRealTimers: 現在日時に依存したテストをする際に利用
- テスト対象機能
- 条件分岐
- 例外処理
- 非同期処理
- Web API
- バリデーション
jest.mockとjest.spyOnについては【備忘録】JestのspyOn()とmock()の使い方についてがわかりやすかったです。
UIコンポーネントテスト
- 利用するテスティングフレームワーク、ライブラリー
- 単体テストで利用したもの
- jest-environment-jsdom: DOM API
- @testing-library/react: ReactのUIコンポーネントをテストするために必要
- @testing-library/jest-dom: カスタムマッチャー（toBeInTheDocument()など）を利用するために必要
- @testing-library/user-event: 実際のユーザー操作により近いシミュレートが可能
- テスト対象機能
- コンポーネントの表示
- コンポーネントの状態、値
- コンポーネントの振る舞い
Webアプリケーション結合テスト
- 利用するテスティングフレームワーク、ライブラリー
- UIコンポーネントテストで利用したもの
- next-router-mock: テストコードにおいて現在のURLを書き換える
- msw: ネットワークレベルのモックを実現する。テスト環境のjsdomにはFetch APIが用意されていないため、必要に応じてFetch APIのpolyfillであるwhatwg-fetchをインストールする
- テスト対象機能
- メッセージ表示（Context API利用）
- ヘッダーナビゲーション（メニュー）表示
- Formのバリデーション（React Hook Form利用）
- ページ遷移、確認ダイアログ
- 画像アップロード
UIコンポーネントエクスプローラー
- 利用するテスティングフレームワーク、ライブラリー
- Storybook: UIコンポーネントエクスプローラー、テストツール
- msw-storybook-addon: ネットワークレベルのモックが必要な場合に利用
- storybook-addon-next-router: 特定URLを前提とする機能がある場合必要
- @storybook/testing-library, @storybook/jest, @storybook/addon-interactions: Play functionを利用したインタラクションテストに必要
- @storybook/addon-a11y: アクセシビリティを確認する際に必要
- @storybook/test-runner: Storybookのテストランナー
- @storybook/testing-react: テストにStoryをimportする際に必要
- テスト対象機能
- UIコンポーネントの見た目
- UIコンポーネントの振る舞い
- アクセシビリティ
ビジュアルリグレッションテスト
- 利用するテスティングフレームワーク、ライブラリー
- reg-cli: 画像の差分を検出
- Storybook
- Storycap: Storybookに登録したStoryの画像キャプチャーを撮る
- reg-suit: ビジュアルリグレッションテストフレームワーク
- テスト対象機能
- UIコンポーネントの見た目
E2Eテスト
- 利用するテスティングフレームワーク、ライブラリー
- Playwright: Microsoftから公開されているE2Eテストフレームワーク
- テスト対象機能
- Cookieやローカルストレージなどへの保存（ログイン処理など）
- 複数画面をまたぐ（ログイン後のセッション利用）
一通り読んだ感想
- フロントエンド開発のためのテストが広く網羅されているのがいい
- 実際のプロダクト開発でもよくあるような事例がサンプルコードとともに掲載されているので役立ちそう。開発する段階になって改めて読み返す
- JestでのUIコンポーネントテストとStorybookでのUIコンポーネントテストの住み分けがイマイチよくわかっていない。カバレッジなどを計測してくれることを考えると基本は前者で、ブラウザでの表示が必要なものだけ後者か？
- 自分で開発するサンプルプロダクトに一連のテストを適用し効果や苦労を実感してみたい
Discussion