Test coverage issue with Storybook 8.3.4

[tol-is]

Summary

I'm having an issue with the --coverage flag, which fails with:

[Test runner] An error occurred when evaluating code coverage:
storybook:test: [Test]       The code in this story is not instrumented, which means the coverage setup is likely not correct.
storybook:test: [Test]       More info: https://github.com/storybookjs/test-runner#setting-up-code-coverage

What's strange is that the issue happens, whether i'm running tests on a build (prod or test), and on dev mode. Without the --coverage flag the tests are running successfully. I looked into the docs several times, but haven't found any leads, and i'm completely out of ideas.

Any help would be appreciated!

Additional information

No response

Create a reproduction

1. https://github.com/tol-is/storybook-coverage-issue-repro

2. Also created a non-monorepo setup, and had the exactly same issue
   https://github.com/tol-is/storybook-coverage-solo-repro

3. And last, created a nextjs setup, and added testing as it was out-of-the-box, and still getting the same not instrumented error
   https://github.com/tol-is/storybook-next-coverage-repro

[valentinpalkovic]

cc @yannbf

[yannbf]

Hey @tol-is thanks for providing a reproduction, it makes it possible for us to assist you!
Your issue is related to the fact that you are setting up two different packages, one for Storybook and another for your components. The istanbul instrumentation (which happens as part of the coverage addon) is then looking for files but can't find them. Generally, we do not recommend to separate Storybook and your components. This can cause different issues and is less likely to happen if you just colocate your configuration (think of Storybook like jest/vitest).

In your repro, by just moving the button code into the Storybook directory, coverage works as expected. You could also take a look into configuring the coverage addon to tinker with the paths to include the sources. I'd encourage you to just colocate Storybook with your app or move it to the root of your repo though.

Here's a quick way to test if coverage is working:

1. Open your Storybook
2. Open developer tools
3. Select the storybook-preview-iframe as a target (really important step)
4. Type coverage and see if it evaluates to an object containing information about your components. If it does, then you're good to go!

[gavhuang]

@yannbf I can see the coverage object as shown above and my component shows up. However the coverage report still shows 0% for me. I am using the default config as described in the documentation.

Here is the structure of my files:

Any insight would be appreciated!

[gavhuang]

Update: NPM command in the documentation appears to be wrong. I opened PR #29561.