(色々質問されますか 全て エンターを押してデフォルト値を設定します)
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)
async function logJestConfig() {
const jestConfig = await createJestConfig(config)();
console.log('● createJestConfig結果');
console.log(JSON.stringify(jestConfig, null, 2));
}
logJestConfig().catch(console.error);
{
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/' ]
}
カスタムトランスフォーマー 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;
npm install -D jest @types/jest ts-jest
jest.config.js
module.exports = {
preset: "ts-jest",
testEnvironment: "node",
setupFilesAfterEnv: ["<rootDir>/jest.setup.js"],
}
jest.setup.js
require("dotenv").config({ path: ".env.development" })
sizuhiko - Technote - ts-jest が esbuild/swc をトランスフォーマーに使って高速化していた