使用Mocha+Chai测试Vue模板时，Babel无法解析...mapGetters()求助

这个错误是因为Babel没有转译代码里的对象扩展运算符（...），或者测试环境的Babel配置不完整导致的，以下是几种可行的解决方式：

• 安装并配置Babel对象扩展插件
  首先安装依赖：

  npm install --save-dev @babel/plugin-proposal-object-rest-spread
  

  然后在你的Babel配置文件（.babelrc或babel.config.js）中添加这个插件：

  {
    "plugins": ["@babel/plugin-proposal-object-rest-spread"]
  }
  

• 用@babel/preset-env适配测试环境
  如果已经用了@babel/preset-env，确保配置里指定了测试环境的Node版本，让Babel自动转译所需语法：

  {
    "presets": [
      ["@babel/preset-env", {
        "targets": {
          "node": "current"
        }
      }]
    ]
  }
  

• 检查测试环境的Webpack配置（如果用到Webpack）
  确保babel-loader能处理.vue文件中的script部分，示例配置：

  module.exports = {
    module: {
      rules: [
        {
          test: /\.vue$/,
          loader: 'vue-loader',
          options: {
            compilerOptions: {
              preserveWhitespace: false
            }
          }
        },
        {
          test: /\.js$/,
          loader: 'babel-loader',
          // 若Vuex相关代码需要转译，可去掉exclude或调整为特定路径
          exclude: /node_modules(?!\/vuex)/
        }
      ]
    }
  }
  

• 确保测试命令正确加载Babel配置
  如果直接用Mocha运行测试，需要在命令中引入@babel/register来转译代码：

  mocha --require @babel/register tests/**/*.spec.js
  

修改完成后，重新运行测试即可解决该构建错误。

内容的提问来源于stack exchange，提问作者赵小龙