はじめに/ガイド/テスト

テスト

React と Next.js では、いくつかの異なる種類のテストを書くことができ、それぞれに目的とユースケースがあります。このページでは、アプリケーションをテストするために使用できるテストの種類と一般的なツールの概要を説明します。

テストの種類

  • ユニットテスト (Unit Testing): 個々のユニット(またはコードブロック)を単独でテストします。React では、ユニットは単一の関数、フック、またはコンポーネントになります。
    • コンポーネントテスト (Component Testing): ユニットテストのより焦点を絞ったバージョンで、テストの主な対象は React コンポーネントです。これには、コンポーネントのレンダリング方法、props との相互作用、ユーザーイベントへの応答動作のテストが含まれる場合があります。
    • 統合テスト (Integration Testing): 複数のユニットが連携して動作する方法をテストします。これはコンポーネント、フック、関数の組み合わせになることがあります。
  • エンドツーエンドテスト (E2E Testing): ブラウザのような実際のユーザーシナリオをシミュレートする環境でユーザーフローをテストします。これは本番環境に近い環境で特定のタスク(例:サインアップフロー)をテストすることを意味します。
  • スナップショットテスト (Snapshot Testing): コンポーネントのレンダリング出力をキャプチャしてスナップショットファイルに保存します。テスト実行時には、コンポーネントの現在のレンダリング出力が保存されたスナップショットと比較されます。スナップショットの変更は、動作の予期せぬ変化を示すために使用されます。

非同期サーバーコンポーネント (Async Server Components)

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

ガイド

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

On this page