Next.jsアプリの自動テスト：確認すべき4つのレイヤー

Next.jsアプリケーションは、サーバーコンポーネント、ルートハンドラー、ミドルウェア、ブラウザインタラクションを組み合わせることができます。効果的なテスト計画は、個々のUIコンポーネントだけでなく、これらのレイヤー間の境界を検証します。

JestとReact Testing Libraryはコンポーネントの動作に役立ちます。リクエストの検証、認可、データ読み込み、ナビゲーションについては、複数のコンポーネントに依存する結果であるため、HTTPおよびブラウザレベルのチェックを追加してください。

この概要では、4つのテストレイヤーを具体的なNext.jsのチェック項目に対応させています。次に追加すべきテストを選ぶ際の参考にし、ツールのセットアップについては公式フレームワークガイドをご参照ください。

Next.jsテストスタック

実践的な出発点として、4つの補完的なレイヤーがあります：

レイヤー1：コンポーネントテスト（Jest + React Testing Library）。個々のコンポーネントを分離してテストします。高速で信頼性が高く、コンポーネントレベルの動作に限定されます。

レイヤー2：ルートハンドラーテスト。App Routerのルートハンドラーに対して、有効・不正・未認証のリクエストを送信し、ステータス、レスポンスの形式、プライベートデータが返されないことをアサートします。

レイヤー3：ページ統合チェック。ユーザーデータを読み込むページに対して、レンダリング結果、空状態とエラー状態、ビューを変更するクライアントアクションをアサートします。

レイヤー4：ブラウザE2Eテスト。本番に近いビルドでサインイン、保護されたページ、サインアウトを実行し、サインアウト時のリダイレクトとアクセス拒否をアサートします。

独立した同期コンポーネントにはユニットテストランナーを使用し、完全なユーザーフローにはブラウザレベルのテストを使用してください。Next.jsの公式Jestガイドでは、非同期サーバーコンポーネントにはE2Eテストを推奨しています：https://nextjs.org/docs/app/guides/testing/jest

TestSpriteをブラウザまたはAPIチェックに使用する場合は、到達可能なターゲットを指定し、生成されたケースを確認して、アサーションがアプリケーションの要件と一致していることを確認してください。チームがゲートしたいフローに対して、PRチェックを個別に設定してください。

まず1つの重要なフローと1つのエラーパスから始め、失敗とカバーされていないリスクに基づいて拡張します。特定の統合に依存する前に、現在のプロダクトプランの制限を確認してください。

TestSpriteを無料で試す →