Vitest UI提示‘Coverage enabled but missing html reporter’问题求助

问题描述 #

我在项目中使用Vitest，尝试通过Vitest UI获取覆盖率报告，已按官方文档配置相关参数，但悬停覆盖率图标时出现Coverage enabled but missing html reporter错误。我的Vitest配置文件如下：

import { defineConfig } from 'vitest/config'

export default defineConfig({
  test: {
    coverage: {
      provider: 'v8',
      reporter: ['text', 'json', 'html'],
      enabled: true,
    },
  },
})

解决步骤 #

• 先执行覆盖率生成命令：Vitest UI不会自动触发覆盖率收集，必须先运行vitest run --coverage生成html报告文件，或者在Vitest UI的内置控制台中执行该命令。
• 检查报告输出路径：默认html报告生成在./coverage目录，确认该目录下存在index.html文件。如果自定义了报告路径，需确保配置中reportsDirectory指向的路径正确，Vitest UI需要找到该文件才能展示。
• 重启Vitest UI服务：修改配置后需重启服务才能生效，关闭当前Vitest UI进程，重新运行vitest --ui再尝试查看。
• 升级Vitest版本：部分旧版本存在UI与覆盖率配置的兼容性问题，执行npm update vitest或yarn upgrade vitest升级到最新稳定版。
• 确认依赖安装完整：使用v8作为覆盖率提供者时，需确保@vitest/coverage-v8已安装，未安装则执行npm install @vitest/coverage-v8 --save-dev。

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