テスト

React と Next.js では、目的やユースケースに応じてさまざまな種類のテストを記述できます。このページでは、アプリケーションをテストする際に使用できるテストの種類と一般的なツールの概要を説明します。

テストの種類

ユニットテスト は、個々のユニット（コードブロック）を単体でテストします。React では、関数、フック、コンポーネントがユニットに該当します。
- コンポーネントテスト はユニットテストのより焦点を絞ったバージョンで、テストの主な対象が React コンポーネントです。コンポーネントのレンダリング方法、props との相互作用、ユーザーイベントへの応答動作などをテストします。
- 結合テスト は、複数のユニットが連携して動作することをテストします。コンポーネント、フック、関数の組み合わせが対象となります。
エンドツーエンド (E2E) テスト は、ブラウザのような実際のユーザーシナリオを模倣した環境でユーザーフローをテストします。本番環境に近い状態で特定のタスク（例：サインアップフロー）をテストします。
スナップショットテスト は、コンポーネントのレンダリング出力をキャプチャしてスナップショットファイルに保存します。テスト実行時には、コンポーネントの現在のレンダリング出力が保存されたスナップショットと比較されます。スナップショットの変更は、予期しない動作変化を示す指標として使用されます。

async サーバーコンポーネントは React エコシステムにとって新しい概念であるため、一部のツールでは完全にサポートされていません。当面の間、async コンポーネントのテストにはユニットテストよりもエンドツーエンドテストの使用を推奨します。

Next.js で以下の一般的なテストツールをセットアップする方法については、各ガイドを参照してください：