Tools to support code coverage in Storybook and the Storybook test runner. It supports Storybook projects that use Webpack5 or Vite.

Install this addon by adding the @storybook/addon-coverage dependency:

yarn add -D @storybook/addon-coverage

And by registering it in your .storybook/main.js:

export default {
  addons: ["@storybook/addon-coverage"],
};

This addon instruments your code by using a custom wrapper around istanbul-lib-instrument if your project uses Webpack5 or vite-plugin-istanbul if your project uses Vite. It provides some default configuration, but if you want to add yours, you can do so by setting the options in your .storybook/main.js:

export default {
  addons: [
    {
      name: "@storybook/addon-coverage",
      options: {
        istanbul: {
          include: ["**/stories/**"],
        },
      },
    },
  ],
};

The available options if your project uses Webpack5 are as follows:

Note: If you're using TypeScript, you can import the type for the options like so:

import type { AddonOptionsWebpack } from "@storybook/addon-coverage";

The available options if your project uses Vite are as follows:

Note: If you're using TypeScript, you can import the type for the options like so:

import type { AddonOptionsVite } from "@storybook/addon-coverage";

The --test flag is designed to be as fast as possible, removing addons known to slow down the build and are not needed for functional testing. One of these addons is @storybook/addon-coverage, which is used in conjunction with the Storybook Test runner to collect coverage information for your stories.

If you are using addon-coverage AND running the test runner against your built Storybook, the --test flag will strip out the coverage information. To configure the --test build to keep coverage information (at the expense of a slightly slower build), update your Storybook configuration file (i.e.,.storybook/main.js|ts) and include the disabledAddons option.

// main.js

export default {
  // Your Storybook configuration goes here
  build: {
    test: {
      disabledAddons: [
        '@storybook/addon-docs',
        '@storybook/addon-essentials/docs',
      ],
    },
  },
}

• yarn start runs babel in watch mode
• yarn build build and package your addon code

To run the examples, choose one of the projects in the examples directory then run:

• yarn to install dependencies and link the addon locally
• yarn storybook to run Storybook
• yarn test-storybook --coverage to test coverage report generation

MIT