Registry / testing / storybook-addon-test-codegen

storybook-addon-test-codegen

library3.0.1jsnpmunverified

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.

testing web-framework

npm install storybook-addon-test-codegen

github ↗package ↗

INSTALL

IMPORT

SIG · STORYBOOK-ADDON-TE

storybook-addon-test-codegen

testingjavascriptv3.0.1

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

Addon Registration (main.ts)

✓ // .storybook/main.ts import type { StorybookConfig } from '@storybook/react-vite'; // or your framework const config: StorybookConfig = { addons: ['storybook-addon-test-codegen'] }; export default config;

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

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)

✓ // .storybook/preview.ts import addonCodegen from 'storybook-addon-test-codegen'; import { definePreview } from '@storybook/react-vite'; // or your framework export default definePreview({ addons: [addonCodegen()] });

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

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

✓ import { userEvent, waitFor, within, expect } from "storybook/test";

✗ const { userEvent, waitFor, within, expect } = require("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.

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 }, };

Debug

Known issues

breakingVersion 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.

affects: >=3.0.0

breakingVersion 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.

affects: >=2.0.0 <3.0.0

gotchaThis 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.

affects: All versions

gotchaWhen 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()]`.

affects: All versions

Errors

Common errors & fixes

Module not found: Can't resolve 'storybook-addon-test-codegen'

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

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.

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)

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.

Upgrade

Version history

3.0.1latest on npm

Audit

Dependencies

storybookrequiredThis is a Storybook addon and requires Storybook to function. Compatibility is version-specific.

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/igrlk/storybook-addon-test-codegen ↗

packagehttps://www.npmjs.com/package/storybook-addon-test-codegen ↗