Testing utilities that allow you to reuse your stories in your unit tests

⚠️ Attention!

If you're using Storybook 7, you need to read this section. Otherwise, feel free to skip it.

@storybook/testing-react has been promoted to a first-class Storybook functionality. This means that you no longer need this package. Instead, you can import the same utilities, but from the @storybook/react package. Additionally, the internals of composeStories and composeStory have been revamped, so the way a story is composed is more accurate. The @storybook/testing-react package will be deprecated, so we recommend you to migrate.

Please do the following:

1. Uninstall this package
2. Update your imports

- import { composeStories } from '@storybook/testing-react';
+ import { composeStories } from '@storybook/react';
// OR
- import { setProjectAnnotations } from '@storybook/testing-react';
+ import { setProjectAnnotations } from '@storybook/react';

The problem

You are using Storybook for your components and writing tests for them with jest, most likely alongside Enzyme or React testing library. In your Storybook stories, you already defined the scenarios of your components. You also set up the necessary decorators (theming, routing, state management, etc.) to make them all render correctly. When you're writing tests, you also end up defining scenarios of your components, as well as setting up the necessary decorators. By doing the same thing twice, you feel like you're spending too much effort, making writing and maintaining stories/tests become less like fun and more like a burden.

The solution

@storybook/testing-react is a solution to reuse your Storybook stories in your React tests. By reusing your stories in your tests, you have a catalog of component scenarios ready to be tested. All args and decorators from your story and its meta, and also global decorators, will be composed by this library and returned to you in a simple component. This way, in your unit tests, all you have to do is select which story you want to render, and all the necessary setup will be already done for you. This is the missing piece that allows for better shareability and maintenance between writing tests and writing Storybook stories.

Installation

This library should be installed as one of your project's devDependencies:

via npm

npm install --save-dev @storybook/testing-react

or via yarn

yarn add --dev @storybook/testing-react

Setup

Storybook 6 and Component Story Format

This library requires you to be using Storybook version 6, Component Story Format (CSF) and hoisted CSF annotations, which is the recommended way to write stories since Storybook 6.

Essentially, if you use Storybook 6 and your stories look similar to this, you're good to go!