テスト
React と Next.js では、いくつかの異なる種類のテストを記述でき、それぞれに独自の目的とユースケースがあります。このページでは、アプリケーションをテストするために使用できる種類と一般的なツールの概要を説明します。
テストの種類
- ユニットテストでは、個々のユニット(またはコードのブロック)を分離してテストします。React では、ユニットは単一の関数、フック、またはコンポーネントにすることができます。
- コンポーネントテストは、ユニットテストのより焦点を絞ったバージョンで、テストの主な対象は React コンポーネントです。これには、コンポーネントがどのようにレンダリングされるか、props とのインタラクション、ユーザーイベントに対する動作をテストすることが含まれる場合があります。
- 統合テストでは、複数のユニットがどのように連携するかをテストします。これは、コンポーネント、フック、および関数の組み合わせにすることができます。
- エンドツーエンド(E2E)テストでは、ブラウザなどの実際のユーザーシナリオをシミュレートする環境でユーザーフローをテストします。これは、本番環境のような環境で特定のタスク(例:サインアップフロー)をテストすることを意味します。
- スナップショットテストでは、コンポーネントのレンダリングされた出力をキャプチャし、スナップショットファイルに保存します。テストを実行すると、コンポーネントの現在のレンダリングされた出力が、保存されたスナップショットと比較されます。スナップショットの変更は、予期しない動作の変更を示すために使用されます。
ガイド
Next.js をこれらの一般的なテストツールでセットアップする方法については、以下のガイドをご覧ください。
Vitest
2 つの人気のあるユニットテストライブラリである Vitest と React Testing Library を使用して Next.js をセットアップする方法を学びます。
Jest
ユニットテスト用に Jest を使用して Next.js をセットアップする方法を学びます。
Playwright
エンドツーエンド(E2E)および統合テスト用に Playwright を使用して Next.js をセットアップする方法を学びます。
Cypress
エンドツーエンド(E2E)およびコンポーネントテスト用に Cypress を使用して Next.js をセットアップする方法を学びます。
これは役に立ちましたか?