Vue-cli 3 中使用 Jest 显示 Vue 文件测试覆盖率的完整指南

Vue-cli 3 中使用 Jest 显示 Vue 文件测试覆盖率指南

问题

在 Vue-cli 3 中使用 Jest 来显示测试覆盖率是一个常见的挑战。本文将分步指导你完成设置，解决配置问题并展示测试覆盖率。

解决方案

1. 检查文件匹配器

确保 jest.config.js 文件的 testMatch 选项正确配置为匹配你的 Vue 文件。它应该类似于：

testMatch: [
  '**/__tests__/*.(js|jsx|ts|tsx)',
  '**/*.spec.(js|jsx|ts|tsx)',
  '**/*.test.(js|jsx|ts|tsx)',
]

2. 检查 nyc 设置

在你的 package.json 文件中，验证 nyc 设置是否正确。确保你的 include 和 extension 选项包含你的 Vue 文件：

"nyc": {
  ...
  "include": [
    "src/**/*.{js,vue}"
  ],
  ...
  "extension": [
    ".js",  
    ".vue"
  ],
  ...
}

3. 安装 nyc-sourceMap-istanbul-loader

如果你使用的是 Vue CLI 3，还需要安装 nyc-sourceMap-istanbul-loader 来正确映射代码覆盖率：

npm install --save-dev nyc-sourceMap-istanbul-loader

4. 配置 webpack

在你的 vue.config.js 文件中，将 nyc-sourceMap-istanbul-loader 添加到你的 webpack 配置中：

module.exports = {
  chainWebpack: config => {
    if (process.env.NODE_ENV === 'test') {
      config.module
        .rule('js')
        .use('istanbul')
        .loader('nyc-sourceMap-istanbul-loader')
        .end()
    }
  },
  ...
}

5. 运行测试

使用以下命令运行测试，包括 nyc 覆盖率：

npm run test:unit -- --coverage

6. 查看覆盖率

测试完成后，你会在 coverage 目录中看到一个覆盖率报告。该报告将显示每个文件的覆盖率统计信息。

其他提示

• 确保你的代码实际被测试覆盖。添加测试用例来涵盖你的 Vue 组件和方法。
• 如果你仍然遇到问题，请查看 Jest 和 nyc 的文档以获取更多故障排除提示。

结论

遵循这些步骤，你应该能够在 Vue CLI 3 中使用 Jest 成功显示测试覆盖率。

常见问题解答

1. 为什么我没有看到任何覆盖率报告？
   • 确保你的文件匹配器、nyc 设置和 webpack 配置都已正确配置。
2. 我看到一些文件没有被覆盖。
   • 添加测试用例来涵盖这些文件。
3. 我的覆盖率报告显示一些未覆盖的代码。
   • 考虑重构你的代码以提高覆盖率。
4. 我正在使用不同的测试框架。是否可以应用这些步骤？
   • 这些步骤是针对 Jest 和 Vue CLI 3 定制的。对于其他框架或工具，可能需要不同的配置。
5. 在哪里可以获得更多帮助？
   • 查看 Jest、nyc 和 Vue CLI 3 的文档，或在相关社区论坛上寻求支持。