Storybook Addon Test Codegen

3.0.1 · active · verified Wed Apr 22

storybook-addon-test-codegen is a Storybook addon designed to streamline the creation of interactive tests for UI components. It enables developers to record interactions with their stories directly within the Storybook UI, automatically generating executable test code using utilities from `@storybook/test` (e.g., `userEvent`, `within`, `expect`). The current stable version is 3.0.1, with major version releases frequently aligning with Storybook's own major updates (e.g., v3.0.0 supports Storybook 10, v2.0.0 supports Storybook 9). This addon significantly reduces the manual effort of writing tests by converting recorded actions into functional test scripts and provides immediate feedback, including warnings for potential test improvements. Its core differentiator lies in its interactive, in-browser test generation capabilities within the Storybook development environment.

Common errors

```
Module not found: Can't resolve 'storybook-addon-test-codegen'
```
cause The package is not installed or the import/registration path is incorrect.

fix Run `npm install --save-dev storybook-addon-test-codegen` or `npx storybook add storybook-addon-test-codegen`. Verify the addon name in `.storybook/main.ts`.
```
TypeError: addonCodegen is not a function
```
cause This typically occurs when attempting to register the addon in `.storybook/preview.ts` for CSF Next using the string `['storybook-addon-test-codegen']` instead of importing and calling it.

fix For CSF Next with `definePreview`, import `addonCodegen` and register it as `addons: [addonCodegen()]` in `.storybook/preview.ts`.
```
No test code generated in the Storybook UI despite interactions.
```
cause The Interaction Recorder tab might not be enabled, or the component interactions are not being properly detected.

fix Ensure the 'Interaction Recorder' tab is active in the Storybook UI. Make sure your component elements are accessible and interactive according to standard web practices (e.g., proper roles, visible elements).
```
ReferenceError: expect is not defined (or userEvent, waitFor, within)
```
cause The generated test code uses utilities from `storybook/test`, but these have not been imported into the story file's `play` function or the external test file.

fix Add `import { userEvent, waitFor, within, expect } from "storybook/test";` at the top of your story file or test file where the `play` function is defined.

Warnings

breaking Version 3.0.0 introduced a breaking change by upgrading to Storybook 10. This version is only compatible with Storybook v10.x and newer.
Fix: Ensure your Storybook installation is version 10.0.0 or higher when using storybook-addon-test-codegen v3.x. If on older Storybook, use compatible addon versions.
breaking Version 2.0.0 introduced breaking changes for Storybook 9 support. This version is only compatible with Storybook v9.x.
Fix: For Storybook v9.x, use storybook-addon-test-codegen v2.0.1. For older Storybook versions, consult the addon's compatibility table.
gotcha This addon has specific version compatibility requirements with Storybook. Using an incompatible addon version with your Storybook setup will lead to errors or the addon not functioning.
Fix: Always check the addon's README for the compatibility table. For Storybook 9.x use addon v2.0.1; for Storybook 8.3.x use v1.3.4; for Storybook 8.2.x use v1.0.3. For Storybook 10.x use v3.x.
gotcha When using Storybook's CSF Next syntax with `definePreview` and `defineMain`, manual installation requires registering the addon in both `.storybook/main.ts` (as a string) and `.storybook/preview.ts` (as an imported function call).
Fix: In `.storybook/main.ts`, use `addons: ['storybook-addon-test-codegen']`. In `.storybook/preview.ts`, import `addonCodegen` and use `addons: [addonCodegen()]`.

Install

npm install storybook-addon-test-codegen npm
yarn add storybook-addon-test-codegen yarn
pnpm add storybook-addon-test-codegen pnpm

Imports

Addon Registration (main.ts)

wrong:

const config = {
  addons: [require('storybook-addon-test-codegen')]
};

correct:

// .storybook/main.ts
import type { StorybookConfig } from '@storybook/react-vite'; // or your framework

const config: StorybookConfig = {
  addons: ['storybook-addon-test-codegen']
};
export default config;

The addon is registered as a string in `main.ts` for standard configuration. Ensure you use the correct package name `storybook-addon-test-codegen`.

Addon Registration (preview.ts for CSF Next)

wrong:

// .storybook/preview.ts
export default definePreview({
  addons: ['storybook-addon-test-codegen']
});

correct:

// .storybook/preview.ts
import addonCodegen from 'storybook-addon-test-codegen';
import { definePreview } from '@storybook/react-vite'; // or your framework

export default definePreview({
  addons: [addonCodegen()]
});

When using CSF Next syntax with `definePreview`, the addon must be imported as a default and called as a function (e.g., `addonCodegen()`) within the `addons` array in `preview.ts`. Do not use the string form here.

Generated Test Utilities
wrong:
```
const { userEvent, waitFor, within, expect } = require("storybook/test");
```
correct:
```
import { userEvent, waitFor, within, expect } from "storybook/test";
```
The test utilities (like `userEvent`, `expect`) generated by this addon come from `@storybook/test`, which is an ESM-only package. Ensure your test environment supports ESM imports.

Quickstart

Demonstrates how to install the addon, configure it in .storybook/main.ts, and shows an example Storybook story with a `play` function containing generated test code.

import type { StorybookConfig } from '@storybook/react-vite'; // Replace with your framework
import { userEvent, waitFor, within, expect } from "storybook/test";

// 1. Install the addon
// npx storybook add storybook-addon-test-codegen

// 2. Configure in .storybook/main.ts
const config: StorybookConfig = {
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  addons: ['storybook-addon-test-codegen'], // 👈 Register the addon here
  framework: {
    name: '@storybook/react-vite',
    options: {},
  },
  docs: {
    autodocs: 'tag',
  },
};
export default config;

// 3. Example Story with generated play function
// src/stories/Button.stories.ts (or .tsx)

export const MyButtonStory = {
  args: {
    label: 'Click Me',
  },
  play: async ({ canvasElement }) => {
    const canvas = within(canvasElement);
    const button = await canvas.findByRole('button', { name: 'Click Me' });
    await userEvent.click(button);
    await expect(button).toBeEnabled(); // Assertion generated by addon
  },
};

view raw JSON →