Name: storybook-addon-jest
Owner: Storybook
Description: React storybook addon that show component jest report
Created: 2017-11-09 17:31:12.0
Updated: 2018-05-22 07:01:19.0
Pushed: 2018-05-01 01:18:25.0
Homepage: https://renaudtertrais.github.io/storybook-addon-jest
Size: 4963
Language: JavaScript
GitHub Committers
| User | Most Recent Commit | # Commits |
|---|
Other Committers
| User | Most Recent Commit | # Commits |
|---|
Brings Jest results in storybook.
Checkout the above Live Storybook.
npm install --save-dev storybook-addon-jest
or
yarn add --dev storybook-addon-jest
When running Jest, be sure to save the results in a json file:
package.json
ipts": {
est": "jest --json --outputFile=.jest-test-results.json"
Add it the result file to .gitignore:
t-test-results.json
Known issue: if you use a deploy script using for example gh-pages, be sure to not put
the test script that write the result in part of the script process (in predeploy for example).
Instead use a different script:
ipts": {
est:output": "jest --json --outputFile=.jest-test-results.json",
est": "jest",
rebuild:storybook": "npm run test",
uild:storybook": "build-storybook -c .storybook -o build/",
redeploy": "npm run build:storybook",
eploy": "gh-pages -d build/",
Then in dev use:
run test:output -- --watch
When deploying:
run deploy
Register addon at .storybook/addons.js
rt 'storybook-addon-jest/register';
Assuming that you have created a test files MyComponent.test.js and MyOtherComponent.test.js
In your story.js
rt jestTestResults from '../.jest-test-results.json';
rt withTests from 'storybook-addon-jest';
iesOf('MyComponent', module)
ddDecorator(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:
rt jestTestResults from '../.jest-test-results.json';
rt withTests from 'storybook-addon-jest';
rt default withTests(jestTestResults, {
lesExt: '.test.js',
Then in your story:
mport your file
rt withTests from '.withTests';
iesOf('MyComponent', module)
ddDecorator(withTests('MyComponent', 'MyOtherComponent'));
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
rt 'storybook-addon-jest/register';
rt 'storybook-addon-jest/styles';
If you already use storybook-readme addon, you do not need to import it.
Every ideas and contributions are welcomed.
MIT © 2017-present Renaud Tertrais