Storybook · Writing and testing · all subjects

test runner & integration

29 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

ESLint rule use-storybook-testing-library

The use-storybook-testing-library ESLint rule is included in the addon-interactions, flat/addon-interactions, recommended, and flat/recommended configurations. It should not be applied to test files, only to story files.

Install @storybook/addon-vitest with yarn

To install the Storybook Vitest addon using yarn, run: yarn exec storybook add @storybook/addon-vitest

Install @storybook/addon-vitest with pnpm

To install the Storybook Vitest addon using pnpm, run: pnpm exec storybook add @storybook/addon-vitest

Story testing validation workflow

After editing anything that changes how the UI looks, run run-story-tests instead of a package.json test script. Use focused runs while iterating, then a broad pass before handoff when scope is unclear or wide. Fix failing tests and never report completion while they are failing.

Use focused test runs during development

During development, prefer focused test runs by specifying related stories in the input to validate only the parts you changed quickly rather than running the full suite.

When to run full test suite

Run all tests by omitting the stories input before final handoff, after broad or refactor changes, or when impact is unclear and you need project-wide verification.

Story testing workflow steps

The workflow for story testing is: 1) Make your change, 2) Run the story testing tool with related stories for focused feedback during iteration, 3) If tests fail, analyze and fix, then re-run, 4) Repeat until all tests pass.

Run story tests after every component or story change

You must run the story testing tool after every component or story change, including creating, modifying, or refactoring components, stories, or their dependencies. This is the only way to run story tests.

Never run package.json test scripts for story tests

Do not run package.json test scripts like 'npm run test:stories' to run story tests. The dedicated story testing tool must be used instead.

Do not skip story tests or ignore failures

Do not skip tests, ignore failures, or move on with failing tests. If stuck after multiple attempts, report to the user.

Run story tests after UI changes

After editing anything that changes how the UI looks, run the run-story-tests command. Never use a package.json test script for validating story changes.

Never report completion with failing story tests

Do not report completion of work while story tests are failing. Story tests must pass before marking work as complete.

storybook-setup skill for project configuration

After adding the MCP addon, invoke the `/storybook-setup` skill to help set up project-specific Storybook configuration, such as the `.storybook/preview.ts` file.

storybook-setup skill prerequisites

The storybook-setup skill requires two prerequisites: first, confirm that Storybook exists by checking for package.json and .storybook/ directory; if not present, switch to the storybook-init skill. Second, Storybook must be at least version 10.5 or the next pre-release version; if it is older or upgrade/repair is needed, switch to the storybook-upgrade skill.

storybook-setup command to run

Run `npx storybook ai setup` from the project root, or from the Storybook package in a monorepo.

Follow storybook ai setup printed output

When running `npx storybook ai setup`, follow the printed Markdown precisely and do not substitute your own plan.

Where to find Storybook upgrade instructions

Read https://storybook.js.org/docs/releases/upgrading.md in its entirety to get the latest Storybook upgrade instructions.

storybook upgrade command and version requirement

Storybook must end up at version 10.5 or later. If the latest stable release is still below 10.5, upgrade to the prerelease instead with `npx storybook@next upgrade`.

CLI init command to add Storybook

The basic command to add Storybook to a project is `npx storybook@latest init`, run from the project directory.

storybook upgrade command

The `upgrade` command upgrades to the latest version of Storybook or a specific version.

Storybook CLI commands

The Storybook CLI provides the following commands: `init` (initialize Storybook), `add` (add an addon and register it), `info` (print out system information for bug reports), `upgrade` (upgrade to the latest version), and `migrate` (run codemods to migrate your code).

Add MCP addon after Storybook initialization

After Storybook initialization succeeds, run `npx storybook add @storybook/addon-mcp` to add the MCP addon.

Initialize Storybook in a new project

To add Storybook to a project that does not have Storybook configured yet, run `npm create storybook@latest` inside the project's root directory to install the latest version. Use the matching package-manager command when appropriate, such as `pnpm create storybook@latest` or `yarn create storybook`.

Set up project-specific Storybook configuration

After installing Storybook, invoke the `$storybook:setup` skill to help set up project-specific Storybook configuration, such as the `.storybook/preview.ts` file.

setup skill output follows printed Markdown

When running the setup skill, follow the printed Markdown output precisely and do not substitute your own plan.

setup skill prerequisites: Storybook must exist

Before using the setup skill, confirm that Storybook is already installed by checking for package.json and .storybook/ directory. If Storybook does not exist, switch to the $storybook:init skill instead.

setup skill minimum Storybook version

The setup skill requires Storybook version 10.5 or newer (or the next version while 10.5 is not yet released). If the installed version is older or repair is needed, switch to the $storybook:upgrade skill first.

setup skill command to run

Run the command `npx storybook ai setup` from the project root, or from the Storybook package if working in a monorepo.

setup skill purpose

The setup skill is used when Storybook is already installed and the user wants to generate a working preview file and stories for real components.

Give your agent this brain