KO | EN

GitLite

Minimalist Open Source Repository Search Engine

gitlite — search

#dsh #dsh-plugin #ai-agents #developer-tools #codex #claude-code #mcp #rust #deepseek-harness #typescript #ai-agent #cli

storybook-addon-test-codegen

★ 153 Open GitHub ↗

Addon for Storybook that generates test code for your stories.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Storybook Addon Test Codegen

[![NPM version](https://img.shields.io/npm/v/storybook-addon-test-codegen)](https://www.npmjs.com/package/storybook-addon-test-codegen)
[![NPM downloads](https://img.shields.io/npm/dt/storybook-addon-test-codegen)](https://www.npmjs.com/package/storybook-addon-test-codegen)
[![NPM downloads](https://img.shields.io/npm/dw/storybook-addon-test-codegen)](https://www.npmjs.com/package/storybook-addon-test-codegen)
[![GitHub license](https://img.shields.io/github/license/igrlk/storybook-addon-test-codegen)](https://github.com/igrlk/storybook-addon-test-codegen/blob/main/LICENSE)

Interact with your Storybook and get test code generated for
you. To see this live, check out the [demo](https://igrlk.github.io/storybook-addon-test-codegen/).

![Alt Text](https://raw.githubusercontent.com/igrlk/storybook-addon-test-codegen/main/assets/addon.gif)

## Installation

First, install the package using Storybook's commands:

```sh
npx storybook add storybook-addon-test-codegen
```

### Storybook version compatibility

This addon requires Storybook version **10.0.0 or higher**.

For older versions of Storybook, use npm directly to install the following addon versions:

| Storybook Version | Addon Version |
|-------------------|---------------|
| 9.*               | 2.0.1         |
| 8.3.*             | 1.3.4         |
| 8.2.*             | 1.0.3         |

## Manual installation

The `npx storybook add` command should automatically do everything that is necessary to set up this addon. If for any reason you need to do the steps manually, here's what you have to do.

Install the addon:
```sh
npm install --save-dev storybook-addon-test-codegen
```

Once installed, register it as an addon in `.storybook/main.ts`.

```js
// .storybook/main.ts

// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
import type {StorybookConfig} from '@storybook/your-framework';

const config: StorybookConfig = {
  // ...rest of config
  addons: [
    'storybook-addon-test-codegen', // 👈 register the addon here
  ],
};

export default config;
```

## Usage

Enable recording in the Interaction Recorder tab in the Storybook UI. Interact with your components as you normally
would, and the addon will generate test code for you. Click "Add assertion" to add assertions like
`expect().toBeVisible()` to the generated code.

Click on "Save to story" to save the generated code to the story file. Done 🎉

Alternatively, copy both imports and the generated code to your test file like so:

```jsx
// MyComponent.stories.tsx

// 👇 Add the generated imports here
import {userEvent, waitFor, within, expect} from "storybook/test";

export const MyComponent = {
  // ...rest of the story

// 👇 Add the generated test code here
  play: async ({canvasElement}) => {
    const canvas = within(canvasElement.ownerDocument.body);
    await userEvent.click(await canvas.findByRole('textbox', {name: 'Name'}));
    await userEvent.type(await canvas.findByRole('textbox', {name: 'Name'}), 'John Doe');
}
}
```

### Usage with CSF Next

If you're using CSF Next syntax with `definePreview` and `defineMain`, you'll need to register the addon in two places. **This is done automatically by the Storybook add command**. If you need to do it manually, change the following files:

1. The `.storybook/main.ts` file:
```tsx
// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
import {defineMain} from '@storybook/your-framework/node';
export default defineMain({
	// ...
	addons: ['storybook-addon-codegen'],
});
```

2. The `.storybook/preview.ts` file:
```tsx
import addonCodegen from 'storybook-addon-codegen';
import {definePreview} from '@storybook/react-vite';
// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
import {definePreview} from '@storybook/your-framework';

export default definePreview({
	// ...
	addons: [addonCodegen()],
});
```

### Warnings

The addon helps you write better tests by showing warnings when it detects potential improvements in your selectors. It
highlights cases where:

- Roles are used without names (which can make tests fragile)
- Query selectors are used (which can break when HTML structure changes)
- Test IDs are used (which don't reflect how users interact with your app)

For each warning, you'll get suggestions on how to improve your selectors to make tests more reliable and maintainable.

![Warnings in action](https://raw.githubusercontent.com/igrlk/storybook-addon-test-codegen/main/assets/warnings.png)

## API

### Custom test-id selector

To set a custom data-test attribute to use for generating `findByTestId` queries, add the following to your
`preview.ts`:

```ts
import {configure} from 'storybook/test';

configure({
  testIdAttribute: 'my-custom-attribute',
});
```

## Contributing

Any contributions are welcome. Feel free to open an issue or a pull request.

### Development Workflow

When developing this addon locally, there are two different workflows you can use:

#### Recommended: Separate watch and serve (saving to file works)

Run these two commands in separate terminals:

```sh
pnpm start        # Watch addon files and rebuild on changes
pnpm storybook    # Run Storybook (not in watch mode)
```

**Note:** With this setup, the "Save to story" feature works correctly. However, when you make changes to the addon itself, you'll need to manually restart `pnpm storybook` to pick up the new addon files.

#### Alternative: Full watch mode (saving to file doesn't work)

```sh
pnpm start:storybook  # Runs both addon and Storybook in watch mode
```

This command runs both the addon build (tsup) and Storybook in watch mode, so changes to the addon are automatically picked up by Storybook without manual restarts. However, the "Save to story" feature has historically not worked with this setup and we haven't been able to resolve this issue yet.

storybook-addon-test-codegen

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README