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
"scripts": {
"test": "jest --json --outputFile=.jest-test-results.json"
}
Add it the result file to .gitignore
:
.jest-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:
"scripts": {
"test:output": "jest --json --outputFile=.jest-test-results.json",
"test": "jest",
"prebuild:storybook": "npm run test",
"build:storybook": "build-storybook -c .storybook -o build/",
"predeploy": "npm run build:storybook",
"deploy": "gh-pages -d build/",
}
Then in dev use:
npm run test:output -- --watch
When deploying:
npm run deploy
Register addon at .storybook/addons.js
import 'storybook-addon-jest/register';
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'));
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.
- Add coverage
- Display nested test better (describe)
- Display the date of the test
- Add unit tests
- Add linting
- Split
Every ideas and contributions are welcomed.
MIT © 2017-present Renaud Tertrais