Repository files navigation

Storybook addon for inspecting Jest unit test results.

Framework Support

Check out the aboveLive Storybook.

Install this addon by adding the@storybook/addon-jest as a development dependency with:

npm install --save-dev @storybook/addon-jest

Or if you're using yarn as a package manager:

yarn add --dev @storybook/addon-jest

Register the addon in your.storybook/main.ts:

exportdefault{addons:['@storybook/addon-jest'],};

When runningJest, be sure to save the results in a JSON file:

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

You may want to add the result file to.gitignore, since it's a generated file:

.jest-test-results.json

But much like lockfiles and snapshots, checking-in generated files can have certain advantages as well. It's up to you.We recommend todo check in the test results file so starting Storybook from a clean git clone doesn't require running all tests first,but this can mean you'll encounter merge conflicts on this file in the future (re-generating this file is very similar to re-generating lockfiles and snapshots).

Ensure the generated test-results file exists before you start Storybook. During development, you will likely start Jest in watch-mode and so the JSON file will be re-generated every time code or tests change.

npm run test:generate-output -- --watch

And in the jest config, addjest-test-results.json tomodulePathIgnorePatterns to avoid an infinite loop.

modulePathIgnorePatterns:['node_modules','jest-test-results.json'],

This change will then be HMR (hot module reloaded) using webpack and displayed by this addon.

If you want to pre-run Jest automatically during development or a static build, you may need to consider that if your tests fail, the script receives a non-0 exit code and will exit.You could create aprebuild:storybook npm script, which will never fail by appending|| true:

"scripts": {"test:generate-output":"jest --json --outputFile=.jest-test-results.json || true","test":"jest","prebuild:storybook":"npm run test:generate-output","build:storybook":"build-storybook -c .storybook -o build/","predeploy":"npm run build:storybook","deploy":"gh-pages -d build/",}

Assuming that you have already created a test file for your component (e.g.,MyComponent.test.js).

In your story file, add adecorator to your story's default export to display the results:

// MyComponent.stories.js|jsximport{withTests}from'@storybook/addon-jest';importresultsfrom'../.jest-test-results.json';importMyComponentfrom'./MyComponent';exportdefault{component:MyComponent,title:'MyComponent',decorators:[withTests({ results})],};

You can also add multiple tests results within your story by including thejestparameter, for example:

// MyComponent.stories.js|jsximportMyComponentfrom'./MyComponent';importresultsfrom'../.jest-test-results.json';import{withTests}from'@storybook/addon-jest';exportdefault{component:MyComponent,title:'MyComponent',decorators:[withTests({ results})],};constTemplate=(args)=><MyComponent{....args}/>;exportconstDefault=Template.bind({});Default.args={text:'Jest results in Storybook',};Default.parameters={jest:['MyComponent.test.js','MyOtherComponent.test.js']};

To avoid importing the results of the tests in each story, you can updateyour.storybook/preview.js and include a decorator allowing you to display the results only for the stories that have thejest parameter defined:

// .storybook/preview.jsimport{withTests}from'@storybook/addon-jest';importresultsfrom'../.jest-test-results.json';exportconstdecorators=[withTests({    results,}),];

Then in your story file:

// MyComponent.stories.js|jsximportMyComponentfrom'./MyComponent';exportdefault{component:MyComponent,title:'MyComponent',};constTemplate=(args)=><MyComponent{....args}/>;exportconstDefault=Template.bind({});Default.args={text:'Jest results in Storybook',};Default.parameters={jest:'MyComponent.test.js',};

Thejest parameter will default to inferring from your story file name if not provided. For example, if your story file isMyComponent.stories.js,then "MyComponent" will be used to find your test file results. It currently doesn't work in production environments.

You can disable the addon for a single story by setting thejest parameter to{disable: true}:

// MyComponent.stories.js|jsximportMyComponentfrom'./MyComponent';exportdefault{component:MyComponent,title:'MyComponent',};constTemplate=(args)=><MyComponent{...args}/>;exportconstDefault=Template.bind({});Default.args={text:'Jest results in Storybook',};Default.parameters={jest:{disable:true},};

Using this addon with Angular will require some additional configuration. You'll need to install and configure Jest withjest-preset-angular.

Then, in your.storybook/preview.js, you'll need to add a decorator with the following:

// .storybook/preview.jsimport{withTests}from'@storybook/addon-jest';importresultsfrom'../.jest-test-results.json';exportconstdecorators=[withTests({    results,filesExt:'((\\.specs?)|(\\.tests?))?(\\.ts)?$',}),];

Finally, in your story, you'll need to include the following:

// MyComponent.stories.tsimporttype{Meta,StoryFn}from'@storybook/angular';importMyComponentfrom'./MyComponent.component';exportdefault{component:MyComponent,title:'MyComponent',}asMeta;constTemplate:StoryFn<MyComponent>=(args:MyComponent)=>({props:args,});exportconstDefault=Template.bind({});Default.parameters={jest:'MyComponent.component',};

• options.results: OBJECT jest output results.mandatory
• filesExt: STRING test file extension.optional. This allows you to write "MyComponent" and not "MyComponent.test.js". It will be used as regex to find your file results. Default value is((\\.specs?)|(\\.tests?))?(\\.js)?$. That means it will match: MyComponent.js, MyComponent.test.js, MyComponent.tests.js, MyComponent.spec.js, MyComponent.specs.js...

• Add coverage
• Display nested test better (describe)
• Display the date of the test
• Add unit tests
• Add linting
• Split

All ideas and contributions are welcome.

MIT © 2017-present Renaud Tertrais

Learn more about Storybook atstorybook.js.org.