使用Babel配合Jest测试时出现SyntaxError: import语句模块外使用报错

错误原因 #

• 当前配置中Jest的转译规则正则为^.+\.js?$，仅匹配.js后缀文件，后缀为.mjs的两个业务模块完全没有被babel-jest处理，保留了原始的ES模块import语法
• Jest默认以CommonJS规范执行代码，未转译的import语法在CommonJS环境下无法被识别，直接抛出语法错误
• 项目依赖中存在废弃的babel@6.x版本包，和当前使用的Babel 7生态存在版本冲突，会干扰正常转译逻辑

修复步骤 #

• 第一步：调整Jest转译匹配范围
  修改package.json中的jest配置段，让转译规则同时覆盖.js和.mjs后缀文件：

  "jest": {
    "transform": {
      "^.+\\.(js|mjs)$": "babel-jest"
    }
  }
  

• 第二步：选择模块处理方案（二选一即可，优先选方案A，稳定性更高）

  • 方案A（推荐）：统一文件后缀为.js
    把moduleOne.mjs、moduleTwo.mjs重命名为.js后缀，同步修改测试文件、代码内的引用路径，执行npm uninstall babel删除冲突的旧版本babel依赖，重新执行npm install完成依赖整理。
  • 方案B：保留.mjs后缀使用原生ES模块
    在package.json顶层添加配置"type": "module"声明项目使用ES模块规范，修改test脚本添加Node ES模块实验参数：

    "scripts": {
      "test": "NODE_OPTIONS=--experimental-vm-modules jest --coverage"
    }
    

    该方案要求Node版本≥14.16.0，Jest 28对原生ES模块的支持仍为实验特性，可能存在其他兼容问题

• 第三步：执行测试验证
  运行npm run test，即可正常执行用例，不会再出现import相关语法错误。

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