[Bug]: @storybook/addon-coverage 与 CRA (Create React App) 设置不兼容

ma8fv8wu 于 4个月前发布在 React

关注(0)|答案(1)|浏览(57)

描述问题

在使用create-react-app设置时，Storybook在使用addon-coverage时不生成覆盖率报告。

----------|---------|----------|---------|---------|-------------------
File      | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
----------|---------|----------|---------|---------|-------------------
All files |       0 |        0 |       0 |       0 |                   
----------|---------|----------|---------|---------|-------------------

复现链接

由于在StackBlitz上Playwright失败，无法复现。

复现步骤

设置：在本地(sandbox/cra/default-ts/after-storybook)进行设置
安装“@storybook/test-runner”和“@storybook/addon-coverage”
在package.json的scripts部分中添加"test-storybook": "test-storybook -- --coverage"
在.storybook/main.ts的addons部分中添加“@storybook/addon-coverage”
为现有组件添加一个测试。
(重新)启动Storybook
运行npm run test-storybook

我希望能够得到一些覆盖率，但是一切都卡在0%上。

npm run test-storybook

> before-storybook@0.1.0 test-storybook
> test-storybook -- --coverage

 PASS   browser: chromium  src/stories/Header.stories.ts
 PASS   browser: chromium  src/stories/Page.stories.ts
 PASS   browser: chromium  src/stories/Button.stories.ts
----------|---------|----------|---------|---------|-------------------
File      | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
----------|---------|----------|---------|---------|-------------------
All files |       0 |        0 |       0 |       0 |                   
----------|---------|----------|---------|---------|-------------------

Test Suites: 3 passed, 3 total
Tests:       8 passed, 8 total
Snapshots:   0 total
Time:        1.814 s, estimated 2 s
Ran all test suites.

系统信息

Storybook Environment Info:

  System:
    OS: macOS 14.1.2
    CPU: (12) arm64 Apple M2 Pro
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.16.1 - ~/.nvm/versions/node/v18.16.1/bin/node
    Yarn: 1.22.22 - ~/.nvm/versions/node/v18.16.1/bin/yarn
    npm: 9.5.1 - ~/.nvm/versions/node/v18.16.1/bin/npm <----- active
  Browsers:
    Chrome: 126.0.6478.183
    Safari: 17.1.2
  npmPackages:
    @storybook/addon-coverage: ^1.0.4 => 1.0.4 
    @storybook/addon-essentials: ^8.3.0-alpha.1 => 8.3.0-alpha.1 
    @storybook/addon-interactions: ^8.3.0-alpha.1 => 8.3.0-alpha.1 
    @storybook/addon-links: ^8.3.0-alpha.1 => 8.3.0-alpha.1 
    @storybook/addon-onboarding: ^8.3.0-alpha.1 => 8.3.0-alpha.1 
    @storybook/blocks: ^8.3.0-alpha.1 => 8.3.0-alpha.1 
    @storybook/preset-create-react-app: ^8.3.0-alpha.1 => 8.3.0-alpha.1 
    @storybook/react: ^8.3.0-alpha.1 => 8.3.0-alpha.1 
    @storybook/react-webpack5: ^8.3.0-alpha.1 => 8.3.0-alpha.1 
    @storybook/test: ^8.3.0-alpha.1 => 8.3.0-alpha.1 
    @storybook/test-runner: ^0.19.1 => 0.19.1 
    storybook: ^8.3.0-alpha.1 => 8.3.0-alpha.1

其他上下文信息

无响应*

storybook

来源：https://github.com/storybookjs/storybook/issues/28652

1条答案

按热度按时间

xurqigkl1#

免责声明：由于信息是自动生成的，可能存在不准确的情况。
要解决@storybook/addon-coverage与CRA设置不兼容的问题，请按照以下步骤操作：

更新.storybook/main.ts:

import type { StorybookConfig } from '@storybook/react-webpack5';

const config: StorybookConfig = {
  stories: [],
  addons: [
    '@storybook/addon-coverage',
  ],
};

export default config;

使用覆盖率运行测试运行器:

npm run test-storybook -- --coverage

生成LCOV报告:

npx nyc report --reporter=lcov -t coverage/storybook --report-dir coverage/storybook

有关更多详细信息，请参考以下文档：

参考文献

/code/lib/cli/src/automigrate/fixes/cra5.ts
/docs/_snippets/test-runner-with-index-json.md
/docs/_snippets/storybook-coverage-report-lcov.md
/.github/comments/invalid-link.md
/docs/contribute/how-to-reproduce.mdx
/.github/DISCUSSION_TEMPLATE/help.yml
/docs/_snippets/test-runner-no-index-json.md
/docs/_snippets/test-runner-coverage.md
/code/lib/cli/src/automigrate/fixes/cra5.test.ts
/code/lib/cli/src/automigrate/index.test.ts
/docs/get-started/frameworks/react-webpack5.mdx
/docs/_snippets/storybook-telemetry-storybook-enable-crash-reports.md
/test-storybooks/portable-stories-kitchen-sink/react/playwright
/code/addons/measure/package.json
/docs/writing-tests/test-coverage.mdx
/docs/_snippets/storybook-coverage-addon-install.md
/.github/DISCUSSION_TEMPLATE/ideas.yml
/code/core/src/csf-tools/ConfigFile.test.ts
/docs/_snippets/storybook-preview-with-angular-polyfills.md
/code/core/src/telemetry/storybook-metadata.test.ts
/docs/_snippets/storybook-coverage-addon-registration.md
/docs/_snippets/storybook-telemetry-main-enable-crash-reports.md
/code/core/src/server-errors.ts
/docs/_snippets/custom-build-script-production.md
/code/lib/cli/src/automigrate/fixes/new-frameworks.ts

关于Greptile

此响应为您提供研究的起点，而非精确解决方案。
帮助我们改进！如果这有帮助，请留下一个👍，如果无关紧要，请留下一个👎。

赞(0）回复(0）举报 4个月前

我来回答