运行yarn test时jest收集vue文件覆盖率失败报错如何解决

问题根因 #

报错Unexpected token ] in JSON at position 6179是覆盖率收集工具解析中间产出的JSON格式文件时触发的语法错误，触发原因共有3点：

1. jest.config.js中.vue文件的转换规则正则表达式转义错误，.*\.(vue)$缺少二次转义的反斜杠，实际运行时匹配规则失效，.vue文件没有被vue-jest正确转译，导致后续覆盖率收集工具拿到未解析的原始内容，生成了非法格式的中间JSON
2. 所用的vue-jest、jest、ts-jest三者版本不兼容，解析Vue单文件组件后输出给覆盖率工具的中间数据格式错误
3. 仅配置了clover格式的覆盖率报告，缺少基础JSON格式报告的依赖解析逻辑，触发格式解析异常

解决方案 #

按以下步骤依次操作即可解决：

• 第一步：修正transform中vue文件的转换规则，补全正则转义符，同时指定ts配置文件路径避免ts语法解析冲突：

// 修改前：
// '.*\.(vue)$': 'vue-jest',
// 修改后：
'.*\\.(vue)$': ['vue-jest', {
  tsConfig: 'tsconfig.json'
}],

• 第二步：调整版本匹配规则，根据你所用的Vue版本安装对应匹配的依赖组合：
  • Vue2 环境：安装 vue-jest@3.x + jest@26.x + ts-jest@26.x
  • Vue3 环境：安装 vue-jest@5.x + jest@29.x + ts-jest@29.x
    版本调整完成后删除node_modules文件夹和yarn.lock文件，重新执行yarn install安装依赖
• 第三步：补充覆盖率报告配置，新增基础格式的报告输出，避免解析异常：

coverageReporters: ['clover', 'json', 'lcov', 'text-summary'],

• 第四步：执行yarn test --no-cache命令验证问题是否修复

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