Storybook, the front-end workshop for UI development, has officially released version 9, bringing improvements to testing through a collaboration with Vitest and other core upgrades such as a flatter dependency structure to optimize performance and improve the overall developer experience.
Storybook version 9 builds on top of some of the testing features that were implemented in version 8, bringing new features such as built in visual testing and a partnership with Vitest to introduce a new feature set called ‘Storybook Test’.
Storybook Test allows you to kick off tests across all stories at once from a new test widget, and also has a watch mode that runs tests automatically once you save a file to enhance the local development feedback loop. It primarily focuses on component tests and implements three categories to test components: Interaction, Accessibility and Visual tests. It can run tests against these both within local development (via the Storybook UI) or within delivery pipelines.
Interaction tests have been part of storybook for a while, but previously they were only available as a tab against individual stories. It is now possible to run these tests for all stories in one go, as well as seeing the status of the full run in the sidebar.
Accessibility tests can be run in storybook via the Storybook accessibility addon, which checks against the industry standard axe-core tooling. Violations to WCAG standards are caught directly within Storybook and shown against the component in an accessibility tab.
Visual tests are powered by Chromatic to run visual snapshot testing against component. This is also available to be run via the new test widget in the sidebar.
The new test widget appears in the lefthand navigation of storybook, and it provides a holistic view of Interaction, Accessibility and Visual tests and enables developers to run a full test suite for all components in a single click. In addition to this, it can provide an easy route into test coverage reports for test runs.
Storybook 9 comes with a number of additional features on top of the testing improvements, such as Svelte 5 support, and with that comes support for language functionality like Runes and Snippets directly within the stories. It has also added React Native support, which for some users is seen as one of the biggest features of the release.
A new Vite-powered NextJS plugin comes shipped alongside Storybook 9. It supports the same features as the Webpack-based version, but provides a version in Vite that is fully compatible with Storybook Test and Vitest.
Core upgrades as part of this release include a flatter dependency structure which the authors claim to make it 48% leaner, and results in a faster install time. A question on Bluesky raised a concern, asking whether this was achieved through ‘pre-bundling’, which can prevent dependencies being patched by the consumer application, Jeppe Reinhold, a contributor to Storybook, acknowledged this by confirming the pre-bundling in some cases, but explains that most of the improvements come from the removal or replacement of dependencies
Storybook is an open-source tool used for the development, test and documentation of UI components. It supports React, Vue, Angular, Svelte and many more common UI libraries. The full release notes, setup guides, and migration tools are available on storybook.js.org.
