Post

The storybook vitest addon is absolutely incredible. storybook.js.org/docs/writing...

storybook.js.orgVitest addon | Storybook docsStorybook is a frontend workshop for building UI components and pages in isolation. Thousands of teams use it for UI development, testing, and documentation. It's open source and free.

Why? 🙂

We used to have the following process for running Storybook tests in the CI: 1. Build storybook 2. Run a local web server and the storybook test runner concurrently 3. Merge the generated coverage with the unit test coverage from jest

29/1/26, 8:44 am0 reposts1 like

Ben Bachem

@bezbac.dev

29 Jan

The new approach integrated with vitest simplifies this drastically. Now we simply need to run vitest, that's it, even merging the coverage is handled automatically.

Ben Bachem

@bezbac.dev

29 Jan

Lastly, this also makes running tests selectively much easier. `pnpm vitest --run "Button.stories.tsx"` now just works. This is a really big DX improvement for us and also allows coding agents to write and run component tests. Very impressed with the library.

Jeppe Reinhold 🇩🇰

@reinhold.is

29 Jan

Awesome! Do you ever run the tests from the Storybook UI, or is it primarily via the Vitest CLI?

Ben Bachem

@bezbac.dev

29 Jan

We do both ✅