@storybook/test 7.6.0-alpha.3 → 7.6.0-alpha.5
Sign up to get free protection for your applications and to get access to all the features.
- package/README.md +41 -0
- package/dist/index.d.ts +3 -2
- package/dist/index.js +11 -21
- package/dist/index.mjs +11 -21
- 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/dist/index.d.ts
CHANGED
@@ -1,5 +1,5 @@
|
|
1
1
|
import { AsymmetricMatchersContaining, MatchersObject, MatcherState, JestAssertion, ExpectStatic } from '@vitest/expect';
|
2
|
-
import
|
2
|
+
import * as matchers from '@testing-library/jest-dom/matchers';
|
3
3
|
export * from '@vitest/spy';
|
4
4
|
import * as _testing_library_user_event_dist_types_setup_directApi from '@testing-library/user-event/dist/types/setup/directApi';
|
5
5
|
import * as _testing_library_user_event_dist_types_setup_setup from '@testing-library/user-event/dist/types/setup/setup';
|
@@ -10,7 +10,8 @@ type PromisifyObject<O> = {
|
|
10
10
|
[K in keyof O]: Promisify<O[K]>;
|
11
11
|
};
|
12
12
|
|
13
|
-
|
13
|
+
type Matchers<T> = PromisifyObject<JestAssertion<T>> & matchers.TestingLibraryMatchers<ReturnType<ExpectStatic['stringContaining']>, Promise<void>>;
|
14
|
+
interface Assertion<T> extends Matchers<T> {
|
14
15
|
toHaveBeenCalledOnce(): Promise<void>;
|
15
16
|
toSatisfy<E>(matcher: (value: E) => boolean, message?: string): Promise<void>;
|
16
17
|
resolves: Assertion<T>;
|