frontend-typescript-testing

# TypeScript テストルール（フロントエンド） ## 前提条件の検出 フレームワークやコマンドを選択する前に、`package.json`、ロックファイル、テスト設定、既存テストのimportを確認する。Vitest、React Testing Library、MSW、Playwright固有のルールは、依存または設定が存在する場合にのみ適用する。異なるフレームワークが設定されている場合は、リポジトリの同等機能を使用する。実行可能なハーネスを特定できない場合は、作り出さずに、確認したpathと不足しているフレームワークまたはコマンドを報告する。 ## 参照 | テスト種別 | 参照先 | 用途 | |-----------|--------|------| | **ユニット / 統合** | 本ドキュメント | RTL + Vitest + MSW での React コンポーネントテスト | | **E2E** | [references/e2e.md](references/e2e.md) | Playwright によるブラウザレベル E2E テスト | ## テストフレームワーク - **Vitest**: リポジトリ設定または既存テストで選択されている場合��使用 - **React Testing Library**: コンポーネントテスト用 - **MSW (Mock Service Worker)**: APIモック用 - テストのインポート: `import { describe, it, expect, beforeEach, vi } from 'vitest'` - コンポーネントテストのインポート: `import { render, screen } from '@testing-library/react'` - ユーザー操作: `import userEvent from '@testing-library/user-event'` - モックの作成: `vi.mock()` を使用 ## テストの基本方針 ### 品質要件 - **カバレッジ**: クリティカルパスと再利用度の高いコンポーネントでは、明記された受け入れ結果、公開分岐、失敗状態を検証する。カバレッジは目標ではなくギャップ検出のシグナルとして扱う。数値しきい値はプロジェクトのCI設定に従う - **独立性**: 各テストは他のテストに依存せず実行可能 - **再現性**: 時刻、乱数、環境値、ネットワークレスポンス、ブラウザstateを制御し、同一の入力から同一の観測可能な結果を得る - **可読性**: 各テストはユーザーから見える振る舞いを1つだけ名前で示し、setup・action・assertionを分け、その振る舞いで使用する値だけをfixtureに含める ### テストの重点配分 複数の機能で再利用される共有コンポーネント、Custom hook、utilityは、リグレッションの影響範囲が広いため、公開分岐、error state、境界の契約を検証する。振る舞いが複数のrender済みユニットに依存するページ単位の構成は、統合/E2Eテストで検証する。 ### テストの種類と範囲 1. **単体テスト（React Testing Library）** - 個々のコンポーネントや関数の動作を検証 - 外部依存はすべてモック化 - 最も数が多く、細かい粒度で実施 - ユーザーから観測可能な振...