@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.

Changelog

v0.0.9 (Fri Feb 04 2022)

:tada: This release contains work from new contributors! :tada:

Thanks for all your work!

:heart: Yann Braga (@yannbf)

:heart: Gert Hengeveld (@ghengeveld)

:heart: Jean-Michel FRANCOIS (@jmfrancois)

:heart: Michael Shilman (@shilman)

🐛 Bug Fix

• deps: allow storybook 6.5 prerelease versions #13 (@yannbf)
• chore: add auto-release process #12 (@yannbf)
• chore: upgrade libs to be aligned with current stable version #11 (@jmfrancois)
• feat: support cjs and esm #6 (@yannbf)
• fix: change output target to commonjs #5 (@yannbf)
• fix: mutate screen object #4 (@yannbf)
• feat: add typescript support #1 (@yannbf)

⚠️ Pushed to main

• chore: fix release process (@yannbf)
• 0.0.8 (@ghengeveld)
• Update linear-export.yml (@shilman)
• Add linear export (@shilman)
• 0.0.7 (@ghengeveld)
• Clear output dir before building (@ghengeveld)
• 0.0.6 (@ghengeveld)
• Bump deps and add @types/react to fix compilation issue (@ghengeveld)
• 0.0.5 (@ghengeveld)
• 0.0.4 (@yannbf)
• 0.0.3 (@ghengeveld)
• Use highest valid timeout value (@ghengeveld)
• 0.0.2 (@ghengeveld)
• Use prepack instead of prepublish (@ghengeveld)
• 0.0.1 (@ghengeveld)
• Use latest beta (@ghengeveld)
• 0.0.0 (@ghengeveld)
• Don't timeout after 1 minute while debugging (@ghengeveld)
• Add eslint/prettier config (@ghengeveld)
• 0.0.0-alpha.3 (@yannbf)
• 0.0.0-alpha.2 (@ghengeveld)
• Don't time out while debugging async methods (@ghengeveld)
• Initial commit (@ghengeveld)

Authors: 4

• Gert Hengeveld (@ghengeveld)
• Jean-Michel FRANCOIS (@jmfrancois)
• Michael Shilman (@shilman)
• Yann Braga (@yannbf)