<aside> ℹ️
Storybook Test has launched and the full documentation is available here: https://storybook.js.org/docs/writing-tests
</aside>
Storybook stories are test cases for your UI components in their various states and configurations. With Storybook, you can develop and test your components at the same time, in multiple ways, with instant feedback.
Storybook tackles UI component testing from a holistic perspective, ensuring that you can not only execute component tests quickly and reliably, but that you also have well established patterns to develop, debug, maintain, and even collaborate on these tests across the development lifecycle.
Make sure your project is using Storybook 8.5 or newer, then run this command, which will install and configure Storybook Test and Vitest:
npx storybook add @storybook/experimental-addon-test
The full installation instructions, including project requirements, are available in the Test addon documentation.
Once your project is set up, you will see a testing module in the bottom of your sidebar. After running tests, you will also see test status indicators on sidebar items. Additionally, many tests can be debugged with an addon panel.
Next, we’ll cover some key concepts of testing in Storybook.
Testing in Storybook is similar to other testing environments. Most of the knowledge and techniques you’ve been using apply here, too. But there are also some significant improvements.
Storybook Test is an addon to enable real time testing of your stories. It uses a Vitest plugin to automatically transform your stories into real Vitest tests, which are then run with Vitest’s browser mode.
Get instant test feedback as you develop with watch mode. It will watch your code—either the component source or the tests—for changes and automatically re-run only the relevant tests. It’s perfect for test-driven development, where you write your tests first and then the component.