| title | Vitest addon | ||||
|---|---|---|---|---|---|
| sidebar |
|
<If notRenderer={['react', 'vue', 'svelte', 'web-components']}>
The Vitest addon is currently only supported in React, Vue, Svelte, and Web Components projects, which use the Vite builder (or the Next.js framework with Vite).
If you are using a different renderer (such as Angular) or the Webpack builder, you can use the Storyboook test runner to test your stories.
{/* End non-supported renderers */}<If renderer={['react', 'vue', 'svelte', 'web-components']}>
Storybook's Vitest addon allows you to test your components directly inside Storybook. On its own, it transforms your stories into component tests, which test the rendering and behavior of your components in a real browser environment. It can also calculate project coverage provided by your stories.
If your project is using other testing addons, such as the Visual tests addon or the Accessibility addon, you can run those tests alongside your component tests.
When component tests are run for a story, the status is shown in the sidebar. The sidebar can be filtered to only show failing stories, and you can press the menu button on a failing story to see debugging options.
You can also run tests in watch mode, which will automatically re-run tests when you make changes to your components or stories. To activate, press the watch mode toggle (the eye icon) in the testing widget.