Vue文件未纳入Jest覆盖率报告问题求助

Jest 的覆盖率统计仅针对测试运行过程中实际加载的文件。那些未被任何测试文件、或其他被引用文件导入的孤立 Vue 组件，不会被 Jest 的运行环境加载，自然不会出现在覆盖率报告中。

方法1：配置 forceCoverageMatch 强制统计 #

在 jest.config.js 中添加 forceCoverageMatch 选项，强制 Jest 将指定路径的 Vue 文件纳入覆盖率统计，无论是否被引用：

module.exports = {
  // 保留原有配置
  clearMocks: true,
  collectCoverage: true,
  collectCoverageFrom: ['src/**/*.{js,vue}', '!**/node_modules/**'],
  // ... 其他原有配置
  
  // 添加以下配置
  forceCoverageMatch: ['src/**/*.vue'],
}

方法2：批量导入所有组件 #

通过脚本自动导入所有 Vue 组件，确保 Jest 加载它们：

1. 在 src 目录下创建 coverage-boot.js：

// src/coverage-boot.js
// 自动遍历并导入src下所有.vue文件
const vueComponentContext = require.context('./', true, /\.vue$/)
vueComponentContext.keys().forEach(filePath => vueComponentContext(filePath))

2. 在 jest.config.js 中配置启动脚本：

module.exports = {
  // ... 原有配置
  setupFilesAfterEnv: ['<rootDir>/src/coverage-boot.js'],
}

方法3：手动导入孤立组件 #

如果只有少量孤立组件，可直接在测试文件中导入（无需编写测试用例）：

// tests/coverage-supplement.spec.js
import '@/Sidebar/index.vue'

内容的提问来源于stack exchange，提问作者Farmer