<h2 id="h87f03f8e18">関連パッケージのインストール</h2><p><code>npm install -D jest jest-dom @types/jest ts-jest @testing-library/dom @testing-library/jest-dom @testing-library/react </code> <br></p><h2 id="h5b90241a48">設定ファイルの用意</h2><pre><code>// .babelrc
{
  "presets": ["next/babel"]
}</code></pre><p><br></p><pre><code>// setupTests.ts
import "@testing-library/jest-dom";</code></pre><p><br></p><pre><code>// tsconfig.test.json
{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "jsx": "react"
  }
}</code></pre><p><br></p><pre><code>// jest.config.js
module.exports = {
  roots: ["&lt;rootDir&gt;"],
  preset: "ts-jest",
  moduleFileExtensions: ["ts", "tsx", "js", "json", "jsx"],
  testPathIgnorePatterns: ["&lt;rootDir&gt;/.next/", "&lt;rootDir&gt;/node_modules/"],
  setupFilesAfterEnv: ["&lt;rootDir&gt;/setupTests.ts"],
  transform: {
    "^.+\\.(ts|tsx)$": "ts-jest",
  },
  moduleNameMapper: {
    "\\.(css|less|sass|scss)$": "identity-obj-proxy",
    "^@/(.*)$": "&lt;rootDir&gt;/src/$1",
  },
  moduleDirectories: ["node_modules", "src"],
  globals: {
    "ts-jest": {
      tsconfig: "&lt;rootDir&gt;/tsconfig.test.json",
    },
  },
};

</code></pre><p><code>moduleNameMapper</code>  の2つ目の定義は、<code>tsconfig.json</code>  で</p><pre><code>{
  "compilerOptions": {
    "paths": {
      "@/*": ["src/*"]
    }
  },
}</code></pre><p><br>という設定（src/ のファイルを import Foo from "@/foo" のように絶対パスでインポートする）をしているので、テスト時にそのようなimportが正しく行われるようにしている。<br><br></p>

React の記事一覧

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