@storybook/testing-library

What is @storybook/testing-library?

@storybook/testing-library is a package that integrates Storybook with Testing Library, allowing you to test your components in isolation within the Storybook environment. It provides utilities to render and interact with your components in a way that mimics how users would interact with them.

What are @storybook/testing-library's main functionalities?

Render Storybook Stories

This feature allows you to render a Storybook story directly in your tests. You can then use Testing Library queries to interact with the rendered component and make assertions.

import { render } from '@storybook/testing-library';
import { MyComponent } from './MyComponent.stories';

const { getByText } = render(<MyComponent />);
expect(getByText('Hello World')).toBeInTheDocument();

Interaction Testing

This feature allows you to simulate user interactions with your components, such as clicks, typing, and other events. You can then assert the expected changes in the component's state or output.

import { render, fireEvent } from '@storybook/testing-library';
import { MyButton } from './MyButton.stories';

const { getByRole } = render(<MyButton />);
const button = getByRole('button');
fireEvent.click(button);
expect(button).toHaveTextContent('Clicked');

Snapshot Testing

This feature allows you to create snapshots of your components as they are rendered in Storybook. You can use these snapshots to ensure that your components' output does not change unexpectedly.

import { render } from '@storybook/testing-library';
import { MyComponent } from './MyComponent.stories';
import { create } from 'react-test-renderer';

const tree = create(render(<MyComponent />)).toJSON();
expect(tree).toMatchSnapshot();

Other packages similar to @storybook/testing-library

jest

Jest is a JavaScript testing framework maintained by Facebook. It provides a complete and easy-to-set-up JavaScript testing solution. While Jest does not integrate directly with Storybook, it can be used alongside Testing Library to test React components.

enzyme

Enzyme is a JavaScript testing utility for React that makes it easier to assert, manipulate, and traverse your React components' output. Unlike @storybook/testing-library, Enzyme does not integrate with Storybook and uses a different approach for rendering and interacting with components.

cypress

Cypress is a front-end testing tool built for the modern web. It allows you to write end-to-end tests, integration tests, and unit tests. Cypress provides a different approach compared to @storybook/testing-library, focusing more on end-to-end testing rather than isolated component testing within Storybook.

README

Storybook Testing Library

Storybook integration for Testing Library, instrumented for use with the Interactions addon.

For documentation, check the Storybook docs