ESModuleでJestを使用する

はじめに

Nodeで単体テストを実施する場合に選択としてJestが候補に上がることが多いかと思います
ただ、JestはESModuleを完全対応しているわけではないので、こちらで設定してあげる必要があります
今回はESModuleでJestを使用するための設定方法をまとめたいと思います
※なぜ、この設定が必要なのかは分かっていないので、試行錯誤の結果を記載することになります。なぜ必要かご存知の方はコメントいただければ幸いです。

ESModuleとcommonJSがある理由

ざっくりとまとめると以下のような感じかと思います

1. commonJSはサーバサイド用といて生まれた
2. ES6というJavascriptの標準仕様が確定して、サーバサイド、クライアントサイド関係なくES6に対応する中でES6 Modulesも導入することになった
3. npmに準拠したパッケージが多くあるためcommonJSを切り捨てるという選択が難しい

※参考サイト

前提

• ESModuleを使用している
• Jestをinstallしていてpathが通っている

設定内容

以下、3つのファイルが必要になります
また、これらのファイルは全て同階層で必要です

• package.json
• jest.config.mjs
• babel.config.cjs

package.json

scriptsに以下の記載が必要です(--collect-coverageは必要ないです)
またbabelやjedomなども必要です

    "scripts": {
    "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js --collect-coverage"
  },
    "dependencies": {
    "@babel/core": "^7.26.0",
    "@babel/preset-env": "^7.26.0",
    "babel-jest": "^29.7.0",
    "jsdom": "^25.0.1",
    "jsdom-global": "^3.0.2"   
    },

jest.config.mjs

export default {
    testMatch: [
        "**/__test__/**/*.?(m)[jt]s?(x)",
        "**/?(*.)+(spec|test).?(m)[tj]s?(x)",
    ],
    testPathIgnorePatterns: ["<rootDir>/__test__/test-data"],
    transform: {
        "^.+\\.(ts|tsx|js|jsx|mjs)$": "babel-jest",
    },
}

babel.config.cjs

module.exports = {
    presets: [['@babel/preset-env', {targets: {node: 'current'}}]],
};