@storybook/addon-interactions v8.0.9
Storybook Addon Interactions
Storybook Addon Interactions enables visual debugging of interactions and tests in Storybook.
Installation
Install this addon by adding the @storybook/addon-interactions
dependency:
yarn add -D @storybook/addon-interactions @storybook/jest @storybook/testing-library
within .storybook/main.js
:
module.exports = {
addons: ['@storybook/addon-interactions'],
};
Note that @storybook/addon-interactions
must be listed after @storybook/addon-actions
or @storybook/addon-essentials
.
Usage
Interactions relies on "instrumented" versions of Jest and Testing Library, that you import from @storybook/jest
and
@storybook/testing-library
instead of their original package. You can then use these libraries in your play
function.
import { expect } from '@storybook/jest';
import { within, userEvent } from '@storybook/testing-library';
export default {
title: 'Button',
argTypes: {
onClick: { action: true },
},
};
export const Demo = {
play: async ({ args, canvasElement }) => {
const canvas = within(canvasElement);
await userEvent.click(canvas.getByRole('button'));
await expect(args.onClick).toHaveBeenCalled();
}
}
In order to enable step-through debugging, calls to userEvent.*
, fireEvent
, findBy*
, waitFor*
and expect
have to
be await
-ed. While debugging, these functions return a Promise that won't resolve until you continue to the next step.
While you can technically use screen
, it's recommended to use within(canvasElement)
. Besides giving you a better error
message when a DOM element can't be found, it will also ensure your play function is compatible with Storybook Docs.
Any args
that are marked as an action
(typically via argTypes
or argTypesRegex
) will be automatically wrapped in
a Jest mock function so you can assert invocations. See
addon-actions for how to setup actions.
17 hours ago
1 day ago
2 days ago
2 days ago
3 days ago
3 days ago
9 days ago
9 days ago
10 days ago
11 days ago
13 days ago
13 days ago
13 days ago
13 days ago
13 days ago
13 days ago
13 days ago
15 days ago
16 days ago
16 days ago
16 days ago
16 days ago
16 days ago
17 days ago
17 days ago
17 days ago
20 days ago
20 days ago
20 days ago
20 days ago
21 days ago
21 days ago
21 days ago
21 days ago
21 days ago
24 days ago
27 days ago
27 days ago
28 days ago
29 days ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
4 months ago
3 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
5 months ago
5 months ago
4 months ago
4 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
6 months ago
8 months ago
5 months ago
9 months ago
5 months ago
7 months ago
8 months ago
5 months ago
9 months ago
5 months ago
9 months ago
8 months ago
5 months ago
9 months ago
8 months ago
9 months ago
8 months ago
9 months ago
8 months ago
5 months ago
5 months ago
6 months ago
9 months ago
6 months ago
6 months ago
5 months ago
10 months ago
10 months ago
10 months ago
6 months ago
9 months ago
9 months ago
7 months ago
6 months ago
9 months ago
8 months ago
8 months ago
9 months ago
5 months ago
6 months ago
5 months ago
5 months ago
5 months ago
6 months ago
7 months ago
9 months ago
7 months ago
7 months ago
9 months ago
6 months ago
7 months ago
6 months ago
6 months ago
6 months ago
6 months ago
5 months ago
6 months ago
5 months ago
9 months ago
8 months ago
6 months ago
6 months ago
6 months ago
7 months ago
6 months ago
7 months ago
5 months ago
8 months ago
7 months ago
7 months ago
5 months ago
7 months ago
9 months ago
7 months ago
10 months ago
7 months ago
5 months ago
9 months ago
7 months ago
5 months ago
5 months ago
9 months ago
6 months ago
6 months ago
9 months ago
9 months ago
7 months ago
7 months ago
7 months ago
7 months ago
8 months ago
8 months ago
5 months ago
7 months ago
7 months ago
7 months ago
7 months ago
5 months ago
9 months ago
10 months ago
7 months ago
6 months ago
6 months ago
5 months ago
7 months ago
10 months ago
5 months ago
6 months ago
8 months ago
6 months ago
6 months ago
7 months ago
7 months ago
10 months ago
9 months ago
6 months ago
6 months ago
5 months ago
10 months ago
10 months ago
10 months ago
10 months ago
5 months ago
5 months ago
5 months ago
6 months ago
6 months ago
9 months ago
5 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
7 months ago
6 months ago
9 months ago
9 months ago
8 months ago
5 months ago
7 months ago
6 months ago
7 months ago
6 months ago
8 months ago
9 months ago
9 months ago
6 months ago
9 months ago
10 months ago
10 months ago
6 months ago
9 months ago
7 months ago
7 months ago
8 months ago
8 months ago
8 months ago
6 months ago
7 months ago
5 months ago
7 months ago
7 months ago
7 months ago
10 months ago
5 months ago
8 months ago
6 months ago
7 months ago
9 months ago
7 months ago
5 months ago
8 months ago
6 months ago
6 months ago
10 months ago
9 months ago
10 months ago
10 months ago
10 months ago
5 months ago
9 months ago
5 months ago
8 months ago
9 months ago
7 months ago
6 months ago
5 months ago
5 months ago
9 months ago
9 months ago
9 months ago
8 months ago
9 months ago
9 months ago
8 months ago
9 months ago
7 months ago
6 months ago
5 months ago
10 months ago
10 months ago
10 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
10 months ago
11 months ago
11 months ago
11 months ago
11 months ago
10 months ago
11 months ago
11 months ago
11 months ago
12 months ago
12 months ago
12 months ago
12 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
12 months ago
1 year ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
1 year ago
1 year ago
2 years ago
2 years ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago