storybook/docs/workflows/unit-testing.md

title
Unit testing

Unit tests are useful for verifying functional aspects of components. They verify that the output of a component remains the same given a fixed input.

Thanks to the CSF format, your stories are reusable in unit testing tools. Each named export is “renderable” without depending on Storybook. That means your testing framework will also be able to render that story.

Additionally, the Storybook framework packages have an export that makes this easy and doesn’t rely on any other Storybook dependencies.

Here is an example of how you can use it in a testing library:

// Button.test.js

import React from 'react';
import { render, screen } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect';
import { renderStory } from '@storybook/react/render';

import { Primary } from './Button.stories';

it('renders the button in the primary state’, () => {
  render(renderStory(Primary));
  expect(screen.getByRole('button')).toHaveTextContent(‘Primary’);
});

Unit tests can be brittle and expensive to maintain for every component. We recommend combining unit tests with other testing methods like visual regression testing for comprehensive coverage with less maintenance work.