Next.jsでJest+React Testing Library を使用するための設定

関連パッケージのインストール

npm install -D jest jest-dom @types/jest ts-jest @testing-library/dom @testing-library/jest-dom @testing-library/react

設定ファイルの用意

// .babelrc
{
  "presets": ["next/babel"]
}

// setupTests.ts
import "@testing-library/jest-dom";

// tsconfig.test.json
{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "jsx": "react"
  }
}

// jest.config.js
module.exports = {
  roots: ["<rootDir>"],
  preset: "ts-jest",
  moduleFileExtensions: ["ts", "tsx", "js", "json", "jsx"],
  testPathIgnorePatterns: ["<rootDir>/.next/", "<rootDir>/node_modules/"],
  setupFilesAfterEnv: ["<rootDir>/setupTests.ts"],
  transform: {
    "^.+\\.(ts|tsx)$": "ts-jest",
  },
  moduleNameMapper: {
    "\\.(css|less|sass|scss)$": "identity-obj-proxy",
    "^@/(.*)$": "<rootDir>/src/$1",
  },
  moduleDirectories: ["node_modules", "src"],
  globals: {
    "ts-jest": {
      tsconfig: "<rootDir>/tsconfig.test.json",
    },
  },
};

moduleNameMapper の2つ目の定義は、tsconfig.json で

{
  "compilerOptions": {
    "paths": {
      "@/*": ["src/*"]
    }
  },
}

という設定（src/ のファイルを import Foo from "@/foo" のように絶対パスでインポートする）をしているので、テスト時にそのようなimportが正しく行われるようにしている。