Support code coverage

[yannbf]

Issue: #116

Release Notes

Support code coverage (#120)

Features

Setting up code coverage

The test runner supports code coverage with the --coverage flag or STORYBOOK_COLLECT_COVERAGE environment variable. The pre-requisite is that your components are instrumented using istanbul.

Instrument the code

Given that your components' code runs in the context of a real browser, they have to be instrumented so that the test runner is able to collect coverage. In order to do so, you have to setup the instrumentation yourself.

Install the istanbul babel plugin:

yarn add -D babel-plugin-istanbul

Storybook allows code transpilation with babel out of the box by configuring the babel function in your main.js. Add the istanbul plugin:

// .storybook/main.js
module.exports = {
  // ...rest of your code here
  babel: async (options) => {
    options.plugins.push([
      'istanbul',
      {
        // provide include patterns if you like
        include: ['src/components/**'],
        // provide exclude patterns if you like
        exclude: [
          '**/*.d.ts',
          '**/*{.,-}{spec,stories,types}.{js,jsx,ts,tsx}',
        ],
      },
    ]);

    return options;
  },
};

The babel plugin has default options that might suffice to your project, however if you want to know which options are taken into account you can check them here.

Run tests with --coverage flag

After setting up instrumentation, run Storybook then run the test-runner with --coverage:

yarn test-storybook --coverage

The test runner will report the results in the CLI and generate a .nyc_output/coverage.json file which can be used by nyc.

📦 Published PR as canary version: 0.2.0--canary.120.86b6b43.0

✨ Test out this PR locally via:

npm install @storybook/test-runner@0.2.0--canary.120.86b6b43.0
# or 
yarn add @storybook/test-runner@0.2.0--canary.120.86b6b43.0

Version

Published prerelease version: v0.3.0-next.0

Changelog

Release Notes

Support code coverage (#120)

Support code coverage (#120)

---

🚀 Enhancement

• Support code coverage #120 (@yannbf)

Authors: 1

• Yann Braga (@yannbf)

[shilman]

LGTM!

[shilman]

Also shouldn't this be a minor release?