Jest
Jest と React Testing Library は、ユニットテストやスナップショットテストによく使われます。このガイドでは、Next.js で Jest をセットアップし、最初のテストを書く方法を紹介します。
Good to know:
Async
Server Components は React エコシステムにとって新しいものなので、Jest は現在サポートしていません。同期 Server Components と Client Components のユニットテストを実行することはできますが、Async
Components の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
と以下のパッケージを dev dependencies としてインストールしてください:
npm install -D jest jest-environment-jsdom @testing-library/react @testing-library/jest-dom
# or
yarn add -D jest jest-environment-jsdom @testing-library/react @testing-library/jest-dom
# or
pnpm install -D jest jest-environment-jsdom @testing-library/react @testing-library/jest-dom
以下のコマンドを実行して、基本的な 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 で動作するために必要な設定オプションがすべて含まれています:
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 variants)、画像インポート、next/font
の自動モック化 .env
(およびすべての variants)のprocess.env
へのロード- テストの解決と変換から
node_modules
を無視する。 - テスト解決から
.next
を無視する - SWC トランスフォームを有効にするフラグの
next.config.js
の読み込み
Good to know: 環境変数を直接テストするには、別のセットアップスクリプトまたは
jest.config.ts
ファイルに手動でロードします。詳細については、環境変数のテストを参照してください。