[Bug]: Code coverage for components dropped after upgrading to storybook 8

vstanciu47 commented 1 month ago

Describe the bug

We updated our project to storybook 8 using the migration tool. Storybook 8 is fine, the tests are running perfectly as before, but the code coverage has dropped considerably. The issue is that our components files are not getting picked up by the coverage report, but strangely enough we get helper files like enums in our coverage report.

storybook main.cjs file: module.exports = { stories: [ '../stories/*.mdx', '../stories/update-guide/*.mdx', '../stories/theming.stories.ts', '../src/**/*.@(mdx|stories.ts)', ], addons: [ '@etchteam/storybook-addon-css-variables-theme', '@storybook/addon-a11y', '@storybook/addon-actions', { name: '@storybook/addon-coverage', options: { istanbul: { include: ['src/**/*.ts'], exclude: [ 'src/tree-view/events/**ts', 'src/tree-view/helpers/**.ts', 'src/common/mixins/**.ts', ], }, }, }, '@storybook/addon-essentials', '@storybook/addon-interactions', '@storybook/addon-links', 'storybook-addon-pseudo-states', '@storybook/addon-mdx-gfm', '@storybook/addon-webpack5-compiler-babel', ], staticDirs: ['../stories/assets', '../themes'], features: { interactionsDebugger: true, }, framework: { name: '@storybook/web-components-webpack5', options: {}, }, docs: {},

.nycrc.json file:

{ "include": [ "src/**/*.ts" ] }

To Reproduce

Use storybook web components 7 and set up interaction tests. Upgrade to storybook 8. The coverage report will not include the components file

System

Storybook Environment Info:
(node:20492) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
(Use `node --trace-deprecation ...` to show where the warning was created)

  System:
    OS: Windows 10 10.0.19045
    CPU: (12) x64 Intel(R) Xeon(R) E-2276M  CPU @ 2.80GHz
  Binaries:
    Node: 21.7.1 - C:\Program Files\nodejs\node.EXE
    npm: 10.5.0 - C:\Program Files\nodejs\npm.CMD <----- active
  Browsers:
    Edge: Chromium (123.0.2420.97)
  npmPackages:
    @storybook/addon-a11y: ^8.1.1 => 8.1.1
    @storybook/addon-actions: ^8.1.1 => 8.1.1
    @storybook/addon-coverage: ^1.0.3 => 1.0.3
    @storybook/addon-essentials: ^8.1.1 => 8.1.1
    @storybook/addon-interactions: ^8.1.1 => 8.1.1
    @storybook/addon-links: ^8.1.1 => 8.1.1
    @storybook/addon-mdx-gfm: ^8.1.1 => 8.1.1
    @storybook/addon-webpack5-compiler-babel: ^3.0.3 => 3.0.3
    @storybook/blocks: ^8.1.1 => 8.1.1
    @storybook/manager-api: ^8.1.1 => 8.1.1
    @storybook/test: ^8.1.1 => 8.1.1
    @storybook/test-runner: ^0.18.1 => 0.18.1
    @storybook/types: ^8.1.1 => 8.1.1
    @storybook/web-components: ^8.1.1 => 8.1.1
    @storybook/web-components-webpack5: ^8.1.1 => 8.1.1
    eslint-plugin-storybook: 0.8.0 => 0.8.0
    storybook: ^8.1.1 => 8.1.1
    storybook-addon-pseudo-states: ^3.1.1 => 3.1.1

Additional context

No response

valentinpalkovic commented 1 month ago

Hi @vstanciu47

Thank you for reporting the issue.

I have prepared a canary release for Storybook, which might fix the issue. Could you please try it out?

npx storybook@0.0.0-pr-27171-sha-f81ba26a upgrade

Also please install the following version for @storybook/addon-coverage: 1.0.4--canary.42.041aa23.0

vstanciu47 commented 1 month ago

npx storybook@0.0.0-pr-27171-sha-f81ba26a upgrade

Thanks for your reply. Unfortunately the fix is not working for me. What has change is that now story files are included in the coverage report, but I don't think that is necessary. Components files are still not included in the report. Card report before canary release Card report with canary release

I also tried a fresh install of storybook with a new repository and the components are still not included in the coverage report.

valentinpalkovic commented 1 month ago

Could you provide this sample repository?

vstanciu47 commented 1 month ago

I figured out what was wrong and fixed the issue on my side. It was because of .nycrc file. It basically told the tests to look for coverage in all the .ts files, but the problem was that my components library wasn't imported in storybook with the ts files, we actually build the library into a package and imported that in storybook. It was imported in preview.js as a js file. Removing .nycrc made all the components appear in the test coverage report

storybookjs / test-runner