Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@storybook/addon-coverage

Package Overview
Dependencies
Maintainers
26
Versions
34
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@storybook/addon-coverage

Tools to support code coverage in Storybook

  • 1.0.1
  • Source
  • npm
  • Socket score

Version published
Maintainers
26
Created
Source

Storybook Addon Coverage

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

Installation

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"],
};

Configuring the addon

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:

Option nameDescriptionTypeDefault
cwdSet the working directoryStringprocess.cwd()
nycrcPathPath to specific nyc config to use instead of automatically searching for a nycconfig.string-
includeGlob pattern to include files. It has precedence over the include definition from your nyc configArray<String>-
excludeGlob pattern to exclude files. It has precedence over the exclude definition from your nyc configArray<String>defaultExclude in https://github.com/storybookjs/addon-coverage/blob/main/src/constants.ts
extensionList of supported extensions. It has precedence over the extension definition from your nyc configArray<String>['.js', '.cjs', '.mjs', '.ts', '.tsx', '.jsx', '.vue', '.svelte]
coverageVariableThe global variable name that Istanbul will use to store coverage results.string-
preserveCommentsIndicates whether comments in the code should be preserved during the instrumentation process.booleantrue
compactControls whether the output of instrumented code is compacted. Useful for debugging when set to false.booleanfalse
esModulesDetermines whether the code to be instrumented uses ES Module syntax.booleantrue
autoWrapWhen set to true, wraps program code in a function to enable top-level return statements.booleantrue
produceSourceMapIf true, instructs Istanbul to produce a source map for the instrumented code.booleantrue
sourceMapUrlCallbackA callback function that gets invoked with the filename and the source map URL when a source map is generated.function-
debugEnables the debug mode, providing additional logging information during the instrumentation process.boolean-

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:

Option nameDescriptionTypeDefault
cwdSet the working directoryStringprocess.cwd()
includeSee here for more infoArray<String> or string['**']
excludeSee here for more infoArray<String> or stringlist
extensionList of extensions that nyc should attempt to handle in addition to .jsArray<String> or string['.js', '.cjs', '.mjs', '.ts', '.tsx', '.jsx', '.vue', '.svelte]
requireEnv Optional boolean to require the environment variable (defaults to VITE_COVERAGE) to equal true in order to instrument the code. Otherwise it will instrument even if env variable is not set. However if requireEnv is not set the instrumentation will stop if the environment variable is equal to false.boolean-
cypress Optional boolean to change the environment variable to CYPRESS_COVERAGE instead of VITE_COVERAGE. For ease of use with @cypress/code-coverage coverageboolean-
checkProd Optional boolean to enforce the plugin to skip instrumentation for production environments. Looks at Vite's isProduction key from the ResolvedConfig.boolean-
forceBuildInstrument Optional boolean to enforce the plugin to add instrumentation in build mode.booleanfalse
nycrcPath Path to specific nyc config to use instead of automatically searching for a nycconfig. This parameter is just passed down to @istanbuljs/load-nyc-config.string-

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

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

Troubleshooting

The coverage addon doesn't support optimized builds

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',
      ],
    },
  },
}

Development scripts

  • 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

License

MIT

Keywords

FAQs

Package last updated on 28 Feb 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc