Next.jsでJestを設定する
JestとReact Testing Libraryは、ユニットテストやスナップショットテストによく一緒に使われます。このガイドでは、Next.jsでJestを設定し、最初のテストを作成する方法を紹介します。
知っておくべきこと:
async
なServer ComponentsはReactエコシステムにおいて新しいものであるため、Jestは現在これをサポートしていません。同期的なServerとClient Componentsに対してはユニットテストを実行できますが、async
なコンポーネントにはE2Eテストの使用をお勧めします。
クイックスタート
create-next-app
とNext.jsのwith-jestの例を使って、すぐに始めることができます:
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を設定する一連のプロンプトが表示され、jest.config.ts|js
ファイルが自動的に作成されます。
設定ファイルを更新して、next/jest
を使用します。このトランスフォーマーには、Next.jsでJestが動作するために必要な設定オプションがすべて含まれています:
- TypeScript
- JavaScript
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'],
}
// createJestConfigは、非同期であるnext/jestがNext.jsの設定を読み込めるように、この方法でエクスポートされます
export default createJestConfig(config)
const nextJest = require('next/jest')
/** @type {import('jest').Config} */
const createJestConfig = nextJest({
// 次のパスをあなたのNext.jsアプリに指定して、テスト環境でnext.config.jsと.envファイルを読み込みます
dir: './',
})
// Jestに渡されるカスタム設定を追加します
const config = {
coverageProvider: 'v8',
testEnvironment: 'jsdom',
// 各テストが実行される前に、さらに設定オプションを追加します
// setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
}
// createJestConfigは、非同期であるnext/jestがNext.jsの設定を読み込めるように、この方法でエクスポートされます
module.exports = 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
ファイルで手動でロードしてください。詳細は環境変数のテストをご覧ください。
オプション: 絶対インポートとモジュールパスエイリアスの処理
プロジェクトがモジュールパスエイリアスを使用している場合、Jestを設定してインポートを解決する必要があります。これには、jsconfig.json
ファイルのパスオプションをjest.config.js
ファイルのmoduleNameMapper
オプションと一致させます。例えば:
{
"compilerOptions": {
"module": "esnext",
"moduleResolution": "bundler",
"baseUrl": "./",
"paths": {
"@/components/*": ["components/*"]
}
}
}
moduleNameMapper: {
// ...
'^@/components/(.*)$': '<rootDir>/components/$1',
}
オプション: カスタムマッチャーでJestを拡張する
@testing-library/jest-dom
には、.toBeInTheDocument()
のような便利なカスタムマッチャーのセットが含まれており、テストの記述を容易にします。Jestの設定ファイルに次のオプションを追加することで、すべてのテストにカスタムマッチャーをインポートできます:
- TypeScript
- JavaScript
setupFilesAfterEnv: ['<rootDir>/jest.setup.ts']
setupFilesAfterEnv: ['<rootDir>/jest.setup.js']
次に、jest.setup
内に次のインポートを追加します:
- TypeScript
- JavaScript
import '@testing-library/jest-dom'
import '@testing-library/jest-dom'
知っておくべきこと:
v6.0
でextend-expect
が削除されましたので、バージョン6以前に@testing-library/jest-dom
を使用している場合は、代わりに@testing-library/jest-dom/extend-expect
をインポートする必要があります。
各テストの前にさらにセットアップオプションを追加する必要がある場合は、上記のjest.setup
ファイルに追加できます。
package.json
にテストスクリプトを追加する
最後に、package.json
ファイルにJestのtest
スクリプトを追加します:
{
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"test": "jest",
"test:watch": "jest --watch"
}
}
jest --watch
は、ファイルが変更されたときにテストを再実行します。詳細なJest CLIオプションについては、Jest Docsを参照してください。
初めてのテストを作成する
プロジェクトはテストを実行する準備ができました。プロジェクトのルートディレクトリに__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
# または \{#or}
yarn test
# または \{#or}
pnpm test
追加リソース
さらに詳しく知りたい場合は、以下のリソースが役立ちます:
- Next.js with Jestの例
- Jestドキュメント
- React Testing Library ドキュメント
- Testing Playground - 良いテストの実践を用いて要素をマッチングしてください。