storybook-addon-jest v0.0.1
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
6 years ago