{"id":16907,"library":"storybook-addon-test-codegen","title":"Storybook Addon Test Codegen","description":"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.","status":"active","version":"3.0.1","language":"javascript","source_language":"en","source_url":"https://github.com/igrlk/storybook-addon-test-codegen","tags":["javascript","storybook-addons","interactions","test","codegen","typescript"],"install":[{"cmd":"npm install storybook-addon-test-codegen","lang":"bash","label":"npm"},{"cmd":"yarn add storybook-addon-test-codegen","lang":"bash","label":"yarn"},{"cmd":"pnpm add storybook-addon-test-codegen","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"This is a Storybook addon and requires Storybook to function. Compatibility is version-specific.","package":"storybook","optional":false}],"imports":[{"note":"The addon is registered as a string in `main.ts` for standard configuration. Ensure you use the correct package name `storybook-addon-test-codegen`.","wrong":"const config = {\n  addons: [require('storybook-addon-test-codegen')]\n};","symbol":"Addon Registration (main.ts)","correct":"// .storybook/main.ts\nimport type { StorybookConfig } from '@storybook/react-vite'; // or your framework\n\nconst config: StorybookConfig = {\n  addons: ['storybook-addon-test-codegen']\n};\nexport default config;"},{"note":"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.","wrong":"// .storybook/preview.ts\nexport default definePreview({\n  addons: ['storybook-addon-test-codegen']\n});","symbol":"Addon Registration (preview.ts for CSF Next)","correct":"// .storybook/preview.ts\nimport addonCodegen from 'storybook-addon-test-codegen';\nimport { definePreview } from '@storybook/react-vite'; // or your framework\n\nexport default definePreview({\n  addons: [addonCodegen()]\n});"},{"note":"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.","wrong":"const { userEvent, waitFor, within, expect } = require(\"storybook/test\");","symbol":"Generated Test Utilities","correct":"import { userEvent, waitFor, within, expect } from \"storybook/test\";"}],"quickstart":{"code":"import type { StorybookConfig } from '@storybook/react-vite'; // Replace with your framework\nimport { userEvent, waitFor, within, expect } from \"storybook/test\";\n\n// 1. Install the addon\n// npx storybook add storybook-addon-test-codegen\n\n// 2. Configure in .storybook/main.ts\nconst config: StorybookConfig = {\n  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],\n  addons: ['storybook-addon-test-codegen'], // 👈 Register the addon here\n  framework: {\n    name: '@storybook/react-vite',\n    options: {},\n  },\n  docs: {\n    autodocs: 'tag',\n  },\n};\nexport default config;\n\n// 3. Example Story with generated play function\n// src/stories/Button.stories.ts (or .tsx)\n\nexport const MyButtonStory = {\n  args: {\n    label: 'Click Me',\n  },\n  play: async ({ canvasElement }) => {\n    const canvas = within(canvasElement);\n    const button = await canvas.findByRole('button', { name: 'Click Me' });\n    await userEvent.click(button);\n    await expect(button).toBeEnabled(); // Assertion generated by addon\n  },\n};","lang":"typescript","description":"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."},"warnings":[{"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.","message":"Version 3.0.0 introduced a breaking change by upgrading to Storybook 10. This version is only compatible with Storybook v10.x and newer.","severity":"breaking","affected_versions":">=3.0.0"},{"fix":"For Storybook v9.x, use storybook-addon-test-codegen v2.0.1. For older Storybook versions, consult the addon's compatibility table.","message":"Version 2.0.0 introduced breaking changes for Storybook 9 support. This version is only compatible with Storybook v9.x.","severity":"breaking","affected_versions":">=2.0.0 <3.0.0"},{"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.","message":"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.","severity":"gotcha","affected_versions":"All versions"},{"fix":"In `.storybook/main.ts`, use `addons: ['storybook-addon-test-codegen']`. In `.storybook/preview.ts`, import `addonCodegen` and use `addons: [addonCodegen()]`.","message":"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).","severity":"gotcha","affected_versions":"All versions"}],"env_vars":null,"last_verified":"2026-04-22T00:00:00.000Z","next_check":"2026-07-21T00:00:00.000Z","problems":[{"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`.","cause":"The package is not installed or the import/registration path is incorrect.","error":"Module not found: Can't resolve 'storybook-addon-test-codegen'"},{"fix":"For CSF Next with `definePreview`, import `addonCodegen` and register it as `addons: [addonCodegen()]` in `.storybook/preview.ts`.","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.","error":"TypeError: addonCodegen is not a function"},{"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).","cause":"The Interaction Recorder tab might not be enabled, or the component interactions are not being properly detected.","error":"No test code generated in the Storybook UI despite interactions."},{"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.","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.","error":"ReferenceError: expect is not defined (or userEvent, waitFor, within)"}],"ecosystem":"npm","meta_description":null}