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

テスト

React および Next.js では、さまざまな目的や使用ケースに応じて書けるいくつかの種類のテストがあります。このページでは、アプリケーションをテストするために使用できる種類と一般的なツールの概要を紹介します。

テストの種類

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

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

async サーバーコンポーネントは React エコシステムに新しいものであるため、いくつかのツールが完全にサポートしていません。その間、async コンポーネントには ユニットテスト よりも エンドツーエンドテスト を使用することをお勧めします。

ガイド

次に示すガイドをご覧いただき、Next.js とこれらの一般的なテストツールをセットアップする方法を学んでください: