Storybook 7.6Visual test with Chromatic
Back to integrations
Add your integration
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
Automate, test and debug user interactions
npm install @junk-temporary-prototypes/addon-interactions
Last updated 6 months ago
Downloads per week
Readme View on GitHub

Storybook Addon Interactions

Storybook Addon Interactions enables visual debugging of interactions and tests in Storybook.



Install this addon by adding the @storybook/addon-interactions dependency:

yarn add -D @storybook/addon-interactions @storybook/test

within .storybook/main.js:

export default {
  addons: ['@storybook/addon-interactions'],

Note that @storybook/addon-interactions must be listed after @storybook/addon-actions or @storybook/addon-essentials.


Interactions relies on "instrumented" versions of Vitest and Testing Library, that you import from @storybook/test instead of their original package. You can then use these libraries in your play function.

import { Button } from './Button';
import { within, userEvent, expect, fn } from '@storybook/test';

export default {
  title: 'Button',
  component: Button,
  args: {
    onClick: fn(),

const Template = (args) => <Button {...args} />;

export const Demo = Template.bind({}); = async ({ args, canvasElement }) => {
  const canvas = within(canvasElement);
  await expect(args.onClick).toHaveBeenCalled();

In order to enable step-through debugging in the addon panel, 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.

Note that the fn function will assign a spy to your arg, so that you can assert invocations.

Join the community
6,385 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software

Maintained by
Special thanks to Netlify and CircleCI