Jest提示Cannot use import statement outside a module错误如何解决

现有配置遗漏项如下 #

• 1. package.json顶层缺失ES模块声明 #

  Node默认将.js后缀文件识别为CommonJS模块，你启用了实验性VM模块运行Jest，需要在package.json最外层添加"type": "module"配置，示例：

  {
    "name": "prj",
    "version": "1.0.0",
    "type": "module", // 新增该行
    "scripts": {
      // 保持原有脚本配置不变
    },
    // 其余原有配置不变
  }
  

• 2. Jest配置缺失非JS后缀的ESM识别规则 #

  你的项目需要引入.vue后缀的ES模块，需要在jest配置块中新增extensionsToTreatAsEsm字段，显式告知Jest将.vue文件按ES模块处理，修改后的jest配置如下：

  "jest": {
    "moduleFileExtensions": ["js", "json", "vue"],
    "extensionsToTreatAsEsm": [".vue"], // 新增该行
    "transform": {
      "^.+\\.js$": "babel-jest",
      "^.+\\.vue$": "vue-jest"
    }
  }
  

• 3. 可选：Babel转换规则适配 #

  若你本地存在Babel配置文件，需要确认没有配置modules: "commonjs"强制转CommonJS格式，也可以直接在transform规则中给babel-jest传入适配参数：

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

补充说明 #

运行时出现的ExperimentalWarning: VM Modules is an experimental feature属于Node官方提示，该特性不影响测试正常运行，无需特殊处理。

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