Testing with Storybook

Play function for interactions

The play function lets you write automated interactions for your stories. These can simulate user interactions and verify component behavior.

Writing a play test

Here's an example of testing user interactions with the play function.

import { userEvent, within } from '@storybook/testing-library';
import { Button } from './Button';

export default {
  component: Button,
  title: 'Components/Button',
};

export const Clicked = () => <Button>Click me</Button>;
Clicked.play = async ({ canvasElement }) => {
  const canvas = within(canvasElement);
  const button = canvas.getByRole('button');
  await userEvent.click(button);
};

Accessibility testing

Use the a11y addon to automatically scan stories for accessibility issues and follow WCAG guidelines.

Screenshot testing

Use visual testing tools like Percy or Chromatic to capture and compare component screenshots across changes.