{"library":"storybook-addon-test-codegen","title":"Storybook Addon Test Codegen","type":"library","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.","language":"javascript","status":"active","last_verified":"Wed Apr 22","install":{"commands":["npm install storybook-addon-test-codegen"],"cli":null},"imports":["// .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;","// .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});","import { userEvent, waitFor, within, expect } from \"storybook/test\";"],"auth":{"required":false,"env_vars":[]},"links":{"homepage":null,"github":"https://github.com/igrlk/storybook-addon-test-codegen","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/storybook-addon-test-codegen","openapi_spec":null,"status_page":null,"smithery":null},"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}