Next.jsにJestを導入する

概要

Next.jsにjestを導入しようとしたところ、詰まったので投稿します。
Reactと導入の仕方が若干違うので手間取りました。
reactに導入したときの記録

開発環境

OS:windows10
IDE:VSCode

├── @babel/core@7.20.7
├── @storybook/addon-actions@6.5.15
├── @storybook/addon-essentials@6.5.15
├── @storybook/addon-interactions@6.5.15
├── @storybook/addon-links@6.5.15
├── @storybook/addon-postcss@2.0.0
├── @storybook/builder-webpack4@6.5.15
├── @storybook/manager-webpack4@6.5.15
├── @storybook/react@6.5.15
├── @storybook/testing-library@0.0.13
├── @styled-jsx/plugin-sass@3.0.0
├── @styled/storybook-addon-jsx@7.4.2
├── @types/node@18.11.15
├── @types/react-dom@18.0.9
├── @types/react@18.0.26
├── axios@1.2.1
├── babel-loader@8.3.0
├── babel-plugin-react-require@3.1.3
├── eslint-config-next@13.0.6
├── eslint-plugin-storybook@0.6.8
├── eslint@8.29.0
├── next-auth@4.18.7
├── next@13.0.1
├── react-bootstrap@2.7.0
├── react-dom@18.2.0
├── react@18.2.0
├── sass@1.57.1
├── styled-components@5.3.6
├── styled-jsx@5.1.1
└── typescript@4.9.4

実装

コマンドを実行

npm install --save-dev jest jest-environment-jsdom @testing-library/react @testing-library/jest-dom

公式の導入済みリポジトリと比較してファイルを追加する。

上のコマンドだけでは動きませんでした。
公式のgithubを参考にします。
追加もしくは編集するファイルは以下の様になっています。

next.jsの場合はconfigファイルがないと動きません。

jest.config.js

const nextJest = require('next/jest')

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
/** @type {import('jest').Config} */
const customJestConfig = {
  // Add more setup options before each test is run
  // setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
  // if using TypeScript with a baseUrl set to the root directory then you need the below for alias' to work
  moduleDirectories: ['node_modules', '<rootDir>/'],
  testEnvironment: 'jest-environment-jsdom',
}

// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
module.exports = createJestConfig(customJestConfig)

jest.setup.jsはなくても動作する模様。（用途はテスト用データベースの設定とかに使うとかか？）

jest.setup.js

// Optional: configure or set up a testing framework before each test.
// If you delete this file, remove `setupFilesAfterEnv` from `jest.config.js`

// Used for __tests__/testing-library.js
// Learn more: https://github.com/testing-library/jest-dom
import '@testing-library/jest-dom/extend-expect'

package.json

{
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
+    "test": "jest --watch",
+    "test:ci": "jest --ci"
  },
  "dependencies": {
    "next": "latest",
    "react": "^18.1.0",
+    "react-dom": "^18.1.0"
  },
  "devDependencies": {
+    "@testing-library/jest-dom": "5.16.4",
+    "@testing-library/react": "13.2.0",
+    "@testing-library/user-event": "14.2.0",
    "@types/react": "18.0.9",
+    "@types/testing-library__jest-dom": "5.14.5",
+    "jest": "28.1.0",
+    "jest-environment-jsdom": "28.1.0",
    "typescript": "4.6.4"
  }
}

テストコードを動かす

簡単なテストコードを作成します。
２つの値を足し算するコードですね。

__tests__/foo.ts

export const sum
  = (...a: number[]) =>
    a.reduce((acc, val) => acc + val, 0);

__tests__/foo.test.ts

import { sum } from '../___tests___/foo';

test('basic', () => {
  expect(sum(1,4)).toBe(5);
});

test('basic again', () => {
  expect(sum(1, 2)).toBe(3);
});

test('basic  Pattern', () => {
    expect(sum(100, 2)).toBe(102);
  }
);

npm run test を実行したテスト結果

参考

公式ドキュメント

公式github