在Vue中使用Jest时，解析.vue文件HTML注释出现报错

看起来这个报错虽然指向Vue文件里的HTML注释，但真正的问题根源并不是注释本身，而是Jest没有转译node_modules里@babel/runtime-corejs2包的ES模块代码，导致遇到import语法时抛出Unexpected identifier错误。

问题原因 #

你的jest.config.js里的transformIgnorePatterns设置把所有node_modules目录都排除在了转译范围之外：

transformIgnorePatterns: ['<rootDir>/node_modules/']

但@babel/runtime-corejs2内部使用了ES模块语法（比如import _Promise from "../../core-js/promise";），而Jest默认只能解析CommonJS模块，无法直接处理ES模块，所以触发了语法错误。报错位置指向注释只是巧合——转译流程在处理到注释附近的代码时，触发了对这个依赖的加载。

解决方案 #

修改jest.config.js中的transformIgnorePatterns，让Jest不要忽略@babel/runtime-corejs2的转译：

module.exports = {
  // ...其他配置项
  transformIgnorePatterns: ['<rootDir>/node_modules/(?!@babel/runtime-corejs2)']
};

这里的(?!@babel/runtime-corejs2)是正则的负向预查，意思是：除了@babel/runtime-corejs2之外，其他node_modules里的包都跳过转译。

额外排查步骤 #

1. 清理Jest缓存：运行以下命令清除可能存在的缓存问题

jest --clearCache

2. 检查版本兼容性：确保vue-jest、babel-jest的版本和你的Vue、Babel版本匹配：
   • Vue 2对应vue-jest@^3.x
   • Babel 7对应babel-jest@^26.x或更高（根据Jest版本调整）

修改配置并完成上述步骤后，重新运行测试，应该就能解决这个语法错误了。

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