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

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

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

npm init jest@latest
# または
yarn create jest@latest
# または
pnpm create jest@latest

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)

module.exports = {
  collectCoverage: true,
  // node 14.x上ではカバレッジプロバイダーv8が良好な速度とほぼ良好なレポートを提供します
  coverageProvider: 'v8',
  collectCoverageFrom: [
    '**/*.{js,jsx,ts,tsx}',
    '!**/*.d.ts',
    '!**/node_modules/**',
    '!<rootDir>/out/**',
    '!<rootDir>/.next/**',
    '!<rootDir>/*.config.js',
    '!<rootDir>/coverage/**',
  ],
  moduleNameMapper: {
    // CSSインポートの処理（CSSモジュール付き）
    // https://jestjs.io/docs/webpack#mocking-css-modules
    '^.+\\.module\\.(css|sass|scss)$': 'identity-obj-proxy',
 
    // CSSインポートの処理（CSSモジュールなし）
    '^.+\\.(css|sass|scss)$': '<rootDir>/__mocks__/styleMock.js',
 
    // 画像インポートの処理
    // https://jestjs.io/docs/webpack#handling-static-assets
    '^.+\\.(png|jpg|jpeg|gif|webp|avif|ico|bmp|svg)$': `<rootDir>/__mocks__/fileMock.js`,
 
    // モジュールエイリアスの処理
    '^@/components/(.*)$': '<rootDir>/components/$1',
 
    // @next/fontの処理
    '@next/font/(.*)': `<rootDir>/__mocks__/nextFontMock.js`,
    // next/fontの処理
    'next/font/(.*)': `<rootDir>/__mocks__/nextFontMock.js`,
    // server-onlyを無効化
    'server-only': `<rootDir>/__mocks__/empty.js`,
  },
  // 各テスト実行前にさらにセットアップオプションを追加
  // setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
  testPathIgnorePatterns: ['<rootDir>/node_modules/', '<rootDir>/.next/'],
  testEnvironment: 'jsdom',
  transform: {
    // babel-jestを使用してnext/babelプリセットでテストをトランスパイルする
    // https://jestjs.io/docs/configuration#transform-objectstring-pathtotransformer--pathtotransformer-object
    '^.+\\.(js|jsx|ts|tsx)$': ['babel-jest', { presets: ['next/babel'] }],
  },
  transformIgnorePatterns: [
    '/node_modules/',
    '^.+\\.module\\.(css|sass|scss)$',
  ],
}

module.exports = 'test-file-stub'

module.exports = {}

module.exports = new Proxy(
  {},
  {
    get: function getter() {
      return () => ({
        className: 'className',
        variable: 'variable',
        style: { fontFamily: 'fontFamily' },
      })
    },
  }
)

{
  "compilerOptions": {
    "module": "esnext",
    "moduleResolution": "bundler",
    "baseUrl": "./",
    "paths": {
      "@/components/*": ["components/*"]
    }
  }
}

moduleNameMapper: {
  // ...
  '^@/components/(.*)$': '<rootDir>/components/$1',
}

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

import '@testing-library/jest-dom'

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

export default function Home() {
  return <h1>Home</h1>
}

import '@testing-library/jest-dom'
import { render, screen } from '@testing-library/react'
import Home from '../pages/index'
 
describe('Home', () => {
  it('renders a heading', () => {
    render(<Home />)
 
    const heading = screen.getByRole('heading', { level: 1 })
 
    expect(heading).toBeInTheDocument()
  })
})

import { render } from '@testing-library/react'
import Home from '../pages/index'
 
it('renders homepage unchanged', () => {
  const { container } = render(<Home />)
  expect(container).toMatchSnapshot()
})

npm run test
# または
yarn test
# または
pnpm test