メインコンテンツまでスキップ

テスト

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

テストの種類

  • 単体テストは個々のユニット(またはコードのブロック)を独立してテストすることです。Reactでは、ユニットは単一の関数、フック、またはコンポーネントであることがあります。
    • コンポーネントテストは、テストの主な対象がReactコンポーネントである単体テストのよりフォーカスされたバージョンです。これには、コンポーネントのレンダリング方法、propsとの相互作用、ユーザーイベントに対する動作のテストが含まれる場合があります
    • 統合テストは、複数のユニットがどのように連携して動作するかをテストすることです。これは、コンポーネント、フック、および関数の組み合わせである可能性があります
  • エンドツーエンド(E2E)テストは、ブラウザのようなリアルなユーザーシナリオをシミュレートした環境でユーザーフローをテストすることです。これは、特定のタスク(例:サインアップフロー)を運用環境に似ている環境でテストすることを意味します
  • スナップショットテストは、コンポーネントのレンダリング出力をキャプチャし、それをスナップショットファイルに保存します。テストが実行されると、コンポーネントの現在のレンダリング出力が保存されたスナップショットと比較されます。スナップショットの変化は、予期しない動作の変化を示すために使用されます

非同期Server Components

async Server ComponentsはReactエコシステムに新しいため、一部のツールでは完全にサポートされていません。現在のところ、async コンポーネントには単体テストよりもエンドツーエンドテストの使用を推奨します。

ガイド

以下のガイドを参照して、これらの一般的に使用されるテストツールとともにNext.jsをセットアップする方法を学んでください: