概要
Takazudoの個人的なフロントエンドテスト戦略ガイド（AI支援開発向け）
Takazudoの個人的な開発ノートです。公式のテストドキュメントではありません。 個人的な参照とAI支援コーディングのために書かれています。
このサイトはAI支援開発のためのフロントエンドテスト戦略を扱っています。AIコーディングエージェントと一緒に作業する際に適切なテストアプローチを選択すること — ユニットテストで十分な場合、ブラウザレベルの検証が必要な場合、そしてパスしたテストが実際に重要なことを検証していないという誤った確信の一般的な罠を避ける方法に焦点を当てています。
このサイトで扱う内容
ここに記載されている主要なトピックは、すべて実際の本番プロジェクトから抽出されたパターンに基づいています：
- テストレベル — ユニットテストから視覚的検証までの5段階エスカレーションラダー。各レベルはカバレッジが増加し、ブラインドスポットが減少します
- 判断ガイド — 変更内容に基づいてどのテストレベルを使用するか、間違ったレベルが選択された場合の一般的な失敗パターン、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）