Testing with Storybook

Play function for interactions

The play function runs after a story renders. It simulates user interactions with Testing Library and asserts the result using @storybook/test.

Writing a play test

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

import type { Meta, StoryObj } from '@storybook/react';
import { expect, fn, userEvent, within } from '@storybook/test';
import { Button } from './Button';

const meta = { component: Button, title: 'Components/Button' } satisfies Meta<typeof Button>;
export default meta;

export const Clicked: StoryObj<typeof meta> = {
  args: { children: 'Click me', onClick: fn() },
  play: async ({ canvasElement, args }) => {
    const canvas = within(canvasElement);
    await userEvent.click(canvas.getByRole('button'));
    await expect(args.onClick).toHaveBeenCalled();
  },
};

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.