はじめに
Takazudoの個人的なフロントエンドテスト戦略ガイド（AI支援開発向け）
Takazudoの個人的な開発ノートです。公式のテストドキュメントではありません。 個人的な参照とAI支援コーディングのために書かれています。
このサイトはAI支援開発のためのフロントエンドテスト戦略を扱っています。AIコーディングエージェントと一緒に作業する際に適切なテストアプローチを選択すること -- ユニットテストで十分な場合、ブラウザレベルの検証が必要な場合、そしてパスしたテストが実際に重要なことを検証していないという誤った確信の一般的な罠を避ける方法に焦点を当てています。
このサイトで扱う内容
ここに記載されている主要なトピックは、すべて実際の本番プロジェクトから抽出されたパターンに基づいています：
テストレベル -- ユニットテストからAIベース視覚検証までの6段階エスカレーションラダー。各レベルはカバレッジが増加し、ブラインドスポットが減少します
判断ガイド -- 変更内容に基づいてどのテストレベルを使用するか、テストをどこで・いつ実行するか（実行ティア）、間違ったレベルが選択された場合の一般的な失敗パターン、AIエージェントに必要な振る舞い
実践パターン -- 実戦で検証済みのVitest設定、Playwright E2Eパターン、Tauriデスクトップアプリテスト、バックエンド/Node.jsテストアプローチ
ツールリファレンス -- 各テストレベルのツールとコマンドのクイックルックアップ
Note
このガイドは主にフロントエンドに焦点を当てています。著者の強みがフロントエンド開発にあるためです。バックエンドテストは補足的なトピックとして扱っています -- 具体的には、フロントエンドとバックエンドが適切に分離され、それぞれ独立してテストできる場合に現れるパターンです。
核心的なインサイト
AI支援テストにおいて最も重要な概念はテストレベルのエスカレーションです。AIエージェントがバグを修正して解決済みと宣言する際、その修正の信頼性は検証に使用したテスト手法に依存します。ユニットテストはロジックの正しさを確認できますが、ユーザーが実際に画面上で結果を見られるかどうかは確認できません。「ロジック的に正しい」と「視覚的に正しい」の間のギャップが、誤った確信の最も一般的な原因です。
テストは繰り返すのではなく、エスカレーションすべきです。下位レベルのテストがパスしても問題が解消しない場合は、次のレベルに進みます：
レベル1 -- ユニット/ロジックテスト（vitest、jest）
レベル2 -- DOMベースのコンポーネントテスト（jsdom、Testing Library）
レベル3 -- ビルド出力検証（ビルドされたファイルを読む）
レベル4 -- E2Eブラウザテスト（Playwright、headless browser）
レベル5 -- 決定論的 + 視覚的検証（verify-ui + headless browser）
レベル6 -- AIベース視覚検証（最終手段、CIには使わない）
このガイドの使い方
まず判断ガイドで、現在のタスクに適したテストレベルを判断します
テストレベルセクションで各レベルの詳細を確認します
実践パターンで本番環境で検証済みの設定を参照します
ツールリファレンスをクイックルックアップ用に開いておきます