@storybook/test
TypeScript icon, indicating that this package has built-in type declarations

8.1.9 • Public • Published

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 { Button } from './Button';
import { within, userEvent, expect, fn } from '@storybook/test';

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

Readme

Keywords

Package Sidebar

Install

npm i @storybook/test

Weekly Downloads

1,377,995

Version

8.1.9

License

MIT

Unpacked Size

1.63 MB

Total Files

5

Last publish

Collaborators

  • domyen
  • kasperpeulen
  • valentinpalkovic
  • jreinhold
  • kylegach
  • ndelangen
  • shilman
  • tmeasday
  • ghengeveld
  • winkervsbecks
  • yannbf