Next.jsでJestをセットアップする方法

JestとReact Testing Libraryは、ユニットテストとスナップショットテストによく一緒に使用されます。このガイドでは、Next.jsでJestをセットアップし、最初のテストを書く方法を紹介します。

知っておくと良いこと: Reactの新しい機能であるasync Server Componentsは、Jestが現在サポートしていません。同期型のServer ComponentsとClient Componentsのユニットテストは実行できますが、asyncコンポーネントにはE2Eテストを使用することを推奨します。

クイックスタート

Next.jsのwith-jestサンプルを使用して、create-next-appで素早く始めることができます：

npx create-next-app@latest --example with-jest with-jest-app

手動セットアップ

Next.js 12のリリース以降、Next.jsにはJestのための組み込み設定が含まれています。

Jestをセットアップするには、jestと以下のパッケージを開発依存関係としてインストールします：

npm install -D jest jest-environment-jsdom @testing-library/react @testing-library/dom @testing-library/jest-dom ts-node @types/jest
# または
yarn add -D jest jest-environment-jsdom @testing-library/react @testing-library/dom @testing-library/jest-dom ts-node @types/jest
# または
pnpm install -D jest jest-environment-jsdom @testing-library/react @testing-library/dom @testing-library/jest-dom ts-node @types/jest

次のコマンドを実行して基本的なJest設定ファイルを生成します：

npm init jest@latest
# または
yarn create jest@latest
# または
pnpm create jest@latest

これにより、Jestをプロジェクトにセットアップするための一連のプロンプトが表示され、自動的にjest.config.ts|jsファイルが作成されます。

設定ファイルを更新してnext/jestを使用します。このトランスフォーマーには、Next.jsで動作するために必要なすべての設定オプションが含まれています：

import type { Config } from 'jest'
import nextJest from 'next/jest.js'

const createJestConfig = nextJest({
  // Next.jsアプリのパスを指定して、テスト環境でnext.config.jsと.envファイルを読み込む
  dir: './',
})

// Jestに渡すカスタム設定を追加
const config: Config = {
  coverageProvider: 'v8',
  testEnvironment: 'jsdom',
  // 各テストの前に実行する追加のセットアップオプション
  // setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
}

// next/jestが非同期のNext.js設定を読み込めるように、この方法でエクスポート
export default createJestConfig(config)

内部的に、next/jestは以下の設定を自動的に行います：

• Next.js Compilerを使用したtransformの設定
• スタイルシート（.css、.module.css、およびscssバリアント）、画像インポート、next/fontの自動モック
• .env（およびすべてのバリアント）をprocess.envに読み込み
• node_modulesをテストの解決と変換から除外
• .nextをテストの解決から除外
• SWC変換を有効にするフラグのためにnext.config.jsを読み込み

知っておくと良いこと: 環境変数を直接テストするには、別のセットアップスクリプトまたはjest.config.tsファイルで手動で読み込んでください。詳細はテスト環境変数を参照してください。

オプション：絶対インポートとモジュールパスエイリアスの処理

プロジェクトでモジュールパスエイリアスを使用している場合、jsconfig.jsonファイルのpathsオプションとjest.config.jsファイルのmoduleNameMapperオプションを一致させるようにJestを設定する必要があります。例えば：

{
  "compilerOptions": {
    "module": "esnext",
    "moduleResolution": "bundler",
    "baseUrl": "./",
    "paths": {
      "@/components/*": ["components/*"]
    }
  }
}

moduleNameMapper: {
  // ...
  '^@/components/(.*)$': '<rootDir>/components/$1',
}

オプション：カスタムマッチャーでJestを拡張

@testing-library/jest-domには、.toBeInTheDocument()などの便利なカスタムマッチャーが含まれており、テストを簡単に書くことができます。すべてのテストにカスタムマッチャーをインポートするには、Jest設定ファイルに以下のオプションを追加します：

setupFilesAfterEnv: ['<rootDir>/jest.setup.ts']

次に、jest.setup内に以下のインポートを追加します：

import '@testing-library/jest-dom'

知っておくと良いこと: extend-expectはv6.0で削除されました。バージョン6より前の@testing-library/jest-domを使用している場合は、代わりに@testing-library/jest-dom/extend-expectをインポートする必要があります。

各テストの前に追加のセットアップオプションが必要な場合は、上記のjest.setupファイルに追加できます。

package.jsonにテストスクリプトを追加

最後に、Jestのtestスクリプトをpackage.jsonファイルに追加します：

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "test": "jest",
    "test:watch": "jest --watch"
  }
}

jest --watchは、ファイルが変更されたときにテストを再実行します。Jest CLIのその他のオプションについては、Jestドキュメントを参照してください。

最初のテストを作成

これでプロジェクトはテストを実行する準備が整いました。プロジェクトのルートディレクトリに__tests__フォルダを作成します。

例えば、<Page />コンポーネントが正常に見出しをレンダリングするかどうかを確認するテストを追加できます：

import Link from 'next/link'

export default function Page() {
  return (
    <div>
      <h1>Home</h1>
      <Link href="/about">About</Link>
    </div>
  )
}

import '@testing-library/jest-dom'
import { render, screen } from '@testing-library/react'
import Page from '../app/page'

describe('Page', () => {
  it('renders a heading', () => {
    render(<Page />)

    const heading = screen.getByRole('heading', { level: 1 })

    expect(heading).toBeInTheDocument()
  })
})

オプションで、コンポーネントの予期しない変更を追跡するためにスナップショットテストを追加します：

import { render } from '@testing-library/react'
import Page from '../app/page'

it('renders homepage unchanged', () => {
  const { container } = render(<Page />)
  expect(container).toMatchSnapshot()
})

テストの実行

次のコマンドを実行してテストを実行します：

npm run test
# または
yarn test
# または
pnpm test

追加リソース

さらに詳しく知りたい場合は、以下のリソースが役立ちます：

• Next.js with Jestの例
• Jestドキュメント
• React Testing Libraryドキュメント
• Testing Playground - 要素をマッチさせるための良いテストプラクティスを使用