合并Vite前端Istanbul覆盖率报告出现数据异常问题

• 使用Vite和Istanbul为React应用生成单元测试与E2E测试的代码覆盖率，单独生成两类测试的HTML报告时结果正常，但合并两份报告后，语句数、行数等数据出现不合理情况（例如单元测试覆盖6行、E2E测试覆盖8行，合并后却显示32行）
• E2E测试通过先启动应用，再访问window.__coverage__获取覆盖率报告
• 合并操作步骤：将两份coverage.json文件放入.nyc_output文件夹后，执行yarn nyc report --reporter=html生成合并报告

相关配置 #

vite.config.ts #

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import istanbul from 'vite-plugin-istanbul'

export default defineConfig({
  plugins: [
    react(),
    istanbul({
      include: 'src/*',
      exclude: ['node_modules', 'tests/'],
      extension: ['.ts', '.tsx'],
      requireEnv: false,
    }),
  ],
  test: {
    globals: true,
    environment: 'jsdom',
    setupFiles: './src/setupTests.ts',
    coverage: {
      provider: 'istanbul',
      reporter: ['text', 'html', 'json'],
      include: 'src/*',
      reportsDirectory: 'coverage_unit',
    },
  },
});

package.json #

{
  "name": "coverage-merge",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc -b && vite build",
    "lint": "eslint .",
    "preview": "vite preview",
    "coverage": "vitest run --coverage"
  },
  "dependencies": {
    "react": "^18.3.1",
    "react-dom": "^18.3.1"
  },
  "devDependencies": {
    "@eslint/js": "^9.9.0",
    "@testing-library/dom": "^10.4.0",
    "@testing-library/jest-dom": "^6.5.0",
    "@testing-library/react": "^16.0.1",
    "@types/react": "^18.3.3",
    "@types/react-dom": "^18.3.0",
    "@vitejs/plugin-react": "^4.3.1",
    "@vitest/coverage-istanbul": "^2.1.1",
    "eslint": "^9.9.0",
    "eslint-plugin-react-hooks": "^5.1.0-rc.0",
    "eslint-plugin-react-refresh": "^0.4.9",
    "globals": "^15.9.0",
    "jsdom": "^25.0.1",
    "nyc": "^17.1.0",
    "typescript": "^5.5.3",
    "typescript-eslint": "^8.0.1",
    "vite": "^5.4.1",
    "vite-plugin-istanbul": "^6.0.2",
    "vitest": "^2.1.1"
  }
}

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