[Bug]: @storybook/addon-coverage does not work with CRA (Create React App) setup

[svenvandescheur]

Describe the bug

Storybook generates no coverage when using addon-coverage with a create-react-app setup

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

Reproduction link

Not possible due to playwright failing on StackBlitz

Reproduction steps

• Set up: https://stackblitz.com/github/storybookjs/sandboxes/tree/next/cra/default-ts/after-storybook?file=README.md&preset=node locally (sandbox/cra/default-ts/after-storybook)
• Install “@storybook/test-runner” and “@storybook/addon-coverage”
• Add "test-storybook": "test-storybook -- --coverage" to the scripts section in package.json
• Add “@storybook/addon-coverage” to addons section in .storybook/main.ts
• Ad a play test to any of the existing components.
• (Re)start Storybook
• Run npm run test-storybook

I expect some kind of coverage, however. Everything is stuck at 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.

System

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

Additional context

No response

[greptile-apps]

** Disclaimer** This information might be inaccurate, due to it being generated automatically
To resolve the issue with @storybook/addon-coverage not working with CRA setup, follow these steps:

1. Update .storybook/main.ts:

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

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

export default config;

2. Run the test-runner with coverage:

npm run test-storybook -- --coverage

3. Generate LCOV report:

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

Refer to the following documentation for more details:

• Test Coverage
• Coverage Addon Configuration

References

/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

About Greptile

This response provides a starting point for your research, not a precise solution.

Help us improve! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

Ask Greptile · Edit Issue Bot Settings