为什么我的 Jest 代码覆盖率报告无效？

Question

当我为 Vue 2.7.X 应用程序生成 Jest 代码覆盖率报告时，报告中显示为已覆盖/未覆盖的行没有任何意义：

此报告中的红色部分应指示测试套件未覆盖（执行）的代码，但显然，将注释（第 290、291 行）显示为未覆盖，或将第 298 行（部分）显示为未覆盖是没有意义的。之前和之后的行都被覆盖。

我猜发生的情况是 Jest 检测到未覆盖的行没有正确映射回源代码，因此 Babel 转译可能存在问题。

我生成代码覆盖率报告，并且yarn jest --coverage应用程序源代码是用 JavaScript（而不是 TypeScript）编写的。

package.json下面显示了可能与问题相关的一些依赖项：

  "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"
  }

最小可重复示例

我创建了一个最小的Git 存储库来演示该问题。

1. 克隆存储库
2. 运行yarn install && yarn test:unit:coverage以生成覆盖率报告（或使用 npm 代替）
3. 打开文件coverage/lcov-report/index.html查看报告

如果你打开 的页面components/toaster-message.vue，它会显示 1/2 个分支和 2/3 个函数被覆盖，但没有任何行被标记为红色（hideAppMessage应该是红色，因为它没有经过测试）。

如果您打开页面，views/login.vue发现标记为红色（未覆盖）的行没有任何意义。没有针对此组件的测试。

Answer 1

对我有用的是添加coverageProvider: 'v8'到jest.config.js. 我不完全确定为什么更改有效，但由于 babel 依赖项更改，coverageProvider似乎在正确收集覆盖范围方面vue-jest存在一般问题。

尝试将其添加到您的 Jest 配置中：

coverageProvider: 'v8'

然后npm run test:unit:coverage。

这适用于 Node v16.16.0 和 v18.12.1。