New
Storybook for full-stack developersAutomate with Chromatic
Star75,295
Back to integrations
Add your integration
Categories
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
Storybook Vitest
Adds a panel to display Vitest unit test results
npm install storybook_vitest_addon
Last updated 8 months ago
466
Downloads per week
Readme View on GitHub

storybook_vitest_addon

Release

Installation:

yarn add --dev storybook_vitest_addon

Addon meant to display Vitest unit test results in a new Stoybook panel. Developed and tested with React. Simply add it to the addon list in your Storybook config, and then you can use it in any story.

The addon offers minimal visuals for maximum clarity. It needs 2 params: testResults - test results file in json format and testFile - name of the component test file (TypeScript definitions available).

Example usage:

// Button.stories.tsx

import vitestResults from "./unit-test-results.json";
/.../
export default {
  title: "Example/Button",
  component: Button,
  parameters: {
    vitest: {
      testFile: "Button.test.tsx",
      testResults: vitestResults,
    },
  },
};
/.../

Join the community
5,867 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI