Storybook 8.3 brings experimental story testing with Vitest
A new add-on enables the testing of stories with the testing framework Vitest –, including its speed advantages and test metrics.
(Image: Chinnapong/Shutterstock.com)
Storybook 8.3 has been released. The open source tool for developing and testing UI components enables the use of the Vitest – unit test framework with the help of an add-on, which is currently considered experimental. In this context, an experimental connection to Vite is also available.
Storybook can also boast a reduced bundle size: After the previous version 8.2 already reduced the installation size – by around 20 percent thanks to the consolidation of 18 packages into a single Storybook Core Package –, the size is now reduced by a further 30 percent in version 8.3.
Vitest integration enables fast story testing
As the Storybook team explains in the blog entry for the new release, a story is a JavaScript code snippet that contains an example of a UI component. Storybook offers a searchable catalog of stories that contain all key states of a user interface. However, Storybook also functions as an executable test suite, and this is where the connection to Vitest comes into play: thanks to a new experimental add-on (@storybook/experimental-addon-test), all stories with Vitest can be executed as tests in a headless browser. The add-on is the result of a collaboration with the Vitest core team and is designed to be used with minimal configuration. Vitest is a unit testing framework based on the Vite build tool, which is characterized by its high speed.
According to the Storybook team, the advantages of the Vitest add-on include the high testing speed, test metrics available out of the box, the developer experience of the Vitest CLI and compatibility with the Vitest extension for Visual Studio Code.
Experimental connection to Vite
As far as the support of the Vitest integration for projects with the Bundler webpack is concerned, there is no generally applicable procedure. However, the Storybook team has developed an experimental connection to Vite for projects with the React framework Next.js (@storybook/experimental-nextjs-vite). This makes it possible to emulate the Next.js environment and use its features such as optimized graphics and fonts.
(Image: Jackie Niam/Shutterstock.com)
On October 17, 2024, the online conference React 19 Day by dpunkt.verlag and iX will present the new features of the popular JavaScript library. The theme day as part of enterJS will show participants how they can get the most out of the new version and how modern web development with React 19 makes their applications better. Excerpt from the program:
- How fullstack React is changing our lives
- React 19 shines! So beautifully new! Really everything?
- React Compiler: Enhancing Developer Experience Without Compromising Performance
Early bird tickets are available until September 25.
Overall, Storybook 8.3 offers hundreds of new features and bug fixes. The blog entry on the release covers these and some other highlights.
(mai)
