Vue 2.7.X项目Jest代码覆盖率报告异常求助

问题现象 #

使用yarn jest --coverage生成代码覆盖率报告时，出现多处不符合预期的映射问题：

• 未覆盖标记（红色）错误包含注释行（例如290、291行）
• 298行仅部分代码被标记为未覆盖，但前后行均显示已覆盖
• components/toaster-message.vue报告显示1/2分支、2/3函数已覆盖，但未编写测试的hideAppMessage函数未被标记为未覆盖
• views/login.vue没有对应的测试用例，却出现无意义的红色未覆盖标记

推测问题根源是Jest无法正确将转译后的未覆盖代码映射回原始源码，可能与Babel转译配置有关。

环境详情 #

• 项目源码：JavaScript（非TypeScript）
• 核心开发依赖：

"devDependencies": {
    "@babel/core": "^7.20.5",
    "@babel/preset-env": "^7.20.2",
    "@vue/test-utils": "1.3.3",
    "@vue/vue2-jest": "29.2.2",
    "@vitejs/plugin-vue2": "^2.2.0",
    "babel-jest": "^29.3.1",
    "http-proxy": "^1.18.1",
    "jest": "^29.3.1",
    "jest-environment-jsdom": "^29.3.1",
    "sass": "1.32.13",
    "sass-lint": "^1.13.1",
    "start-server-and-test": "^1.14.0",
    "unplugin-vue-components": "^0.22.12",
    "vite": "^4.0.1",
    "vite-plugin-rewrite-all": "^1.0.1",
    "vue-template-compiler": "^2.7.14"
  }

最小复现步骤 #

1. 克隆提供的复现仓库
2. 执行yarn install && yarn test:unit:coverage生成覆盖率报告（使用npm命令也可）
3. 打开coverage/lcov-report/index.html查看具体报告内容

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