Menu

テスト

ReactとNext.jsでは、目的や用途に応じていくつかの異なるタイプのテストを作成できます。このページでは、アプリケーションのテストに使用できるタイプと一般的なツールの概要を説明します。

テストの種類

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

非同期サーバーコンポーネント

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

ガイド

以下のガイドを参照して、Next.jsと一般的に使用されるこれらのテストツールのセットアップ方法を学びましょう: