Storybook Test

The @storybook/test package contains utilities for testing your stories inside play functions.

Installation

Install the package by adding the @storybook/test dev dependency:

npm install -D @storybook/test
pnpm add -D @storybook/test
yarn add -D @storybook/test

Note that this package is not an addon, so you don't have to add it to your main.js/main.ts file.

Usage

The test package exports instrumented versions of @vitest/spy, @vitest/expect (based on chai), @testing-library/dom and @testing-library/user-event. The instrumentation makes sure you can debug those methods in the addon-interactions panel.

// Button.stories.ts
import { expect, fn, userEvent, within } from '@storybook/test';
import { Button } from './Button';

export default {
  component: Button,
  args: {
    onClick: fn(),
  },
};

export const Demo = {
  play: async ({ args, canvasElement }) => {
    const canvas = within(canvasElement);
    await userEvent.click(canvas.getByRole('button'));
    await expect(args.onClick).toHaveBeenCalled();
  },
};