storybook-addon-jest

React storybook addon that show component jest report

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
storybook-addon-jest
172100.0.17 years ago7 years agoMinified + gzip package size for storybook-addon-jest in KB

Readme

Storybook addon Jest
Brings Jest results in storybook.
Storybook Jest Addon Demo
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