storybook-addon-jest

Brings Jest results in storybook.

Checkout the above Live Storybook.

Getting started

Install

npm install --save-dev storybook-addon-jest
or
yarn add --dev storybook-addon-jest

Jest Configuration

When running Jest, be sure to save the results in a json file:
package.json

"scripts": {
  "test": "jest --json --outputFile=.jest-test-results.json"
}

Add it the result file to .gitignore:

.jest-test-results.json

Register

Register addon at .storybook/addons.js

import 'storybook-addon-jest/register';

Usage

Assuming that you have created a test files MyComponent.test.js and MyOtherComponent.test.js
In your story.js

import jestTestResults from '../.jest-test-results.json';
import withTests from 'storybook-addon-jest';

storiesOf('MyComponent', module)
  .addDecorator(withTests(jestTestResults, { filesExt: '.test.js' })('MyComponent', 'MyOtherComponent'));

Or in order to avoid importing .jest-test-results.json in each story, you can create a simple file withTests.js:

import jestTestResults from '../.jest-test-results.json';
import withTests from 'storybook-addon-jest';

export default withTests(jestTestResults, {
  filesExt: '.test.js',
});

Then in your story:

// import your file
import withTests from '.withTests';

storiesOf('MyComponent', module)
  .addDecorator(withTests('MyComponent', 'MyOtherComponent'));

Styling

The panel comes with a basic design. If you want to make it look a bit nicer, you add github markdown style by importing it in .storybook/addons.js

import 'storybook-addon-jest/register';
import 'storybook-addon-jest/styles';

If you already use storybook-readme addon, you do not need to import it.

TODO

• Add coverage
• Add unit tests
• Add linting
• Split

Contributing

Every ideas and contributions are welcomed.

Licence

MIT © 2017-present Renaud Tertrais