Next.jsでJestをセットアップする方法
JestとReact Testing Libraryはユニットテストとスナップショットテストのためによく一緒に使用されます。このガイドでは、Next.jsでJestをセットアップし、最初のテストを書く方法を紹介します。
補足:
async
サーバーコンポーネントはReactエコシステムにとって新しいものであるため、現在Jestはそれらをサポートしていません。同期的なサーバーコンポーネントとクライアントコンポーネントのユニットテストは実行できますが、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
を使用するように設定ファイルを更新します。このトランスフォーマーには、JestをNext.jsで動作させるために必要なすべての設定オプションが含まれています:
import type { Config } from 'jest'
import nextJest from 'next/jest.js'
const createJestConfig = nextJest({
// テスト環境でnext.config.jsと.envファイルを読み込むためにNext.jsアプリへのパスを提供します
dir: './',
})
// Jestに渡すカスタム設定を追加
const config: Config = {
coverageProvider: 'v8',
testEnvironment: 'jsdom',
// 各テスト実行前にさらにセットアップオプションを追加
// setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
}
// createJestConfigはこの方法でエクスポートされ、next/jestが非同期であるNext.js設定を読み込めるようにします
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を設定する必要があります。例:
{
"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
にテストスクリプトを追加する
最後に、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ドキュメントを参照してください。
最初のテストを作成する
これでプロジェクトでテストを実行する準備が整いました。プロジェクトのルートディレクトリに__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とJestの例
- Jestドキュメント
- React Testing Libraryドキュメント
- Testing Playground - 適切なテスト手法を使用して要素をマッチさせます。