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

Question

我在尝试使用 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'
  ],
  transform: {
    '^.+\\.vue$': 'vue-jest',
    '.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
    '^.+\\.jsx?$': 'babel-jest'
  },
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1'
  },
  snapshotSerializers: [
    'jest-serializer-vue'
  ],
  testMatch: [
    '**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)'
  ],
  transformIgnorePatterns: ['<rootDir>/node_modules/'],
  testURL: 'http://localhost/'
}

包.json：

....
"scripts": {
  "test:unit": "nyc vue-cli-service test:unit"
},
"nyc": {
  "check-coverage": true,
  "per-file": true,
  "lines": 90,
  "statements": 90,
  "functions": 90,
  "branches": 90,
  "include": [
    "src/**/*.{js,vue}"
  ],
  "exclude": [
    "src/*.js"
  ],
  "reporter": [
    "lcov",
    "text",
    "text-summary"
  ],
  "extension": [
    ".js",  
    ".vue"
  ],
  "verbose": true,
  "cache": true,
  "all": true
}

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

Answer 1

Jest 有自己的覆盖工具，因此请nyc从package.json 中删除：

"scripts": {
  // "test:unit": "nyc vue-cli-service test:unit" // DELETE
  "test:unit": "vue-cli-service test:unit"
},
// "nyc": {...} // DELETE

要启用 Jest 的覆盖范围，请在jest.config.jscollectCoverage中设置和（根据文档）：collectCoverageFromvue-test-utils

collectCoverage: true,
collectCoverageFrom: [
  'src/**/*.{js,vue}',
  '!src/main.js', // No need to cover bootstrap file
],

运行yarn test:unit应产生如下控制台输出：

GitHub 演示

另请注意，Jest 控制台输出仅列出包含可执行 JavaScript 的文件（methods对于 Vue SFC）。如果您正在使用默认的 Vue CLI 生成模板，则HelloWorld.vue包含 no methods，因此不会列出。在上面的屏幕截图中，我添加了一个未使用的方法HelloWorld.vue来演示 Jest 的未覆盖线报告。

Answer 2

虽然@tony19 的回答完全有效，但您不一定需要在自定义笑话配置中添加任何内容。对于使用 Vue CLI 服务构建的项目，只需在package.json工作正常的情况下添加以下脚本，即可显示 Vue 组件的覆盖范围：

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

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

 npx vue-cli-service test:unit help

而且，在这些选项中，您会发现collectCoverage哪些collectCoverageFrom可以帮助您将所有内容保留在脚本中，而不是使用自定义配置文件。

Answer 3

如果你不使用 Vue CLI 插件@vue/cli-plugin-unit-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']
}

然后，您只需运行即可生成覆盖率报告npx jest。

覆盖率报告如下所示：

(1) 终端

(2) HTML