{"id":16228,"library":"storybook_vitest_addon","title":"Storybook Vitest Addon","description":"The `storybook_vitest_addon` integrates Vitest unit test results directly into a Storybook panel, enhancing the development workflow by displaying relevant test outcomes alongside component stories. This addon is currently at version `0.1.8` and has a relatively frequent release cadence, often aligning with Storybook and Vitest major version updates, as seen with recent upgrades to Storybook 8. It primarily supports React and Vite-based Storybook setups, requiring `vitest` v1.1.0 or newer. Its key differentiator is its minimal visual overhead, focusing on clarity for test results, and its direct integration via Storybook parameters, making it straightforward to link test output (JSON format) to individual stories. Developers provide a JSON file of Vitest results and the test file name to the addon's parameters to enable the display.","status":"active","version":"0.1.8","language":"javascript","source_language":"en","source_url":"https://github.com/krzysztofradomski/storybook-addon-vitest","tags":["javascript","storybook-addons","addon","storybook","vitest","react","report","test","results","typescript"],"install":[{"cmd":"npm install storybook_vitest_addon","lang":"bash","label":"npm"},{"cmd":"yarn add storybook_vitest_addon","lang":"bash","label":"yarn"},{"cmd":"pnpm add storybook_vitest_addon","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core Storybook UI components needed for rendering the addon panel.","package":"@storybook/components","optional":false},{"reason":"Handles communication between Storybook manager and addons.","package":"@storybook/core-events","optional":false},{"reason":"Provides the Storybook manager interface where the addon panel resides.","package":"@storybook/manager","optional":false},{"reason":"API for Storybook manager interactions, crucial for addon development.","package":"@storybook/manager-api","optional":false},{"reason":"Styling and theme utilities for Storybook addons.","package":"@storybook/theming","optional":false},{"reason":"The addon displays results generated by Vitest; compatibility requires a specific version range.","package":"vitest","optional":false}],"imports":[{"note":"While not directly imported by end-users for common usage, internal Storybook addon development often relies on such constants. The primary interaction is via Storybook parameters.","symbol":"ADDON_ID","correct":"import { ADDON_ID } from 'storybook_vitest_addon';"},{"note":"The addon is configured via the Storybook `parameters` field under the `vitest` key, not by importing a symbol named `vitest` directly from the package. This is a common pattern for Storybook addons.","wrong":"import { vitest } from 'storybook_vitest_addon'","symbol":"vitest","correct":"parameters: { vitest: { testFile: '...', testResults: ... } }"},{"note":"The addon expects a JSON file containing Vitest test results, which is typically imported as a default export from a local JSON file generated by Vitest.","symbol":"vitestResults","correct":"import vitestResults from './unit-test-results.json';"}],"quickstart":{"code":"import { Meta, StoryObj } from '@storybook/react';\nimport vitestResults from './unit-test-results.json'; // Assume this file is generated by Vitest\n\ninterface ButtonProps {\n  label: string;\n  primary?: boolean;\n}\n\n// Dummy Button Component for example\nconst Button = ({ primary = false, label }: ButtonProps) => {\n  const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';\n  return (\n    <button type=\"button\" className={['storybook-button', mode].join(' ')}>\n      {label}\n    </button>\n  );\n};\n\nconst meta: Meta<typeof Button> = {\n  title: 'Example/Button',\n  component: Button,\n  parameters: {\n    vitest: {\n      testFile: 'Button.test.tsx', // Name of the Vitest test file for this component\n      testResults: vitestResults, // The imported JSON object of test results\n    },\n  },\n  argTypes: {\n    backgroundColor: { control: 'color' },\n  },\n};\n\nexport default meta;\ntype Story = StoryObj<typeof Button>;\n\nexport const Primary: Story = {\n  args: {\n    primary: true,\n    label: 'Button',\n  },\n};\n\nexport const Secondary: Story = {\n  args: {\n    label: 'Button',\n  },\n};\n","lang":"typescript","description":"This quickstart demonstrates how to configure the `storybook_vitest_addon` in a Storybook story file, linking Vitest test results to a component."},"warnings":[{"fix":"Always check the `Compatibility` section in the addon's README or `package.json` for supported Storybook and Vitest versions when upgrading either dependency. For Storybook 8, ensure `storybook_vitest_addon` is `v0.1.7` or newer.","message":"The addon has frequent updates to maintain compatibility with major Storybook versions. Upgrading Storybook (e.g., from v7 to v8) will often require updating this addon to a compatible version.","severity":"breaking","affected_versions":">=0.1.0"},{"fix":"Upgrade to `storybook_vitest_addon` `v0.0.6` or newer if using Vitest `v0.8.0` or higher to ensure correct parsing of test results.","message":"Early versions (pre-v0.0.6) had breaking changes related to Vitest API updates. Specifically, `v0.0.6` addressed a breaking change in Vitest `v0.8.0`.","severity":"breaking","affected_versions":"<0.0.6"},{"fix":"Configure your `vitest` script to output results to a JSON file (e.g., `vitest run --json --outputFile=./unit-test-results.json`). Then, import this file into your Storybook stories.","message":"The addon requires test results in a JSON format. This means you need to configure Vitest to output its results to a JSON file during your test run.","severity":"gotcha","affected_versions":">=0.0.1"},{"fix":"Ensure `testFile` and `testResults` parameters are correctly set within `parameters.vitest` for the story. Verify that the `unit-test-results.json` file actually contains valid Vitest output and is being correctly imported.","message":"The addon's panel might not display content if it's not correctly configured or if the provided `testResults` JSON is malformed or empty.","severity":"gotcha","affected_versions":">=0.0.7"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"fix":"Run `npm install storybook_vitest_addon` or `yarn add storybook_vitest_addon`. Ensure the package is listed in `devDependencies` in `package.json`.","cause":"The package is not installed or incorrectly referenced.","error":"Cannot find module 'storybook_vitest_addon'"},{"fix":"Add `storybook_vitest_addon` to your `.storybook/main.js` or `.storybook/main.ts` `addons` array. Ensure your story's `parameters` object has a `vitest` key with `testFile` and `testResults`.","cause":"The addon is not correctly registered with Storybook, or the parameters are not nested under `vitest`.","error":"TypeError: Cannot read properties of undefined (reading 'vitest')"},{"fix":"Update `storybook_vitest_addon` to the latest compatible version. For Storybook 8, this typically means `storybook_vitest_addon@0.1.7` or higher.","cause":"Incompatibility between the addon's version and the new Storybook major version.","error":"Storybook 'manager' build fails after upgrading Storybook"}],"ecosystem":"npm"}