Angular中基于@storybook/addon-coverage JSON生成HTML覆盖率报告遇阻

1. 修正@storybook/addon-coverage的范围配置 #

检查.storybook/main.ts中的插件配置，确保include规则明确覆盖你的组件文件，避免仅匹配.storybook目录：

addons: [
  {
    name: '@storybook/addon-coverage',
    options: {
      include: ['src/**/*.component.ts', 'src/**/*.ts'], // 明确指向组件及业务文件
      exclude: ['**/*.stories.ts', '.storybook/**/*', 'src/test.ts'], // 排除故事文件和配置文件
    },
  },
],

2. 修复nyc报告生成命令 #

原命令未指定源文件匹配规则，导致nyc无法关联JSON中的覆盖率数据到实际组件文件。修改命令如下：

npx nyc report --reporter=html --temp-dir=coverage --report-dir=coverage-html --include="src/**/*.ts"

• --include：指定要生成报告的源文件路径，和插件配置的include保持一致
• --report-dir：改用新目录避免覆盖原始JSON文件，方便后续排查

3. 验证覆盖率JSON的有效性 #

打开coverage目录下的JSON文件，确认files字段包含你的组件路径（如src/app/button/button.component.ts）。如果JSON已包含组件路径但nyc仍不识别，添加TypeScript支持参数：

npx nyc report --reporter=html --temp-dir=coverage --report-dir=coverage-html --include="src/**/*.ts" --require=ts-node/register

4. 确保测试命令正确触发覆盖率收集 #

执行Storybook测试时必须带上--coverage参数触发数据收集：

npm run test-storybook -- --coverage

或者在package.json中配置专用脚本：

"scripts": {
  "test-storybook:coverage": "test-storybook --coverage"
}

待测试完成、JSON文件生成后，再执行nyc报告生成命令。

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