[Bug] Empty code coverage report

[vijaypraju04]

trafficstars

Describe the bug

Hey guys, I'm attempting to setup code-coverage for storybook in my project, I'm able to get everything to run smoothy with yarn test-storybook but when I attempt to use yarn test-storybook --coverage I am getting an empty code coverage report.

I am running against a local storybook build on 6006 as well.

Test Suites: 90 passed, 90 total Tests: 114 passed, 114 total Snapshots: 0 total Time: 86.72 s, estimated 87 s Ran all test suites. Coverage file (2 bytes) written to .nyc_output/coverage.json ----------|---------|----------|---------|---------|-------------------

File	% Stmts	% Branch	% Funcs	% Lines	Uncovered Line #s
All files	0	0	0	0
----------	---------	----------	---------	---------	-------------------
✨ Done in 111.65s.

In addition to that I am seeing that the coverage/storybook/coverage-storybook file has no data, just an empty object.

I have also added the addon-coverage package and updated my .storybook/main.js with @storybook/addon-coverage

I'm wondering if this is a webpack config issue, but I'm not sure what might be the best way to start debugging this.

[vijaypraju04]

From what I can tell, there is no initial reporting in coverage/storybook/coverage-storybook.json

Any ideas where to start debugging to figure out why nothing is getting reported in this file?

[yannbf]

Hey @vijaypraju04 can you share a bit more information about your project? What framework are you using? Is your storybook part of a monorepo?

Depending on the framework, you might have to use something other than the addon coverage. You can see recipes here: https://github.com/yannbf/storybook-coverage-recipes

[vijaypraju04]

Hey @yannbf it's a react typescript app, not a monorepo.

Also using webpack4

[vijaypraju04]

When following the steps for react app, I am seeing no coverage in storybook

[vijaypraju04]

This is how my .storybook/main.js file looks

module.exports = {
  "stories": [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-coverage"
  ]
}

Current .storybook/webpack.config.js

module.exports = ({ config }) => {
  config.module.rules.push({
    test: /\.(ts|tsx)$/,
    use: [
      {
        loader: require.resolve('ts-loader'),
      },
      {
        loader: require.resolve('react-docgen-typescript-loader'),
      }
    ],
  })

  config.module.rules.push({
    test: /\.stories\.(ts|tsx)?$/,
    loaders: [require.resolve('@storybook/source-loader')],
    enforce: 'pre',
  })
  config.resolve.extensions.push('.ts', '.tsx')

  return {
    ...config,
    module: {
      ...config.module,
      rules: storybookConfig.module.rules
    }
  }
}

Storybook config rules

    rules: [
      {
        test: /\.tsx/,
        include: paths.srcDirectory,
        exclude: [],
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/react'],
            plugins: ['@babel/plugin-syntax-dynamic-import'],
          },
        },
      },
    ...
    ],

Current versions of storybook and add-ons that are installed, incase any of them are causing interference

    "@storybook/addon-actions": "^6.5.9",
    "@storybook/addon-coverage": "^0.0.2",
    "@storybook/addon-essentials": "^6.5.9",
    "@storybook/addon-info": "^5.3.21",
    "@storybook/addon-links": "^6.5.9",
    "@storybook/addon-storysource": "^6.5.9",
    "@storybook/addons": "^6.5.9",
    "@storybook/react": "^6.5.9",
    "@storybook/test-runner": "^0.5.0",

[yannbf]

Hey @vijaypraju04 unfortunately I didn't gave time to investigate this yet, but I suspect that your babel loader is overriding the Istanbul babel plugin that comes from the addon-coverage.

I'd recommend to:

• comment out your babel loader bit and load a minimal storybook enough to see whether _coverage_ exists
• remove addon-coverage and set up the Istanbul babel plugin yourself together with the other babel plugins you have as part of your babel loader. Use this as reference https://github.com/storybookjs/addon-coverage/blob/a31679f9a549767c0f10366ec589acee93b872d2/src/preset.ts#L10

Let me know how it goes!

[ahermant]

Hi @yannbf , thank you for your help! I have the same issue. I am also using Create React App and Typescript and I do not get anything in __coverage__ either. Regarding the solution you have suggested, I cannot access to the link, I get a 404. Maybe there is an issue with the access rights or add-on coverage is not available anymore because I cannot find add-on coverage in the repository at all.

[vijaypraju04]

• remove addon-coverage and set up the Istanbul babel plugin yourself together with the other babel plugins you have as part of your babel loader. Use this as reference https://github.com/storybookjs/addon-coverage/blob/a31679f9a549767c0f10366ec589acee93b872d2/src/preset.ts#L10

Hey @yannbf thanks for all the help. I noticed the link you put here is not accessible. Do you have another link?

[yannbf]

