関連パッケージのインストール
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が正しく行われるようにしている。