テスト

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

テストの種類

• ユニットテスト は、個々のユニット（またはコードのブロック）を分離してテストをします。React では、ユニットは 1 つの関数、フック、コンポーネントになります。
  • コンポーネントテスト は、React コンポーネントを主なテスト対象とするユニットテストの、より焦点を絞ったバージョンです。これは、コンポーネントがどのようにレンダリングされるか、props とのインタラクション、ユーザーイベントに反応したときの動作をテストすること等を含みます。
  • インテグレーションテスト は、複数のユニットがどのように連動するかをテストします。これは、コンポーネント、フック、関数の組み合わせで構成されます。
• エンドツーエンド（E2E）テスト は、ブラウザのような実際のユーザーシナリオをシミュレートする環境でユーザーフローをテストします。これは、本番のような環境で特定のタスク（例：サインアップフロー）をテストすることを意味します。
• スナップショットテスト は、コンポーネントのレンダリング出力をキャプチャし、スナップショット ファイルに保存します。テストが実行されると、コンポーネントの現在のレンダリング出力が、保存されたスナップショットと比較されます。スナップショットの変更は、予期しない動作の変化を示すために使用されます。

Async Server Components

Async Server Components は React エコシステムにとって新しいもののため、ツールによっては完全にサポートしていないものもあります。その間は、Async Components のユニットテストよりもエンドツーエンドテストを使用することをお勧めします。

Guides

Next.js と一般的に使用されているテストツールのセットアップ方法については、それぞれのドキュメントを参照してください。

• Vitest: ユニットテストのために Next.js で Vitest をセットアップする方法を学びます。
• Jest: ユニットテストとスナップショットテストのために、Next.js で Jest をセットアップする方法を学びます。
• Playwright: エンドツーエンド（E2E）テストのために Next.js で Playwright をセットアップする方法を学びます。
• Cypress: エンドツーエンド（E2E）とコンポーネントテストのために Next.js で Cypress をセットアップする方法を学びます。