Vue.js+Jest+Vuetify单元测试出现Import语法错误求助

你遇到的问题核心是：Jest默认会跳过转译node_modules目录下的文件，但你使用的Vuetify 0.17.4版本的ES5组件代码里仍然保留了import这类ES模块语法，Node环境无法直接解析，所以抛出了SyntaxError: Unexpected token import。

快速解决方案：让Babel转译Vuetify模块 #

我们需要调整Jest配置，把Vuetify从「忽略转译」的列表中排除，这样Babel就会处理Vuetify的文件，将ES语法转译为Node能识别的CommonJS。

1. 修改package.json中的Jest配置

找到你package.json里的jest配置块，更新transformIgnorePatterns字段：

"jest": {
  // 其他原有配置保持不变
  "transformIgnorePatterns": ["/node_modules/(?!vuetify)/"]
}

这里的(?!vuetify)是正则负向预查，意思是除了vuetify文件夹，忽略node_modules里的其他所有目录，这样Jest就会让Babel转译Vuetify的组件代码。

2. 确认Babel配置支持转译ES模块

检查你的项目根目录下的.babelrc文件（没有的话就新建一个），确保包含转译ES模块的配置。基于你已安装的依赖，推荐配置如下：

{
  "presets": [
    ["env", { "modules": "commonjs" }],
    "stage-2"
  ],
  "plugins": [
    "transform-es2015-modules-commonjs"
  ]
}

你的package.json里已经安装了对应的Babel插件和预设，这个配置可以直接生效。

3. 重新运行测试

执行你的测试命令：

npm run test

为什么ConfigRule.spec.js能正常通过？ #

因为这个测试对应的组件没有使用Vuetify的VDivider（或其他未转译的Vuetify组件），所以没有触发语法错误；而Account.vue引入了VDivider，Jest加载组件时就遇到了未转译的import语句，导致测试套件失败。

额外提示 #

如果之后遇到其他第三方库的类似语法错误，都可以用同样的逻辑，把对应的库添加到transformIgnorePatterns的排除列表里，比如：

"transformIgnorePatterns": ["/node_modules/(?!vuetify|vuex)/"]

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