react-testing

React Testing Skill

ユーザーの操作に焦点を当てた React テストには、このスキルを使用します。対象には、Vitest／Jest のセットアップ、Testing Library のクエリ、user-event の操作フロー、非同期 UI、フック、プロバイダー、モック、統合テスト、アクセシビリティチェック、メディアコンポーネントのテストが含まれます。

このスキルを使用する場面

フロントマターのトリガーが対象とするタスク、特にこの分野の実装ガイダンス、デバッグ、アーキテクチャの選択、本番環境に向けた堅牢化、パフォーマンス重視の判断をユーザーが求めている場合に使用します。このオーケストレーターから始め、求められている詳細度に合ったリファレンスファイルを読み込みます。

基本ワークフロー

1. まずテストランナーと jsdom 環境をセットアップし、テストセットアップで @testing-library/jest-dom、クリーンアップ、ブラウザー API のモックを一元管理します。
2. テスト ID に頼る前に、ロール、ラベル、テキスト、プレースホルダー、表示値のクエリを使って、ユーザーの視点からテストを記述します。
3. 操作には userEvent.setup() を使い、非同期の状態変化には waitFor または findBy クエリを使います。
4. コンポーネント内部の状態ではなく、モジュール境界またはネットワーク境界でモックし、テスト間でモックをリセットします。
5. コンテキスト、ルーター、クエリクライアント、テーマ、その他アプリ全体のラッパーに対応した、プロバイダー対応のレンダリングユーティリティを作成します。
6. メディアコンポーネントでは、HTMLMediaElement.play、pause、load、メタデータプロパティ、IntersectionObserver など、jsdom にない機能をモックします。

主な注意点

• コンポーネントの状態など、実装の詳細をアサートするのは避けます。目に見える動作とアクセシビリティの状態をアサートします。
• fireEvent は userEvent より低レベルです。ブラウザーやメディアのイベントを直接発生させる必要がある場合を除き、userEvent を優先します。
• 非同期のアサーションでは、任意のタイマーではなく、UI の変化を待ちます。
• jsdom は実際のメディア再生、レイアウト、ブラウザーコーデックを実装していないため、これらの API は意図的にモックします。
• レンダリングユーティリティがテストごとに新しいクライアントを作成し、各テスト後にクリーンアップを実行しないと、プロバイダーの状態がテスト間で漏れることがあります。

リファレンスマップ

• references/react-testing-complete-guide.md - セットアップ、コンポーネントテスト、フォーム、非同期コンポーネント、フック、コンテキスト、モック、統合テスト、アクセシビリティテスト、テストユーティリティ、動画／メディアのテストを扱うオリジナルガイドの全編です。
• references/testing-recipes.md - このスキル向けに追加で整備されているテストレシピです。

回答時の指針

• 互換性やパフォーマンス上、明確な理由がない限り、ユーザーが現在使用しているフレームワーク、ライブラリ、ツールの選択を維持します。
• その場のタスクに必要なコードだけをコピーして使える形で提示し、それ以外の場合は関連するリファレンスのセクションを案内します。
• 本番環境のワークフローについては、トレードオフ、失敗要因、検証手順を明示します。
• 気の利いたマイクロ最適化より、アクセシブルで保守しやすく、測定可能な解決策を優先します。