使用Jest+Vue.js+Vuetify时遇Unexpected identifier错误求助

嘿，我看了你遇到的问题——Jest跑测试时碰到了Vuetify的Unexpected identifier语法错误，而且只有用到Leaflet和vue2-leaflet的组件出问题，这确实挺头疼的。我帮你分析下问题根源，再给你一步步的解决方案：

首先，定位核心问题 #

从终端报错来看，Jest在处理vuetify/lib/index.js时，没法识别ES6的import语法。这是因为你Jest配置里的transformIgnorePatterns把所有node_modules都排除在了Babel转译之外，但Vuetify的ES模块代码需要被转译才能在Node环境（Jest跑在Node里）正常运行。另外你的.babelrc配置也有一些版本冲突的问题，混合了Babel 6和Babel 7的语法，这也会导致转译失效。

解决方案步骤 #

1. 调整Jest的转译忽略规则 #

修改package.json里的Jest配置，让Jest不要忽略Vuetify、vue2-leaflet和Leaflet这些需要转译的依赖：

"jest": {
  "transformIgnorePatterns": [ "<rootDir>/node_modules/(?!vuetify|vue2-leaflet|leaflet)" ],
  // 其他原有配置保持不变
}

这里的(?!xxx)是正则的负向预查，意思是"除了这些包之外，其他node_modules里的内容都忽略转译"。

2. 修复Babel配置的版本冲突 #

你的.babelrc里同时用了Babel 7的@babel/preset-env和Babel 6的旧env preset，还有插件配置错误，重新整理成纯Babel 7的配置：

{
  "sourceMaps": true,
  "presets": [
    [ "@babel/preset-env", {
      "modules": false, // 开发环境保留ES模块，方便tree-shaking
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }]
  ],
  "env": {
    "test": {
      "presets": [
        [ "@babel/preset-env", { "targets": { "node": "current" } } ]
      ],
      "plugins": ["@babel/plugin-transform-modules-commonjs"] // 测试环境转成CommonJS给Jest用
    }
  },
  "plugins": [
    "@babel/plugin-proposal-object-rest-spread",
    "@babel/plugin-transform-runtime",
    ["transform-imports", {
      "vuetify": {
        "transform": "vuetify/es5/components/${member}",
        "preventFullImport": true
      }
    }]
  ]
}

这里做了这些调整：

• 移除了旧的Babel 6插件transform-es2015-modules-commonjs，改用Babel 7的对应插件，并且只在test环境启用
• 把之前错误嵌套在add-module-exports里的Vuetify配置，移到正确的transform-imports插件下（你已经安装了这个依赖）
• 统一使用@babel/preset-env，删除了旧的env preset，避免版本冲突

3. 确保依赖版本兼容 #

你已经安装了babel-core@7.0.0-bridge.0，这个包是用来让依赖Babel 6的工具（比如vue-jest）兼容Babel 7的，没问题。另外你的vue-jest和babel-jest版本匹配，不用调整。

4. Leaflet组件的测试优化 #

如果之后Leaflet相关组件还有测试问题，可以考虑在测试文件里Mock Leaflet的API，避免加载真实的DOM相关代码：

// 在你的测试文件顶部添加
jest.mock('leaflet', () => ({
  map: jest.fn(),
  tileLayer: jest.fn(() => ({ addTo: jest.fn() })),
  marker: jest.fn(() => ({ addTo: jest.fn() })),
  // 按需添加你用到的其他Leaflet方法
}));

这样测试时就不会真的初始化地图，减少环境依赖。

最后验证 #

做完这些调整后，重新跑npm run test:unit，应该就能解决那个语法错误了。如果还有问题，可以检查下有没有其他需要转译的依赖，或者看看Babel缓存有没有清理（你已经加了BABEL_DISABLE_CACHE=1，这点做得很好）。

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