logo

Storybookを用いたテスト戦略について考えてみた

Published on February 16, 2025

Category: メモ

はじめに

フロントエンド開発において、品質を担保するためのテスト戦略について、認識を掴むためにインプットしたこと詳細をテスト種類と技術選定理由、実装の方針について言語化を目的として記事を作成させていただきました。

テスト全体像

  1. ビジュアルリグレッションテスト
  2. アクセシビリティテスト
  3. インタラクティブテスト

1. ビジュアルリグレッションテスト

UIの変更を自動的に検出し、意図しない見た目の変更を防ぐことを目的としている。

  • テスト手法
    • Storybook × Chromatic
      • 詳細
        • CI/CDパイプライン内でStorybookの変更を検知し、UI変更を自動的に検出
        • プルリクエスト時に自動テストを実行
        • 設定が容易
      • 実装ステップ
        • Storybook使用している場合、Chromaticと連携して、CICDを組み込むだけ。
      • 参照
    • reg-cli + storyCap
      • オープンソースツールを組み合わせた独自のVRT環境
      • 実装ステップ:
        1. storyCap: Storybookに登録されているStoryをキャプチャ
        2. 外部ストレージ（S3など）から既存キャプチャの取得
          • 初回実行時は新規キャプチャを外部ストレージにアップロード
        3. reg-cliによる画像比較
          • 新旧キャプチャの差分を検出
      • GitHubActionsでの実装が可能
      • 参考
  • 結論
    • Chromatic使用するできるのであれば、設定などが簡単であるため、Storybook × Chromaticを用いる。
    • Storybookを用いるとステークホルダーに共有することもできるため、認識が持ちやすい。

2. アクセシビリティテスト

すべてのユーザーにとって使いやすいコンポーネントを担保することを目的としている。

  • 検証内容
    • スクリーンリーダーでの読み上げ対応
    • キーボード操作の対応
    • フォーカス管理

  • 詳細

3. インタラクティブテスト

ユーザーの実際の操作を想定したテストを実装し、コンポーネントの動作を担保することを目的としています。

  • テストの前提条件
    • コンポーネントは純粋なUI表現に専念します。
    • 必要なデータやコンポーネントの振る舞いについてはモックを提供する。

  • 検証内容
    • ユーザー操作に対する挙動
    • イベントハンドリング

テストランナーの詳細比較

Storybookのテスト実行環境として、2つのアプローチを比較した。

1. @storybook/test-runner

  • 特徴
    • Storybookに特化したテストランナー
    • Playwrightによるヘッドレスブラウザテスト
    • Jestベースの実装

  • できること
    • ヘッドレスブラウザでのレンダリングテスト
    • コンポーネントの検証
    • インタラクションテスト
    • play functionsの実行

2. Storybook × Vitest

  • 特徴
    • Playwrightを使用したヘッドレスブラウザテスト
    • Viteベースの実装
    • ブラウザモードでのテスト実行

  • できること
    • ヘッドレスブラウザでのレンダリングテスト
    • コンポーネントの検証
    • インタラクションテスト
    • play functionsの実行
    • アプリケーションの状態やネットワーク要求のモック

選定結果：Vitest × Storybook

以下の理由から、Vitest × Storybookの組み合わせを採用しました。

  1. test-runnerを用いたテストと同様のテストを実現できる。
  2. Viteベースの高速な実行環境
  3. プロジェクト全体でのテストツール統一が可能
  4. セットアップの容易さ

テストの実装アプローチ

ストーリーファイルの活用

Storybookのストーリーファイル自体をテストファイルとして活用する方針を採用

  • テストとストーリーの統一的な管理が可能
  • コンポーネントのユースケースに基づいたテスト実装
  • UI関連のテストを一箇所で管理可能

テストの再利用性

ストーリーとテストを統合することで、下記の恩恵を受けることができる。

  • ユースケースごとのテストケース作成が容易
  • テストコードの重複を防止
  • メンテナンス性の向上

開発フローとCI/CD統合

ローカル開発環境

  • pnpm run test:storybookでテストを実行
  • Storybookでインタラクティブな確認が可能

CI環境

  • プルリクエスト時の自動テスト実行
  • Chromaticによるビジュアルレグレッション検出
  • ヘッドレスブラウザでのテスト自動実行

まとめ

Storybook中心のテスト戦略と、Vitestをテストランナーとして採用することで、以下のメリットがあると考えています。

  1. 包括的なテストカバレッジ
    • ビジュアル
    • アクセシビリティ
    • インタラクション
  2. 高速な実行環境
  3. 統一されたテストツール
  4. メンテナンス性の高いテストコード