- name
- frontend-typescript-testing
- description
- リポジトリで設定済みのReactテスト・ブラウザハーネスを使用してフロントエンドテストを設計。RTL、MSW、Vitest、Playwrightが存在する場合に適用。コンポーネント、loading/error state、統合、フロントエンドE2Eテストの追加・レビュー時に使用。
TypeScript テストルール（フロントエンド）
前提条件の検出
フレームワークやコマンドを選択する前に、package.json、ロックファイル、テスト設定、既存テストのimportを確認する。Vitest、React Testing Library、MSW、Playwright固有のルールは、依存または設定が存在する場合にのみ適用する。異なるフレームワークが設定されている場合は、リポジトリの同等機能を使用する。実行可能なハーネスを特定できない場合は、作り出さずに、確認したpathと不足しているフレームワークまたはコマンドを報告する。
参照
テストフレームワーク
- 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()を使用
テストの基本方針
品質要件
- リグレッション保護: クリティカルパスと再利用度の高いコンポーネントでは、明記された受け入れ結果、公開分岐、失敗状態を検証する
- 独立性: 各テストは他のテストに依存せず実行可能
- 再現性: 時刻、乱数、環境値、ネットワークレスポンス、ブラウザstateを制御し、同一の入力から同一の観測可能な結果を得る
- 可読性: 各テストはユーザーから見える振る舞いを1つだけ名前で示し、setup・action・assertionを分け、その振る舞いで使用する値だけをfixtureに含める
テストの重点配分
複数の機能で再利用される共有コンポーネント、Custom hook、utilityは、リグレッションの影響範囲が広いため、公開分岐、error state、境界の契約を検証する。振る舞いが複数のrender済みユニットに依存するページ単位の構成は、統合/E2Eテストで検証する。