[Vite -> React -> Typescript + SWC] Empty (no, 0, files found) code coverage report

[sebaguozden]

Describe the bug

Everything runs smoothly with pnpm test-storybook. On the other hand, pnpm test-storybook --coverage returns an empty coverage report.

Steps to reproduce the behavior

1. Run pnpm storybook
2. Run pnpm test-storybook --coverage
3. Console Coverage Summary will be empty (no files found)
4. coverage/storybook/coverage-storybook.json only contains {}

Expected behavior

Show **/*.tsx files on the report.

Screenshots and/or logs

.storybook/main.ts

package.json

EMPTY Coverage (Console) Report

EMPTY Coverage (File) Report

Environment

• OS: Ubuntu 22.04.2 (WSL)
• Node.js version: v20.9.0
• PNPM version: 8.10.2 -> Also happens with NPM version: 10.1.0
• Browser (if applicable): chrome
• Browser version (if applicable): Not Sure (installed through playwright pnpm exec playwright install + pnpm exec playwright install-deps)
• Device (if applicable): Not Applicable

[sebaguozden]

It is related to #17. Addon is not compatible with @vitejs/plugin-react-swc. Any idea how to fix it?

[DawidWraga]

I have the exact same issue but I am not using @vitejs/plugin-react-swc, I have @vitejs/plugin-react in my package.json

[zeroliu]

Checking the coverage-storybook.json output, I find that the missing components are in my output json file but the file path is wrong. Instead of /path/to/my/Component.tsx, they are /path/to/my/Component. I guess that's why the nyc report cannot find them in my cases

[Ravina1604]

I have the exact issue. I am using addon-coverage with @storybook/addon-webpack5-compiler-swc.
My project doesn't work with babel-loader so i removed it from webpack config and custom configured to use swc-loader instead.
and it returns 0 coverage on files

[lcrespom]

I think you are missing a --, try this: pnpm test-storybook -- --coverage.

[bartstcv]

Any update on this one? I also have Vite, React, TS, SWC stack and still suffer from that issue. As Test Addon for Storybook is still in experimental mode, using this coverage-addon is the right way to go. I am even considering switching back from @vitejs/plugin-react-swc to @vitejs/plugin-react, but I woudl rather really avoid that.

[lcrespom]

@bartstcv If you share your scripts from your package.json file, and how you call the code coverage task, I can check if you have the same issue that I had.

[bartstcv]

@bartstcv If you share your scripts from your package.json file, and how you call the code coverage task, I can check if you have the same issue that I had.

That's the script from package.json file:

{
  "scripts": {
    "test-storybook-coverage": "test-storybook -- --coverage --excludeTags=\"!test\""
  }
}

And I just do pnpm test-storybook-coverage. I checked with @vitejs/plugin-react (without SWC) and got the same result so it might not be a problem with SWC at all. I followed the docs but might miss smth.

[lcrespom]

Try without the --:

{
  "scripts": {
    "test-storybook-coverage": "test-storybook --coverage --excludeTags=\"!test\""
  }
}

The -- part is required only if you call the test-storybook script from the command line, to indicate that the parameters after -- are intended for test-storybook and not for npm run ..., e.g. npm run test-storybook -- --coverage.

[bartstcv]

Oh, that was clumsy of mine as at first I tested it directly in the command line. Without -- the script is run correctly it seems, but then I get this error:

[Test runner] An error occurred when evaluating code coverage:
      The code in this story is not instrumented, which means the coverage setup is likely not correct.

It acts like the config of coverage addon in .storybook/main.ts is ignored. That might be a problem with Storybook v8 as this issue is left unanswered storybookjs/storybook#26877.

And here are few more issues corelated with the problem:

• [Bug]: The code in this story is not instrumented on excluded stories #23
• [Bug] Doesn't work when Storybook is built with the new --test flag #31
• Code is not instrumented with @storybook/nextjs and @nx/storybook #47
• [Bug] Examples gives: The code in this story is not instrumented #15

[bartstcv]

All right, it turned out it had nothing to do with @vitejs/plugin-react-swc nor Storybook v8. To solve that error:

[Test runner] An error occurred when evaluating code coverage:
      The code in this story is not instrumented, which means the coverage setup is likely not correct.

I had to add this to my Storybook config file main.ts:

import * as tsconfigPaths from 'vite-tsconfig-paths';

const config: StorybookConfig = {
  // ...existing configuration...
  async viteFinal(config) {
    return {
      ...config,
      plugins: [...(config.plugins ?? []), tsconfigPaths.default()]
    };
  },
  // ...existing configuration...
};

export default config;

I ensured that the vite-tsconfig-paths plugin was included in the Storybook config as well. This plugin is necessary for resolving TypeScript path mappings, which allows the coverage addon to instrument the code correctly (it seems). Anyway, thanks @lcrespom for your time :).