So sorry about that @ahermant @vijaypraju04, the repo was private (it's newly created) but I turned it into public, so link should be accessible now: https://github.com/storybookjs/addon-coverage/blob/a31679f9a549767c0f10366ec589acee93b872d2/src/preset.ts#L10

[vijay-raju-dd]

Hey @yannbf I tried your suggestion, I added the preset file and added it to storybook addons in main, but for some reason it still did not give me coverage in storybook. The only way I've gotten it to work so far was to manually add istanbul as a plugin to the babel-loader in webpack

  module: {
    rules: [
      {
        test: /\.tsx/,
        include: paths.srcDirectory,
        exclude: [],
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/react'],
            plugins: [
              ['@babel/plugin-syntax-dynamic-import'],
              [
                'istanbul',
                {
                  exclude: defaultExclude,
                  extension: defaultExtensions,
                },
              ],
            ],
          },
        },
      },

Should this work the same way as creating the custom add-on with the preset ?

[vijay-raju-dd]

Issue with current configuration is 100 storybook tests takes over 10 minutes. Any ideas on how to speed up ? Some tests take up to 60 seconds to run.

[angeloderivco]

I'm still getting this error and I don't even have babel-loader in my webpack config. If it helps, I'm using yarn as my package manager.

const path = require("path");
const mixin = require("mixin-deep");

module.exports = {
  features: {
    postcss: false,
  },
  framework: "@storybook/react",
  core: {
    builder: "@storybook/builder-webpack5",
  },
  stories: ["../src/**/*.stories.{tsx,mdx}"],
  addons: [
    "@storybook/addon-backgrounds",
    {
      name: "@storybook/addon-docs",
      options: {
        configureJSX: true,
        babelOptions: {},
        sourceLoaderOptions: null,
      },
    },
    "@storybook/addon-viewport",
    "@storybook/addon-controls",
    "@storybook/addon-toolbars/register",
  ],
  staticDirs: ["../public", "./public"],
  babel: (options) =>
    mixin(options, {
      presets: [
        [
          "@babel/preset-env",
          {
            loose: true,
          },
        ],
        "@babel/preset-typescript",
        "@babel/preset-react",
      ],
      plugins: [
        [
          "babel-plugin-styled-components",
          {
            ssr: false,
            pure: true,
            minify: true,
            displayName: false,
          },
        ],
        [
          "@babel/plugin-proposal-class-properties",
          {
            loose: true,
          },
        ],
        [
          "@babel/plugin-proposal-nullish-coalescing-operator",
          {
            loose: true,
          },
        ],
        [
          "@babel/plugin-proposal-optional-chaining",
          {
            loose: true,
          },
        ],
        [
          "@babel/plugin-proposal-private-methods",
          {
            loose: true,
          },
        ],
        [
          "babel-plugin-react-require",
          {
            loose: true,
          },
        ],
      ],
    }),
  webpackFinal: (config) =>
    mixin(config, {
      performance: false,
    }),
};

[yannbf]

Hey @angeloderivco it doesn't seem like you're using @storybook/addon-coverage. That's probably the reason it doesn't work for you.

[yannbf]

Hey @yannbf I tried your suggestion, I added the preset file and added it to storybook addons in main, but for some reason it still did not give me coverage in storybook. The only way I've gotten it to work so far was to manually add istanbul as a plugin to the babel-loader in webpack

  module: {
    rules: [
      {
        test: /\.tsx/,
        include: paths.srcDirectory,
        exclude: [],
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/react'],
            plugins: [
              ['@babel/plugin-syntax-dynamic-import'],
              [
                'istanbul',
                {
                  exclude: defaultExclude,
                  extension: defaultExtensions,
                },
              ],
            ],
          },
        },
      },

Should this work the same way as creating the custom add-on with the preset ?

The problem here is that you're overriding the babel-loader from Storybook, therefore losing whatever Storybook presets provide, such as the preset from @storybook/addon-coverage. It's fine as long as you set it up like you did, and you should have the same result indeed.

[yannbf]

Hey everyone, I'll be closing this issue as it's not really a bug.

Reason for this to happen:

1. You are not using @storybook/addon-coverage.
2. Your project does not use Babel or Vite. Angular, for example. There is a recipe here explaining how to make it work without the addon.
3. You are using @storybook/addon-coverage however also are manually replacing babel-loader from Storybook to do something custom for your project. This makes it so that the plugin from the addon do not get applied.

If that is not the case and you're experiencing this exact issue, feel free to reopen this!

[angeloderivco]

@yannbf I did have addon-coverage in there but I was playing with some other config and posted the one without it. Either way it still doesn't give me the coverage even if I add the @storybook/addon-coverage plugin.

I tried doing the suggestions in the recipe page (we have react so as per the page, I only needed to add the adon-coverage in there)

[angeloderivco]

So it looks like the problem was on the mixin method as it doesn't work on arrays.

Resolved that but now I get stuck when trying to start storybook without any message whatsoever. This is where it hangs up:

Would you have any idea how I can get more details? Happy to create a different issue if it doesn't involve this package.