Babelを使ってJestでESMを読み込めるようにする

はじめに

Jestでテスト実行時にESMを読み込めるようにBabelの設定を行いました。

Babel設定

Babelをインストール

npm install --save-dev @babel/preset-env babel-jest

babel.config.jsを作成

js

module.exports = {
  presets: [
    ["next/babel"],  // Next.jsのコードを変換
    [
      "@babel/preset-env",
      {
        targets: {
          node: "current",
        },
      },
    ],
    "@babel/preset-typescript",  // TypeScriptのコードを変換
  ],
};

jest.config.tsに設定を追加

ts

import type { Config } from "jest";
import nextJest from "next/jest.js";

const createJestConfig = nextJest({
  dir: "./",
});

const config: Config = {
  preset: "ts-jest/presets/default-esm",  // TypeScriptとESMを使う設定
  globals: {
    "ts-jest": {
      tsconfig: "tsconfig.json",
      useESM: true,
    },
  },
  coverageProvider: "v8",
  testEnvironment: "jsdom",
  transform: {
    "^.+\\.(ts|tsx|js|jsx)$": "babel-jest",  // Babelでコードを変換
  },
};

export default createJestConfig(config);

参考