0Pricing
React Academy · Lesson

Storybook Testing & Visual Regression

Run play functions for interaction tests and integrate Chromatic for visual diffing.

Why Test in Storybook?

Storybook 7+ ships with @storybook/test for interaction testing (play functions) and integrates with Chromatic for automated visual regression testing — all without leaving the component explorer.

Play Functions

A play function runs after the story renders, simulating user interactions via the @storybook/test utilities. Results appear in the Interactions panel.

import { within, userEvent, expect } from '@storybook/test';

export const FilledForm: Story = {
  play: async ({ canvasElement }) => {
    const canvas = within(canvasElement);
    await userEvent.type(canvas.getByLabelText('Email'), 'test@example.com');
    await userEvent.click(canvas.getByRole('button', { name: /submit/i }));
    await expect(canvas.getByText('Success!')).toBeInTheDocument();
  },
};

All lessons in this course

  1. Setting Up Storybook in a React Project
  2. Writing CSF3 Stories
  3. Args, Controls & the Actions Addon
  4. Storybook Testing & Visual Regression
← Back to React Academy