Vue.js 如何使用jest使测试覆盖率显示vue cli 3中的所有vue文件

我在尝试使用Jest设置Vue CLI 3以显示测试覆盖率时遇到困难。我已经尽了一切可能让它发挥作用，但它仍然没有覆盖：

Ran all test suites.
----------|----------|----------|----------|----------|-------------------|
File      |  % Stmts | % Branch |  % Funcs |  % Lines | Uncovered Line #s |
----------|----------|----------|----------|----------|-------------------|
All files |        0 |        0 |        0 |        0 |                   |
----------|----------|----------|----------|----------|-------------------|

=============================== Coverage summary ===============================
Statements   : Unknown% ( 0/0 )
Branches     : Unknown% ( 0/0 )
Functions    : Unknown% ( 0/0 )
Lines        : Unknown% ( 0/0 )

以下是我的配置摘要：

jest.config.js：

module.exports={
moduleFileExtensions：[
"js",，
“jsx”，
“json”，
“vue”
],
转换：{
“^.+\\.vue$”：“vue jest”，
“.+\（css | styl | less | sass | scss | svg | png | jpg | ttf | woff | woff2）$”：“jest transform stub”，
“^.+\\.jsx？$”：“巴贝尔笑话”
},
模块映射：{
“^@/（.*）$”：“/src/$1”
},
快照序列化程序：[
“jest serializer vue”
],
测试匹配：[
“**/tests/unit/**.spec.（js | jsx | ts | tsx）|**/u测试/**.（js | jsx | ts | tsx）”
],
transformIgnorePatterns:['/node_modules/']，
testURL:'http://localhost/'
}

package.json：

---

如何正确配置Vue CLI 3和Jest以显示测试覆盖率？

Jest有自己的覆盖率功能，因此从package.json中删除

nyc

：

要启用Jest的覆盖范围，请在Jest.config.js中设置和（根据）：

运行

纱线测试：单元

应产生如下控制台输出：

---

还请注意，Jest控制台输出仅列出包含可执行JavaScript的文件（

方法

用于Vue SFC）。如果您使用的是默认的Vue CLI生成的模板，

HelloWorld.Vue

不包含

方法，因此不会列出它。在上面的屏幕截图中，我在HelloWorld.vue中添加了一个未使用的方法来演示Jest的uncovered lines报告。
虽然@tony19的答案非常有效，但您不必在自定义Jest配置中添加任何内容。对于使用Vue CLI服务构建的项目，只需在
包中添加以下脚本即可。json
工作正常，Vue组件的覆盖范围已显示出来：

"test:coverage": "vue-cli-service test:unit --coverage",

您还可以添加其他选项，例如更改报告器，以及仅为此脚本使用独特的Jest配置。要获取选项的完整列表，可以在终端中运行以下命令：

 npx vue-cli-service test:unit help

在这些选项中，您可以找到
collectCoverage
和
collectCoverage from
，它们可以帮助您保留脚本中的所有内容，而不是自定义配置文件。
如果您不使用Vue CLI插件
@Vue/CLI插件单元jest
，您仍然可以为Vue组件生成测试覆盖率报告。您可以通过类似以下方式配置Jest：

jest.config.js

module.exports = {
  moduleFileExtensions: ['js', 'json', 'vue'],
  transform: {
    '^.+\\.js$': 'babel-jest',
    '^.+\\.vue$': 'vue-jest'
  },
  collectCoverage: true,
  collectCoverageFrom: ['src/**/*.{js,vue}', '!src/main.js']
}

然后，只需运行
npxjest
即可生成覆盖率报告

覆盖率报告如下所示：

（1）终端

（2）HTML
是的，谢谢@tony19，但看起来好像坏了。该语句为零，不应为零。它应该显示测试的真实陈述，而不是零；相反，它正在按预期工作。该输出只是告诉您
example.spec.js
中的测试没有涵盖
App.vue
中的第9行。请参阅更新的屏幕截图（显示新添加的
App.spec.js
所涵盖的
App.vue
行）和。实际上，解决此问题的另一种方法是通过
test:unit
：）使用Jest CLI（如果使用vue CLI生成带有
@vue/unit Jest
）的项目，项目已经在
Jest.config.js
（如果
useConfigFiles
已启用）或
package.json
的
Jest
属性中包含Jest配置。我认为，将所有Jest配置保持在同一位置，而不是在
npm
脚本中分离其中的一个/一些，会更干净。
"test:coverage": "vue-cli-service test:unit --coverage",

 npx vue-cli-service test:unit help

module.exports = {
  moduleFileExtensions: ['js', 'json', 'vue'],
  transform: {
    '^.+\\.js$': 'babel-jest',
    '^.+\\.vue$': 'vue-jest'
  },
  collectCoverage: true,
  collectCoverageFrom: ['src/**/*.{js,vue}', '!src/main.js']
}