storybook-vitest

Storybook Vitest + Svelte CSF

Stories are .stories.svelte with defineMeta and <Story> from @storybook/addon-svelte-csf; ignore JSX/TSX/CSF3-TS story patterns here. Official reference: Vitest addon, use it for plugin, browser mode, CLI, tags, debugging, CI; ignore non-Svelte story file examples there. Manual setup · Example configuration files · Options

How it works

• Plugin storybookTest turns stories into Vitest tests via portable stories (Vitest). No Storybook server required for the test run
• Each <Story>: smoke render; a play function runs as the interaction test (interaction testing, asserting with expect)
• A component inside the story that throws while the story renders leaves its story green, with or without a decorator, unless a play assertion fails on what did not render. Vitest reports that throw as an "unhandled error", exits non-zero, and names "the last test to run before this error". Find the throwing component in that block's ❯ source frames: its component stack can show it as in <unknown>. Exception: when a decorator returns a bare component (() => Wrapper), the Vitest run renders the defineMeta component without props in its place, and a throw from that instance fails its story and prints under that failed story (references/storybook-decorator.md, "Decorator return form"). A console.error alone does not fail anything. Read the "Unhandled Errors" block, not just the pass count
• --silent hides the console output of every story. Separately, an AI agent's run with no reporter set in the config or the CLI uses Vitest's minimal reporter, which hides the output of passing stories even without --silent. --silent=false shows it (references/config.md)
• To make logged errors fail a story, install the spy before the story renders (a spy created inside play misses errors logged during render):
  1. Declare let errorSpy; in <script module> (let errorSpy: ReturnType<typeof spyOn>; in lang="ts")
  2. In defineMeta: beforeEach: () => { errorSpy = spyOn(console, 'error'); return () => errorSpy.mockRestore() } (spyOn from storybook/test)
  3. In play: await expect(errorSpy).not.toHaveBeenCalled(), which fails on an error logged at mount
• Test coverage: see Storybook's coverage doc; vitest --coverage --project … only covers projects you pass (SETUP.md's test:unit omits storybook; test:storybook runs it)
• With the addon, snapshot tests are not supported (unlike the test runner; comparison)