42 lines
1.3 KiB
Markdown
42 lines
1.3 KiB
Markdown
# 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:
|
|
|
|
```sh
|
|
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](https://vitest.dev/api/mock.html), [@vitest/expect](https://vitest.dev/api/expect.html) (based on [chai](https://www.chaijs.com/)), [@testing-library/dom](https://testing-library.com/docs/dom-testing-library/intro) and [@testing-library/user-event](https://testing-library.com/docs/user-event/intro).
|
|
The instrumentation makes sure you can debug those methods in the [addon-interactions](https://storybook.js.org/addons/@storybook/addon-interactions) panel.
|
|
|
|
```ts
|
|
// 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();
|
|
},
|
|
};
|
|
```
|