React应用中Vitest单元测试覆盖率无数据问题求助

问题 #

我有一个React应用，使用Vitest搭配React Testing Library编写单元测试。项目依赖版本如下：

"react": "^17.0.0",
"react-dom": "^17.0.0",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^12.1.5",
"@vitejs/plugin-react": "^3.1.0",
"@vitest/coverage-c8": "^0.28.5",
"global-jsdom": "^8.7.0",
"jsdom": "^21.1.0",
"typescript": "^4.9.5",
"vite": "^4.1.0",
"vitest": "^0.28.5",
"vitest-canvas-mock": "^0.2.2"

package.json中的脚本配置：

"test": "vitest run",
"coverage": "vitest run --coverage",

vite.config.ts的测试部分中覆盖率配置：

coverage: {
  reporter: ['text', 'json', 'html', 'lcov'],
},

执行npm run coverage时，15个测试文件、55个测试用例全部通过，但c8生成的覆盖率报告显示所有指标均为0，无具体文件覆盖率数据。已有测试文件被执行，为何覆盖率报告为空？

排查思路 #

• 明确覆盖率统计的文件范围：默认配置下c8可能未正确匹配源码文件，在vite.config.ts的coverage配置中添加include和exclude字段，指定要统计的源码路径并排除测试文件、依赖等：

  coverage: {
    reporter: ['text', 'json', 'html', 'lcov'],
    include: ['src/**/*.{ts,tsx,js,jsx}'], // 根据项目实际结构调整
    exclude: ['node_modules/', 'src/**/*.test.{ts,tsx}', 'src/**/*.spec.{ts,tsx}']
  }
  

• 检查版本兼容性：当前@vitest/coverage-c8与vitest版本匹配，但Vite 4.x和该版本vitest可能存在兼容问题。尝试将vitest、@vitest/coverage-c8升级到兼容的较新版本（如0.30.x系列），同时确保Vite版本适配。
• 开启测试源码映射：如果未开启sourcemap，c8无法关联测试执行代码与源文件。在vite.config.ts的test配置中开启sourcemap：

  test: {
    sourcemap: true,
    // 其他测试配置项
  }
  

• 验证测试与源码的关联：在某个测试用例中故意修改被测试组件/函数的逻辑，看测试是否会失败，确认测试确实导入并执行了目标源码。
• 确认工作目录正确性：确保执行npm run coverage时处于项目根目录，否则c8可能无法定位源码。可在脚本中明确指定工作目录，比如：

  "coverage": "cd ./ && vitest run --coverage"
  

• 查看调试日志：执行vitest run --coverage --coverage.debug，通过输出的调试信息确认c8是否正确识别了需要统计的文件。
• 排查mock库干扰：暂时移除vitest-canvas-mock依赖，重新运行覆盖率命令，排查是否是该mock库影响了统计结果。

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