テスト
ReactおよびNext.jsには、それぞれ独自の目的とユースケースを持ついくつかの異なる種類のテストがあります。このページでは、アプリケーションをテストするために使用できるテストの種類と一般的なツールについて概要を説明します。
テストの種類
- ユニットテストは、個々のユニット(またはコードブロック)を単独でテストすることを含みます。Reactでは、ユニットは単一の関数、フック、またはコンポーネントとなり得ます。
- コンポーネントテストは、テストの主要な対象がReactコンポーネントである、より焦点を絞ったユニットテストのバージョンです。これには、コンポーネントがどのようにレンダリングされるか、プロップとの相互作用、およびユーザーイベントへの応答における動作のテストが含まれる場合があります。
- 統合テストは、複数のユニットがどのように連携するかをテストすることを含みます。これは、コンポーネント、フック、および関数の組み合わせで構成される場合があります。
- エンドツーエンド (E2E) テストは、ブラウザのような実際のユーザーシナリオをシミュレートする環境でユーザーフローをテストすることを含みます。これは、本番環境に似た環境で特定のタスク(例:サインアップフロー)をテストすることを意味します。
- スナップショットテストは、コンポーネントのレンダリング出力をキャプチャし、それをスナップショットファイルに保存することを含みます。テストが実行されると、コンポーネントの現在のレンダリング出力が保存されたスナップショットと比較されます。スナップショットの変更は、予期しない動作の変化を示すために使用されます。
非同期サーバーコンポーネント
async
Server ComponentsはReactエコシステムにとって新しいものであるため、一部のツールはそれらを完全にサポートしていません。そのため、async
コンポーネントのテストには、ユニットテストよりもエンドツーエンドテストを使用することをお勧めします。
ガイド
これらの一般的なテストツールでNext.jsを設定する方法については、以下のガイドを参照してください。
Vitest
ユニットテストのためにVitestをNext.jsで設定する方法を学びましょう。
Jest
ユニットテストとスナップショットテストのためにJestをNext.jsで設定する方法を学びましょう。
Playwright
エンドツーエンド (E2E) テストのためにPlaywrightをNext.jsで設定する方法を学びましょう。
Cypress
エンドツーエンド (E2E) およびコンポーネントテストのためにCypressをNext.jsで設定する方法を学びましょう。
この情報は役に立ちましたか?