使用Vue Test Utils搭配Jest时遇扩展运算符Unexpected Token错误求助

你遇到的这个错误，本质是Jest依赖的Babel配置没有正确转译Vue组件里的ES扩展运算符（...），尤其是Vuex的mapGetters辅助函数使用的这种语法。下面分两种常见场景给你解决办法：

如果你是用Vue CLI 3+创建的项目 #

这种情况配置起来最简单，先确认你已经安装了官方的Jest插件：

npm install --save-dev @vue/cli-plugin-unit-jest

然后检查你的babel.config.js（项目根目录下），确保包含Vue官方的Babel预设，它会自动处理Vue组件里的各种语法转译：

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ]
}

最后别忘了清除Jest的缓存（有时候缓存会导致旧配置生效），再重新运行测试：

jest --clearCache
npm run test:unit

如果你是手动配置的Vue+Jest项目 #

这种情况需要手动补全Babel和Jest的配置：

1. 安装必要依赖 #

先装齐转译需要的包：

npm install --save-dev @babel/preset-env babel-plugin-transform-object-rest-spread vue-jest jest babel-jest

2. 配置Babel #

在项目根目录创建或修改babel.config.js，指定转译目标为Node环境（Jest在Node里运行），并添加扩展运算符的转译插件：

module.exports = {
  presets: [
    ['@babel/preset-env', {
      targets: {
        node: 'current'
      }
    }]
  ],
  plugins: [
    'transform-object-rest-spread'
  ]
}

3. 配置Jest #

创建jest.config.js，告诉Jest如何处理Vue单文件组件和JS文件：

module.exports = {
  moduleFileExtensions: ['js', 'vue'],
  transform: {
    '^.+\\.js$': 'babel-jest',
    '^.+\\.vue$': 'vue-jest'
  }
}

额外检查 #

确保你的组件里正确导入了Vuex的辅助函数，不要漏了这行：

import { mapGetters } from 'vuex'

做完这些后，同样先清除Jest缓存再运行测试，应该就能解决这个语法错误了。

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