# @storybook/addon-interactions

> Automate, test and debug user interactions

Latest version **8.6.14** (published 2025-05-16) · MIT license · 0 weekly downloads

## Install

```sh
npm install @storybook/addon-interactions
pnpm add @storybook/addon-interactions
yarn add @storybook/addon-interactions
bun add @storybook/addon-interactions
```

## Health

**Score 60/100 (C)** — status: stable.

Positive: has types; esm support; no vulnerabilities; high maintenance score; popular repo; extremely popular.

Warnings: low downloads.

Negative: stale.

## Facts

| | |
|---|---|
| Version | 8.6.14 |
| Published | 2025-05-16 |
| First published | 2021-10-15 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 5 |
| Unpacked size | 126.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 91181 |
| Maintainers | ndelangen, shilman, tmeasday, ghengeveld, winkervsbecks, yannbf, kylegach, jreinhold, kasperpeulen, valentinpalkovic, domyen, storybook-bot |
| Keywords | storybook-addons, data-state, test |

## Links

- npm: https://www.npmjs.com/package/@storybook/addon-interactions
- Repository: https://github.com/storybookjs/storybook
- Homepage: https://github.com/storybookjs/storybook/tree/next/code/addons/interactions
- Issues: https://github.com/storybookjs/storybook/issues
- Funding: https://opencollective.com/storybook
- npm.io page: https://npm.io/package/@storybook/addon-interactions

## Dependencies (5)

- [polished](https://npm.io/package/polished.md) ^4.2.2
- [ts-dedent](https://npm.io/package/ts-dedent.md) ^2.2.0
- [@storybook/test](https://npm.io/package/@storybook/test.md) 8.6.14
- [@storybook/global](https://npm.io/package/@storybook/global.md) ^5.0.0
- [@storybook/instrumenter](https://npm.io/package/@storybook/instrumenter.md) 8.6.14

## Alternatives

- [duck](https://npm.io/package/duck.md) — 4.2M weekly downloads
- [ava](https://npm.io/package/ava.md) — 560.2K weekly downloads
- [storybook-addon-module-mock](https://npm.io/package/storybook-addon-module-mock.md) — 71.7K weekly downloads
- [vest](https://npm.io/package/vest.md) — 50.1K weekly downloads
- [@ethereum-waffle/mock-contract](https://npm.io/package/@ethereum-waffle/mock-contract.md) — 40.0K weekly downloads

## Recent versions

- 8.6.14 (latest) — 2025-05-16
- 7.6.24 (v7) — 2026-03-06
- 8.6.18 (v8) — 2026-03-06
- 0.0.0-pr-34011-sha-c45b0f3f (v7-canary) — 2026-03-06
- 0.0.0-pr-34009-sha-c90626e7 (v8-canary) — 2026-03-04
- 0.0.0-pr-31494-sha-c99bda03 (canary) — 2025-05-16
- 9.0.0-alpha.10 (next) — 2025-03-25
- 8.2.10 (tag-for-publishing-older-releases) — 2024-11-04
- 7.1.1-pr-23508-1689802571-5ec8c1c3.0 (pr-23508) — 2023-07-19
- 7.1.1-pr-22631-1689802540-351503cb.0 (pr-22631) — 2023-07-19
- 7.1.0-alpha.29 (future) — 2023-06-06
- 6.5.17-alpha.0 (prerelease) — 2023-03-23
- 0.0.0-pr-34011-sha-1f3f0b01 — 2026-03-04
- 8.6.17 — 2026-02-18
- 7.6.23 — 2026-02-18
- … 1297 more at https://npm.io/package/@storybook/addon-interactions/versions

## README

# Storybook Addon Interactions

Storybook Addon Interactions enables visual debugging of interactions and tests in [Storybook](https://storybook.js.org).

![Screenshot](https://user-images.githubusercontent.com/321738/135628189-3d101cba-50bc-49dc-bba0-776586fedaf3.png)

## Installation

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

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

within `.storybook/main.js`:

```js
export default {
  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 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.

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

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

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

export const Demo = Template.bind({});
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 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.

---
_Source: https://npm.io/package/@storybook/addon-interactions · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._