原生ECMAScript模块配置文件导致Jest单元测试失败

场景与代码 #

测试代码（sum.test.js） #

import sum from '../sum.js'
import pkg from '@jest/globals';
const jest = pkg;

import {expect} from '@jest/globals'

test('adds 1 + 2 to equal 3', () => {
  expect(sum(1, 2)).toBe(3);
});

业务代码（sum.js） #

export default function sum(a, b) {
  return a + b;
}

报错信息 #

npm test

> test@0.1.0 test C:\Users\xxx\xx\xx\xx xx\xxx\0\test
> jest

 FAIL  unitTests/sum.test.js
  ● Test suite failed to run

    You appear to be using a native ECMAScript module configuration file, which is only supported when running Babel asynchronously.

当前配置文件 #

babel.config.js #

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

package.json #

{
  "name": "test",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "test": "jest"
  },
  "dependencies": {
    "@jest/globals": "^29.6.3",
    "core-js": "^3.8.3",
    "vue": "^3.2.13"
  },
  "devDependencies": {
    "@babel/core": "^7.22.10",
    "@babel/eslint-parser": "^7.12.16",
    "@babel/preset-env": "^7.22.10",
    "@types/jest": "^29.5.3",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "babel-jest": "^29.6.3",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3",
    "jest": "^29.6.3",
    "ts-jest": "^29.1.1"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true,
      "jest": true,
      "jest/globals": true
    },
    "extends": [
      "plugin:vue/vue3-essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "@babel/eslint-parser"
    },
    "rules": {}
  },
  "type": "module",
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead",
    "not ie 11"
  ]
}

解决方案 #

核心原因 #

package.json中设置了"type": "module"，使Node.js默认将所有.js文件视为ES模块，但你的babel.config.js使用了CommonJS的module.exports导出配置，导致Babel加载时出现模块格式冲突，触发异步加载报错。

具体修复步骤 #

1. 统一Babel配置文件格式
   两种方案二选一：

   • 方案1：将babel.config.js重命名为babel.config.cjs，内容保持不变；
   • 方案2：将babel.config.js改为ES模块格式：

     export default {
       presets: [
         [
           "@babel/preset-env",
           {
             "targets": {
               "node": "current"
             }
           }
         ],
         '@vue/cli-plugin-babel/preset'
       ]
     }
     

2. 添加Jest兼容配置（可选）
   在package.json中新增Jest配置，明确模块处理规则：

   "jest": {
     "transform": {
       "^.+\\.js$": "babel-jest"
     },
     "moduleFileExtensions": ["js", "vue"]
   }
   

3. 简化测试代码
   移除冗余的导入代码，直接导入所需方法：

   import sum from '../sum.js'
   import { test, expect } from '@jest/globals'
   
   test('adds 1 + 2 to equal 3', () => {
     expect(sum(1, 2)).toBe(3);
   });
   

4. 重新运行测试
   执行npm test即可验证修复效果。

内容的提问来源于stack exchange，提问作者Amrmsmb