testing-react

React 19 + Compiler 1.0 のテスト戦略

バージョン： React 19.2+ | React Compiler 1.0 | Vitest 5 | Playwright

React Compiler 1.0（自動メモ化）はテストに影響しません。内部の最適化ではなく、ユーザーに見える動作をテストしてください。

2026年の推奨スタック

種類	ツール	用途
ユニット／コンポーネント	Vitest 5 Browser Mode	Chromium/Firefox/WebKit をネイティブに使用
コンポーネント（ブラウザー）	vitest-browser-react	render + ロケーター、Vitest Browser Mode に統合
コンポーネントテスト	Playwright CT	RTL の代替 — 実際のブラウザー
コンポーネント（JSDOM）	React Testing Library 16	引き続きメンテナンスされています — 既存の JSDOM テストスイートに適しています
E2E	Playwright	ユーザー操作を完全に再現するフロー
ミューテーション	Stryker	テスト品質（スコア >= 80%）
プロパティベース	fast-check	テストケースの生成

JSDOM（動作が重く、不完全）よりも実際のブラウザー（Vitest Browser Mode、Playwright CT）を優先してください。React Testing Library 16 は引き続きメンテナンスされています。既存の JSDOM テストスイートで使用し、メリットがない場合は移行しないでください。

ソース： Vitest Browser Mode、vitest-browser-react、Playwright Component Testing、Stryker Mutator

必須の不変条件

• 新しいコンポーネントテストには Vitest Browser Mode（provider: playwright）を使用し、JSDOM は避けてください
• 実装ではなく、動作（ユーザーに見えるもの）をテストしてください
• React Compiler の最適化（メモ化）はテストしないでください
• マージ前に Stryker でミューテーションスコア >= 80% を達成してください
• モノレポには Vitest の projects を使用してください（unit / browser を分離）。workspace は非推奨です
• API 呼び出しのモックには MSW を使用してください（手動で fetch をモックしないでください）

種類ごとのチェックリスト

種類	確認項目
コンポーネント	Vitest Browser Mode または Playwright CT、実際のインタラクション
フック	Vitest、必要に応じて renderHook
RSC	返された HTML のレンダリングをテスト（DOM は使用しない）
E2E	Playwright、expect().toHaveURL() を使った完全なフロー
ミューテーション	npx stryker run、閾値 break >= 50、high >= 80

詳細、コード例、設定、チェックリストについては、REFERENCE.md を参照してください。