@storybook/test 0.0.0-pr-24676-sha-1388c64f → 7.6.0-alpha.4
Sign up to get free protection for your applications and to get access to all the features.
- package/README.md +41 -0
- package/package.json +5 -5
package/README.md
ADDED
@@ -0,0 +1,41 @@
|
|
1
|
+
# Storybook Test
|
2
|
+
|
3
|
+
The `@storybook/test` package contains utilities for testing your stories inside `play` functions.
|
4
|
+
|
5
|
+
## Installation
|
6
|
+
|
7
|
+
Install the package by adding the `@storybook/test` dev dependency:
|
8
|
+
|
9
|
+
```sh
|
10
|
+
npm install -D @storybook/test
|
11
|
+
pnpm add -D @storybook/test
|
12
|
+
yarn add -D @storybook/test
|
13
|
+
```
|
14
|
+
|
15
|
+
Note that this package is not an addon, so you don't have to add it to your `main.js/main.ts` file.
|
16
|
+
|
17
|
+
## Usage
|
18
|
+
|
19
|
+
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).
|
20
|
+
The instrumentation makes sure you can debug those methods in the [addon-interactions](https://storybook.js.org/addons/@storybook/addon-interactions) panel.
|
21
|
+
|
22
|
+
```ts
|
23
|
+
// Button.stories.ts
|
24
|
+
import { Button } from './Button';
|
25
|
+
import { within, userEvent, expect, fn } from '@storybook/test';
|
26
|
+
|
27
|
+
export default {
|
28
|
+
component: Button,
|
29
|
+
args: {
|
30
|
+
onClick: fn(),
|
31
|
+
},
|
32
|
+
};
|
33
|
+
|
34
|
+
export const Demo = {
|
35
|
+
play: async ({ args, canvasElement }) => {
|
36
|
+
const canvas = within(canvasElement);
|
37
|
+
await userEvent.click(canvas.getByRole('button'));
|
38
|
+
await expect(args.onClick).toHaveBeenCalled();
|
39
|
+
},
|
40
|
+
};
|
41
|
+
```
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@storybook/test",
|
3
|
-
"version": "
|
3
|
+
"version": "7.6.0-alpha.4",
|
4
4
|
"description": "",
|
5
5
|
"keywords": [
|
6
6
|
"storybook"
|
@@ -43,10 +43,10 @@
|
|
43
43
|
"prep": "../../../scripts/prepare/bundle.ts"
|
44
44
|
},
|
45
45
|
"dependencies": {
|
46
|
-
"@storybook/client-logger": "
|
47
|
-
"@storybook/core-events": "
|
48
|
-
"@storybook/instrumenter": "
|
49
|
-
"@storybook/preview-api": "
|
46
|
+
"@storybook/client-logger": "7.6.0-alpha.4",
|
47
|
+
"@storybook/core-events": "7.6.0-alpha.4",
|
48
|
+
"@storybook/instrumenter": "7.6.0-alpha.4",
|
49
|
+
"@storybook/preview-api": "7.6.0-alpha.4",
|
50
50
|
"@testing-library/dom": "^9.3.1",
|
51
51
|
"@testing-library/jest-dom": "^6.1.3",
|
52
52
|
"@testing-library/user-event": "^14.4.3",
|