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

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

**ご存知でしたか:** async Server ComponentsはReactエコシステムにとって新しいものであるため、Jestは現在それらをサポートしていません。同期Serverおよび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
# or
yarn add -D jest jest-environment-jsdom @testing-library/react @testing-library/dom @testing-library/jest-dom ts-node
# or
pnpm install -D jest jest-environment-jsdom @testing-library/react @testing-library/dom @testing-library/jest-dom ts-node

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

ターミナル

npm init jest@latest
# or
yarn create jest@latest
# or
pnpm create jest@latest

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

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

jest.config.ts

import type { Config } from 'jest'
import nextJest from 'next/jest.js'
 
const createJestConfig = nextJest({
  // Provide the path to your Next.js app to load next.config.js and .env files in your test environment
  dir: './',
})
 
// Add any custom config to be passed to Jest
const config: Config = {
  coverageProvider: 'v8',
  testEnvironment: 'jsdom',
  // Add more setup options before each test is run
  // setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
}
 
// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
export default createJestConfig(config)

内部的には、next/jestは以下のものを含め、Jestを自動的に設定しています。

Next.jsコンパイラを使用した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がインポートを解決するように設定する必要があります。例:

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設定ファイルに以下のオプションを追加することで、すべてのテストでカスタムマッチャーをインポートできます。

jest.config.ts

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

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

jest.setup.ts

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__というフォルダを作成します。

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

app/page.js

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

__tests__/page.test.jsx

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()
  })
})

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

__tests__/snapshot.js

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
# or
yarn test
# or
pnpm test

追加リソース

さらに詳しく知るには、以下のリソースが役立つかもしれません

Jestを使用したNext.jsの例
Jestドキュメント
React Testing Libraryドキュメント
Testing Playground - 要素を照合するための良いテストプラクティスを使用します。