{"library":"storybook_vitest_addon","title":"Storybook Vitest Addon","type":"library","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.","language":"javascript","status":"active","last_verified":"Tue Apr 21","install":{"commands":["npm install storybook_vitest_addon"],"cli":null},"imports":["import { ADDON_ID } from 'storybook_vitest_addon';","parameters: { vitest: { testFile: '...', testResults: ... } }","import vitestResults from './unit-test-results.json';"],"auth":{"required":false,"env_vars":[]},"links":{"homepage":null,"github":"https://github.com/krzysztofradomski/storybook-addon-vitest","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/storybook_vitest_addon","openapi_spec":null,"status_page":null,"smithery":null},"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}