Jest 和 Vue 的覆盖率报告不起作用答案

【问题标题】：Coverage Report with Jest and Vue not workingJest 和 Vue 的覆盖率报告不起作用
【发布时间】：2021-04-27 19:27:07
【问题描述】：

我正在使用 Jest 对我的 Vue 项目进行单元测试，我在控制台中获得了代码覆盖率，那里没有问题，但是 HTML 报告不起作用 -

package.json:

...
"unit": "jest --config test/unit/jest.conf.js --coverage",
...

jest.conf.js：

const path = require('path')

module.exports = {
  verbose: true,
  testURL: "http://localhost/",
  rootDir: path.resolve(__dirname, '../../'),
  moduleFileExtensions: [
    'js',
    'json',
    'vue'
  ],
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1'
  },
  transform: {
    '^.+\\.js$': '<rootDir>/node_modules/babel-jest',
    '.*\\.(vue)$': '<rootDir>/node_modules/vue-jest'
  },
  testPathIgnorePatterns: [
    '<rootDir>/test/e2e'
  ],
  snapshotSerializers: ['<rootDir>/node_modules/jest-serializer-vue'],
  setupFiles: ['<rootDir>/test/unit/setup'],
  mapCoverage: true,
  coverageDirectory: '<rootDir>/test/unit/coverage',
  collectCoverageFrom: [
    'src/**/*.{js,vue}',
    '!src/main.js',
    '!src/router/index.js',
    '!src/plugins/vuetify.js',
    '!**/node_modules/**'
  ]
}

这可能是什么原因？提前谢谢你。

【问题讨论】：

我认为您在开玩笑的配置中缺少 coverageReporters 属性。默认不包含 html 作为报告器。
@ShafiqJetha 谢谢，但我在我的 jest 配置中添加了 coverageReporters: ['json', 'lcov', 'text', 'clover', 'html'],，但它仍然无法正常工作。
如果你把它设置为 html 会发生什么？
所以它在显示未覆盖的行（我真正想要的）方面起作用，但概述仍然是空的。也许它是一个错误。不管怎样，现在对我来说很好。谢谢！
如果我将此作为答案，您会将其标记为已接受吗？

标签： vue.js jestjs

【解决方案1】：

您的覆盖率报告属性似乎需要调整。您应该尝试在您的coverageReporters 中包含html，如下所示：

module.exports = {
  ...
  coverageReporters: ['html']
  ...
}

【讨论】：