使用Jest/Mocha测试Vue时报Cannot use import statement outside a module如何解决

问题根因 #

该报错本质是测试环境默认仅支持CommonJS模块规范，你的ES6 import 语法未被正确转译，同时存在两个核心配置问题：

• Vue2配套的vue-jest@3仅兼容Jest 26、babel-jest@26，你安装的高版本Jest/Babel工具和现有Vue生态不匹配
• 同时存在.babelrc和babel.config.js两份Babel配置，导致转译规则冲突未生效

Jest 修复步骤 #

1. 先卸载不兼容的依赖，安装版本匹配的工具包：

npm uninstall jest babel-jest vue-jest
npm install --save-dev jest@26 babel-jest@26 vue-jest@3 @babel/plugin-transform-modules-commonjs

2. 修改jest.config.js配置，补全转译规则：

module.exports = {
    clearMocks: true,
    collectCoverage: true,
    coverageDirectory: "coverage",
    moduleFileExtensions: [
        "js",
        "json",
        "vue"
    ],
    transform: {
        "^.+\\.(vue)$": "vue-jest",
        "^.+\\.(js)$": "babel-jest"
    },
    // 仅转译node_modules中@vue开头的ESM包，其余跳过减少构建时间
    transformIgnorePatterns: ["node_modules/(?!(@vue)/)"]
};

3. 删除项目根目录的.babelrc文件，仅保留babel.config.js，修改配置如下：

module.exports = {
    presets: [
        '@vue/cli-plugin-babel/preset'
    ],
    env: {
        test: {
            plugins: ["@babel/plugin-transform-modules-commonjs"]
        }
    }
}

4. 清除Jest缓存后启动测试即可：

npx jest --clearCache
npm run test

Mocha 修复步骤 #

1. 安装必要依赖：

npm install --save-dev cross-env @babel/register @babel/plugin-transform-modules-commonjs

2. 修改package.json中的mocha启动命令，显式指定Babel环境并加载转译钩子：

"mocha": "cross-env BABEL_ENV=test mocha --require @babel/register 'tests/Frontend/**/*.test.js'"

3. 复用上面Jest修复步骤中提供的babel.config.js配置即可，无需额外调整。

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