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ファイルで手動で読み込んでください。詳細はテスト環境変数を参照してください。

Jestのセットアップ（Babelを使用）

Next.js Compilerを使用せずにBabelを使用する場合は、上記のパッケージに加えてbabel-jestとidentity-obj-proxyを手動でインストールし、Jestを設定する必要があります。

Next.js用にJestを設定するための推奨オプションは以下の通りです：

jest.config.js

module.exports = {
  collectCoverage: true,
  // node 14.xでは、カバレッジプロバイダーv8が高速でほぼ良好なレポートを提供
  coverageProvider: 'v8',
  collectCoverageFrom: [
    '**/*.{js,jsx,ts,tsx}',
    '!**/*.d.ts',
    '!**/node_modules/**',
    '!<rootDir>/out/**',
    '!<rootDir>/.next/**',
    '!<rootDir>/*.config.js',
    '!<rootDir>/coverage/**',
  ],
  moduleNameMapper: {
    // CSSモジュールを使用したCSSインポートの処理
    // https://jestjs.io/docs/webpack#mocking-css-modules
    '^.+\\.module\\.(css|sass|scss)$': 'identity-obj-proxy',

    // CSSモジュールを使用しないCSSインポートの処理
    '^.+\\.(css|sass|scss)$': '<rootDir>/__mocks__/styleMock.js',

    // 画像インポートの処理
    // https://jestjs.io/docs/webpack#handling-static-assets
    '^.+\\.(png|jpg|jpeg|gif|webp|avif|ico|bmp|svg)$': `<rootDir>/__mocks__/fileMock.js`,

    // モジュールエイリアスの処理
    '^@/components/(.*)$': '<rootDir>/components/$1',

    // @next/fontの処理
    '@next/font/(.*)': `<rootDir>/__mocks__/nextFontMock.js`,
    // next/fontの処理
    'next/font/(.*)': `<rootDir>/__mocks__/nextFontMock.js`,
    // server-onlyの無効化
    'server-only': `<rootDir>/__mocks__/empty.js`,
  },
  // 各テストの前に実行する追加のセットアップオプション
  // setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
  testPathIgnorePatterns: ['<rootDir>/node_modules/', '<rootDir>/.next/'],
  testEnvironment: 'jsdom',
  transform: {
    // next/babelプリセットでテストをトランスパイルするためにbabel-jestを使用
    // https://jestjs.io/docs/configuration#transform-objectstring-pathtotransformer--pathtotransformer-object
    '^.+\\.(js|jsx|ts|tsx)$': ['babel-jest', { presets: ['next/babel'] }],
  },
  transformIgnorePatterns: [
    '/node_modules/',
    '^.+\\.module\\.(css|sass|scss)$',
  ],
}

各設定オプションの詳細はJestドキュメントで学べます。また、Next.jsがJestをどのように設定しているかを確認するためにnext/jest設定を確認することをお勧めします。

スタイルシートと画像インポートの処理

スタイルシートと画像はテストでは使用されませんが、インポートするとエラーが発生する可能性があるため、モックする必要があります。

上記の設定で参照されているモックファイル - fileMock.jsとstyleMock.js - を__mocks__ディレクトリ内に作成します：

__mocks__/fileMock.js

module.exports = 'test-file-stub'

__mocks__/styleMock.js

module.exports = {}

静的アセットの処理に関する詳細は、Jestドキュメントを参照してください。

フォントの処理

フォントを処理するには、__mocks__ディレクトリ内にnextFontMock.jsファイルを作成し、以下の設定を追加します：

__mocks__/nextFontMock.js

module.exports = new Proxy(
  {},
  {
    get: function getter() {
      return () => ({
        className: 'className',
        variable: 'variable',
        style: { fontFamily: 'fontFamily' },
      })
    },
  }
)

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

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

tsconfig.json または jsconfig.json

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

jest.config.js

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ファイルに追加します：

package.json

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

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

最初のテストを作成

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

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

export default function Home() {
  return <h1>Home</h1>
}

__tests__/index.test.js

import '@testing-library/jest-dom'
import { render, screen } from '@testing-library/react'
import Home from '../pages/index'

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

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

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

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

__tests__/snapshot.js

import { render } from '@testing-library/react'
import Home from '../pages/index'

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

知っておくと良いこと: テストファイルはPages Router内に含めるべきではありません。Pages Router内のファイルはすべてルートとして扱われるためです。

テストの実行

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

ターミナル

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

追加リソース

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

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

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

On this page