如何合并Vitest与Playwright覆盖率报告并保留Vitest界面？

核心逻辑 #

Vitest 和 Playwright 均基于 V8 引擎收集覆盖率数据，只需将两者的覆盖率文件合并，即可让 Vitest UI 展示整合后的结果，无需单独维护两份报告。

具体步骤 #

1. 配置Playwright生成兼容格式的覆盖率 #

修改你的 playwright.config.ts，确保覆盖率输出为 V8 兼容的 JSON 格式，且输出目录与你原命令一致：

import { defineConfig, devices } from '@playwright/test';

export default defineConfig({
  testDir: './tests/e2e', // 按需调整你的E2E测试目录
  use: {
    collectCoverage: true,
    coverageOptions: {
      reporter: ['json'],
      outputDir: '.nyc_output',
      include: ['src/**/*.{ts,tsx,js,jsx}'], // 与Vitest的覆盖率范围对齐
      exclude: ['node_modules/**', 'tests/**'],
    },
  },
});

2. 编写覆盖率合并脚本 #

创建 merge-coverage.js 脚本，负责合并 Vitest 和 Playwright 的覆盖率数据：

const { createCoverageMap } = require('@vitest/coverage-v8/lib/sourcemap');
const fs = require('fs');
const path = require('path');

// 读取Vitest生成的覆盖率文件
const vitestCoveragePath = path.join(__dirname, 'coverage', 'v8', 'coverage-final.json');
const vitestCoverage = JSON.parse(fs.readFileSync(vitestCoveragePath, 'utf-8'));

// 读取Playwright生成的所有覆盖率文件
const playwrightCoverageDir = path.join(__dirname, '.nyc_output');
const playwrightCoverage = fs.readdirSync(playwrightCoverageDir)
  .map(file => JSON.parse(fs.readFileSync(path.join(playwrightCoverageDir, file), 'utf-8')))
  .flat();

// 合并覆盖率数据并覆盖原Vitest覆盖率文件
const coverageMap = createCoverageMap(vitestCoverage);
coverageMap.merge(playwrightCoverage);
fs.writeFileSync(vitestCoveragePath, JSON.stringify(coverageMap.toJSON(), null, 2));

3. 执行完整流程 #

按以下顺序执行命令：

• 先运行Vitest单元测试生成初始覆盖率：

VITE_COVERAGE=true vitest run --coverage.enabled=true

• 再运行Playwright E2E测试生成覆盖率：

VITE_COVERAGE=true npx playwright test

• 执行合并脚本：

node merge-coverage.js

• 最后启动Vitest UI查看整合后的结果：

vitest --ui

4. （可选）一键执行优化 #

将上述命令整合到 package.json 的 scripts 中，方便一键触发：

{
  "scripts": {
    "test:unit:coverage": "VITE_COVERAGE=true vitest run --coverage.enabled=true",
    "test:e2e:coverage": "VITE_COVERAGE=true npx playwright test",
    "coverage:merge": "node merge-coverage.js",
    "coverage:ui": "npm run test:unit:coverage && npm run test:e2e:coverage && npm run coverage:merge && vitest --ui"
  }
}

之后只需运行 npm run coverage:ui，即可自动完成所有步骤并打开整合了双数据源的 Vitest UI。

注意事项 #

• 确保 Vitest 和 Playwright 的 include/exclude 配置完全一致，避免合并后数据范围不一致
• 如果你的 Vitest 覆盖率配置修改了输出路径，需同步调整脚本中的 vitestCoveragePath
• 无需再执行原有的 nyc report 命令，合并后的数据会直接在 Vitest UI 中展示

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