React Academy · Lesson

Storybook Testing & Visual Regression

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

Storybook Testing & Visual Regression is a free React Academy lesson on CoddyKit — lesson 4 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the React Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

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();
  },
};

Assertions in Play Functions

Use expect from @storybook/test (re-exported from Vitest/Jest) inside play functions to assert on component state after interactions.

play: async ({ canvasElement }) => {
  const canvas = within(canvasElement);
  const button = canvas.getByRole('button', { name: /add/i });
  await userEvent.click(button);
  await expect(canvas.getByText('1 item')).toBeInTheDocument();
  await userEvent.click(button);
  await expect(canvas.getByText('2 items')).toBeInTheDocument();
},

Running Story Tests with Storybook Test Runner

The @storybook/test-runner package converts every story with a play function into a Jest test. Run them in CI with a single command.

# Install
npm install @storybook/test-runner --save-dev

# package.json
"test-storybook": "test-storybook"

# Run (requires Storybook to be running)
npm run test-storybook

What Is Visual Regression Testing?

Visual regression testing snapshots component screenshots and flags pixel-level differences between commits. Chromatic, Playwright, and Percy are popular tools.

Setting Up Chromatic

Chromatic is the official Storybook cloud for visual testing. Push stories and Chromatic compares screenshots against the previous baseline.

# Install
npm install chromatic --save-dev

# Run (get project token from chromatic.com)
npx chromatic --project-token=<YOUR_TOKEN>

# CI: add to GitHub Actions
- name: Chromatic
  run: npx chromatic --project-token=${{ secrets.CHROMATIC_TOKEN }}

Reviewing Visual Changes

Chromatic shows a diff UI where reviewers accept or reject visual changes. Accepted changes become the new baseline; rejected ones block the PR.

Snapshot Testing with Storybook

The test runner can also run accessibility checks via @storybook/addon-a11y on every story automatically in CI.

// .storybook/test-runner.ts
import { checkA11y } from 'axe-playwright';

export default {
  async postVisit(page) {
    await checkA11y(page, '#storybook-root', {
      detailedReport: true,
    });
  },
};

Storybook Composition

Compose multiple Storybooks from different repos into one UI — useful for design systems shared across projects.

// .storybook/main.ts
refs: {
  'design-system': {
    title: 'Design System',
    url: 'https://design-system.example.com',
  },
},

Testing Responsive Stories

Use the viewport addon to test stories at mobile, tablet, and desktop sizes. Set viewport in story parameters to lock a story to a specific size.

export const Mobile: Story = {
  parameters: {
    viewport: { defaultViewport: 'mobile1' },
  },
  args: { label: 'Mobile Button' },
};

Flaky Test Prevention

Avoid flaky visual tests by using delay in play functions to wait for animations, or by disabling animations globally in the Storybook preview.

// .storybook/preview.ts
export const parameters = {
  chromatic: { disableSnapshot: false },
  // Disable CSS animations for consistent screenshots
};

// Global CSS for tests:
// * { animation: none !important; transition: none !important; }

Coverage Reports

Run test-storybook --coverage to generate a coverage report showing which component lines are exercised by play function tests.

Quick Check

Where does Storybook's play function run its interactions?

Recap

Play functions test component interactions inside Storybook using @storybook/test. The test runner converts play functions to Jest tests for CI. Chromatic adds visual regression snapshots, flagging pixel-level UI changes for review before merging.

Frequently asked questions

Is the “Storybook Testing & Visual Regression” lesson free?

Yes — the full text of “Storybook Testing & Visual Regression” is free to read here on the web, and the React Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the React Academy course, upgrade to CoddyKit PRO.

What will I learn in “Storybook Testing & Visual Regression”?

Run play functions for interaction tests and integrate Chromatic for visual diffing. You practise React Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start React Academy?

No prior experience is required. React Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Storybook Testing & Visual Regression” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this React Academy lesson?

Yes. Every React Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to React Academy