● 新しいやり方

（色々質問されますか 全て エンターを押してデフォルト値を設定します）

npm init jest@latest

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

npm i -D ts-node

jest.config.ts

import type { Config } from 'jest'
import nextJest from 'next/jest.js'
 
const createJestConfig = nextJest({
  dir: './src/',
})
 
// custom config
const config: Config = {
  coverageProvider: 'v8',
  testEnvironment: 'jsdom',
}
 
export default createJestConfig(config)

ts-nodeを 入れたくない場合は、設定ファイルを .js にします。

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',
}

module.exports = createJestConfig(config)

● Next.js の createJestConfig結果を調べる

async function logJestConfig() {
  const jestConfig = await createJestConfig(config)();
  console.log('● createJestConfig結果');
  console.log(JSON.stringify(jestConfig, null, 2));
}
logJestConfig().catch(console.error);

・createJestConfig() 関数を実行して生成される設定はこのようになります。

{
  moduleNameMapper: {
    '^.+\\.module\\.(css|sass|scss)$': '<YOUR-PROJECT-PATH>/node_modules/next/dist/build/jest/object-proxy.js',
    '^.+\\.(css|sass|scss)$': '<YOUR-PROJECT-PATH>/node_modules/next/dist/build/jest/__mocks__/styleMock.js',
    '^.+\\.(png|jpg|jpeg|gif|webp|avif|ico|bmp)$': '<YOUR-PROJECT-PATH>/node_modules/next/dist/build/jest/__mocks__/fileMock.js',
    '^.+\\.(svg)$': '<YOUR-PROJECT-PATH>/node_modules/next/dist/build/jest/__mocks__/fileMock.js',
    '@next/font/(.*)': '<YOUR-PROJECT-PATH>/node_modules/next/dist/build/jest/__mocks__/nextFontMock.js',
    'next/font/(.*)': '<YOUR-PROJECT-PATH>/node_modules/next/dist/build/jest/__mocks__/nextFontMock.js',
    'server-only': '<YOUR-PROJECT-PATH>/node_modules/next/dist/build/jest/__mocks__/empty.js'
  },
  testPathIgnorePatterns: [ '/node_modules/', '/.next/' ],
  transform: {
    '^.+\\.(js|jsx|ts|tsx|mjs)$': [
      '<YOUR-PROJECT-PATH>/node_modules/next/dist/build/swc/jest-transformer.js',
      [Object]
    ]
  },
  transformIgnorePatterns: [ '/node_modules/', '^.+\\.module\\.(css|sass|scss)$' ],
  watchPathIgnorePatterns: [ '/.next/' ]
}

● Next.js の jest でカスタムトランスフォーマーを使用する

カスタムトランスフォーマー custom-transformer.js を使用してみます。

transform: { } のようにオブジェクトを渡す設定の場合は ...baseConfig.transform, を渡す必要があります。

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: "./",
})

/**
 * jest設定
 */
async function generateJestConfig() {
  const baseConfig = await createJestConfig({})();
  const customConfig = {
    ...baseConfig,
    coverageProvider: "v8",
    testEnvironment: "jsdom",
    transform: {
      "^.+\\.(ts|js)$": "<rootDir>/custom-transformer.js",
      ...baseConfig.transform,
    },
  };
  return customConfig;
}


/**
 * デバッグ表示
 */
async function showJestConfig() {
  const config = await generateJestConfig()
  console.log( "● jest settings" );
  console.log(JSON.stringify(config, null, 2));
}
showJestConfig()

module.exports = generateJestConfig;

● 古いやり方

● jestのインストール

npm install -D jest @types/jest ts-jest 

● jestの設定

jest.config.js

module.exports = {
  preset: "ts-jest",
  testEnvironment: "node",
  setupFilesAfterEnv: ["<rootDir>/jest.setup.js"],
}

● jest 実行時に .env.development ファイルを読み込ませる

jest.setup.js

require("dotenv").config({ path: ".env.development" })

● ちなみに、ts-jest はもう遅くないみたいです。↓

sizuhiko - Technote - ts-jest が esbuild/swc をトランスフォーマーに使って高速化していた