[Bug] No coverage for file reported if JSX is used

[jMalojlo]

Describe the bug

Coverage is not reported for files where JSX is used.

I've set up a minimal repository that recreates the issue with the same config - https://github.com/jMalojlo/sb-repro. It's a basic button component with a story containing a play function to 'test' a click handler. The component itself contains some JSX and imports some jsx and non-jsx module. What we see in the coverage report is that only the files without JSX are properly counted. We're running an ejected CRA and I assume it's a Babel config issue, but can't figure this out myself.

Steps to reproduce the behavior

1. Clone https://github.com/jMalojlo/sb-repro
2. npm install && npx playwright install chrome
3. npm run storybook
4. npm run storybook-test runs tests with --coverage
5. npm run generate-storybook-coverage nyc report with lcov
6. open ./coverage/storybook/lcov-report/index.html to inspect the coverage HTML file
7. 

Environment

• Node.js version: 20.9.0
• NPM version: 10.1.0

[jMalojlo]

For anyone stumbling upon this: Pin @storybook/react-webpack5 to 7.5.3. Anything higher breaks the report for JSX. You can safely run all the other Storybook deps at latest (currently 7.6.4) though.

[thehig]

Same problem, istanbul/nyc/storybook was missing files in the coverage report. Pinning @storybook/react-webpack5 to 7.5.3 worked.

[zeroliu]

same issue for @storybook/react-vite 7.6.16

[kaidjohnson]

Looks like this change might be responsible.

From https://storybook.js.org/docs/api/main-config-babel#babelconfig

The options provided by Babel are only applicable if you've enabled the @storybook/addon-webpack5-compiler-babel addon.

We added @storybook/addon-webpack5-compiler-babel and coverage issues were fixed with 7.6.14

[supersonicclay]

Same issue with @storybook/react-vite: 8.1.10. I am not using @storybook/react-webpack5 at all.

If my component looks like this I get coverage:

export function Greeting({ name }: { name?: string }) {
  if (name) {
    return `Hello ${name}!`;
  }
  return 'Hello!';
}

But if my component looks like this I get no coverage:

export function DomactInfoCard({ name }: { name?: string }) {
  if (name) {
    return <div>Hello {name}!</div>;
  }
  return <div>Hello!</div>;
}

[richardansell]

Getting the same issue with 8.1.10. Will try downgrading Vite version to see if it has any effect.

Update: Managed to solve this issue using the @vitejs/plugin-react-swc as my project was previously configured using the non swc plugin following the default config setup. All coverage is now reporting as expected 👍

[supersonicclay]

I was actually able to fix it by upgrading everything in my project with npx sb@latest upgrade.

Relevant versions:

• storybook: 8.1.11
• @storybook/react-vite: 8.1.11
• @storybook/addon-coverage: 1.0.4
• @nx/storybook: 19.3.2
• @storybook/addon-coverage/node_modules/istanbul-lib-instrument: 6.0.2