Lang x Lang

︙

Setting up Jest with Next.js

Jest と React Testing Library は、頻繁にUnit TestingとSnapshot Testingのために一緒に使用されます。このガイドでは、Jest を Next.js と設定する方法と、最初のテストの書き方をご紹介します。

Good to know: async Server Components は React エコシステムにとって新しいため、現在 Jest ではサポートされていません。同期的な Server および Client Components に対するユニットテストは引き続き実行できますが、asyncコンポーネントに対してはE2E テストを使用することをお勧めします。

Quickstart

あなたは create-next-app を Next.js with-jest の例とともに利用して、迅速に開始することができます:

Terminal
npx create-next-app@latest --example with-jest with-jest-app

Manual setup

Next.js 12 のリリース以来、Next.js には Jest 用の組み込み設定が標準で付属しています。

Jest をセットアップするために、Jestと以下のパッケージをdev依存関係としてインストールします:

Terminal
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 設定ファイルを生成します：

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

これにより、プロジェクトのための Jest を設定するための一連のプロンプトを通過します。これには、自動的にjest.config.ts|jsファイルを作成することも含まれます。

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

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)
jest.config.js
const nextJest = require('next/jest')

/** @type {import('jest').Config} */
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 = {
  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
module.exports = createJestConfig(config)

ボンネットの下で、 next/jestは自動的に Jest をあなたのために設定しています。これには以下が含まれます：

  • transformの設定を行う、Next.js Compilerを用いて
  • 自動モックスタイルシート(.css、.module.css、およびそれらの scss バリアント)、image インポート、およびnext/font
  • Loading.env(およびすべてのバリアント)をprocess.envにロードする
  • node_modulesを無視し、test の解決と変換から除外します
  • .nextを無視し、test を解決
  • Loading というフラグを有効にするためのnext.config.jsを読み込み、SWC トランスフォームを可能にします

Good to know: Test Environment Variables を直接ロードするには、別のセットアップスクリプトや jest.config.ts ファイルで手動で読み込んでください。詳細については、test environment variablesを参照してください。

Optional: Handling Absolute Imports and Module Path Aliases

あなたのプロジェクトがModule Path Aliasesを使用している場合、jsconfig.jsonファイルの paths オプションと、jest.config.jsファイルのmoduleNameMapperオプションを一致させることで、Jest がインポートを解決できるように設定する必要があります。例えば：

tsconfig.json
{
  "compilerOptions": {
    "module": "esnext",
    "moduleResolution": "bundler",
    "baseUrl": "./",
    "paths": {
      "@/components/*": ["components/*"]
    }
  }
}
jest.config.js
moduleNameMapper: {
  // ...
  '^@/components/(.*)$': '<rootDir>/components/$1',
}

Optional: Extend Jest with custom matchers

@testing-library/jest-domは、.toBeInTheDocument()のような便利なカスタムマッチャー を含んでおり、テストの記述を容易にします。次のオプションを Jest の設定ファイルに追加することで、すべての test でカスタムマッチャーを import することができます。

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

その後、jest.setup.tsの中に次の import を追加します：

jest.setup.ts
import '@testing-library/jest-dom'
jest.setup.js
import '@testing-library/jest-dom'

Good to know:extend-expectは v6.0で削除されました 。したがって、 version 6 より前に @testing-library/jest-domを使用している場合、代わりに @testing-library/jest-dom/extend-expectを import する必要があります。

もし各 test の前に更に options を設定する必要がある場合は、それらを上記のjest.setup.jsファイルに追加することができます。

Add a test script to package.json

最後に、package.jsonファイルに Jest のtestスクリプトを追加してください：

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

jest --watchは、ファイルが変更されたときにテストを再実行します。より多くの Jest CLI options については、Jest Docs を参照してください。

あなたの最初の test を作成する

あなたのプロジェクトはテストを実行する準備ができている。プロジェクトの root ディレクトリに__tests__という名前のフォルダを作成してください。

例えば、<Page /> component が見出しを正常にレンダリングするかどうかをチェックするための test を追加することができます：

app/page.js
import Link from 'next/link'

export default function Home() {
  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()
  })
})

オプショナルで、あなたの component で予期しない変更を追跡するためのスナップショット test を追加してください:

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

Running your tests

そして、テストを実行するために、次のコマンドを実行してください:

Terminal
npm run test
# or
yarn test
# or
pnpm test

Additional Resources

さらなる読書のために、これらのリソースが役立つかもしれません：

当社サイトでは、Cookie を使用しています。各規約をご確認の上ご利用ください:
Cookie Policy, Privacy Policy および Terms of Use