Author: Daniel Curtis

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.

Biome, the all-in-one JavaScript toolchain, has released v2.0 Beta. Biome 2.0 Beta introduces a number of new features in this beta which bring it closer to ESLint and Prettier, such as plugins, to write custom lint rules, domains to group your lint rules by technology and improved sorting capabilities.

Biome has support for JavaScript, TypeScript, JSX, TSX JSON and GraphQL and claims to be 35x faster when compared to Prettier.

While ESLint and Prettier have long been the default choices for JavaScript and TypeScript projects, developers have had to maintain multiple configurations, plugins, and parsers to keep these tools working together. Biome’s goal is to consolidate all of that under one high-performance tool written in Rust. Although the goal is clear, Biome has still been missing features compared to ESLint and Prettier, as noted here on Reddit:

“I’ve replaced ESLint + Prettier in favor of Biome, however it does feel incomplete. YAML, GraphQL, import sorting and plugins are missing.”

Biome v2.0 aims to address these missing features. Plugins will allow users to match custom code snippets and report diagnostics on them, they are a first step in extending the linting rules for Biome users, and the team have indicated in their release blog that they have “plenty of ideas for making them more powerful”.

The plugins should be written using GritQL, which is an open-source query language created by GritIO for searching and modifying source code. Plugins can be added into a project by adding a reference to all the .grit plugin files within a project’s configuration. It is noted in the documentation that not all GritQL features are supported yet in Biome, and there is a GitHub issue that tracks the status of feature support.

Domains are a way to organise all the linting rules by technology, framework or domain, and there are currently four domains: next, react, solid and test. It is possible to control rules for the full domain in the biome config. Biome will also automatically inspect a package.json file and determine which domains should be enabled by default.

Improved Import Organizer is causing some excitement from early adopters. The improvements include the organizer now bundling together imports onto a single line when they come from the same module or file. Custom ordering configuration has also been added which provides the functionality for custom import ordering using the new import organizer. An example, or common use case of this is being able to group type imports at either the start or end of the import chunk.

Biome has a guide dedicated to developers looking to migrate from ESList and Prettier over to Biome. It includes two separate commands for automatically migrating both ESLint and Prettier. There is a note in the migration guide for Prettier that Biome does attempt to match as closely as possible, but there may be differences due to Biome’s different defaults.

Originally forked from Rome, Biome was born and built by the open-source community. Since then, the project has grown with contributions from former Rome maintainers and new community members alike. The Biome GitHub repository is now actively maintained, and the project has continued to grow.

The full documentation for Biome v2.0 Beta is available on biomejs.dev, including rule references and setup instructions for various environments.

Vitest, the modern Vite-native test runner, has introduced Vitest Browser Mode, offering developers an alternative to traditional DOM simulation libraries like JSDOM. The addition of browser mode to Vitest allows tests to run in an actual browser context, offering more realistic and reliable testing behavior for UI applications built with React, Vue, or Svelte.

Vitest Browser Mode is currently experimental.

Vitest Browser Mode was introduced to help improve testing with more accurate and reliable test results, it does this by running tests in a real browser context using Playwright or WebDriverIO. This mode allows for realistic browser rendering and interaction.

Historically, JSDOM has been the default simulated environment for running front-end tests in Node.js. It simulates a browser DOM inside Node, making it a convenient and fast option for unit testing. However, due to the fact that JSDOM isn’t a real browser, its implementation can sometimes fall short for advanced use cases, such as layout calculations, CSS behavior, or APIs not yet supported in JSDOM. Vitest aims to replace JSDOM environments with an easy migration path.

React Testing Library, a lightweight library for testing React components, is built on top of the DOM Testing Library, which provides utilities to interact with the DOM. It has long relied on JSDOM for simulating DOM interaction. With the introduction of Vitest Browser Mode, it is possible to migrate away from React Testing Library as a number of the APIs have been natively rewritten in the same familiar pattern of React Testing Library. Kent C. Dodds, the author of React Testing Library, says he has never been so happy to see people uninstalling React Testing Library in favor of the native implementation.

Vitest also provides support for other frameworks, such as Vue and Svelte. There is also a community package available for Lit. It supports multiple different browser environments depending on which platform you use, if you opt for WebDriverIO, it supports testing in four different browsers, Firefox, Chrome, Edge and Safari. Playwright supports Firefox, Webkit and Chromium.

There are some drawbacks to using Vitest Browser Mode, as outlined in their documentation, such as it being in experimental mode and therefore still early in its development. It can also have longer initialization times compared to other testing patterns.

Vite is an open-source, platform-agnostic build tool named after the French word for ‘quick’. It was written by Evan You, the creator of VueJS. Vitest is a next generation Vite-native framework that reuses Vite’s config and plugins; it supports ESM, TypeScript and JSX out of the box.

Full documentation for Browser Mode is available on the Vitest website including setup guides and examples.

TanStack has released the first stable version of TanStack Form, a cross-framework form library with support for React, Vue, Angular, Solid, and Lit. This new addition to the TanStack ecosystem joins the existing lineup of popular form libraries, such as Formik, React Hook Forms or Final Form.

TanStack Form launches with support for five major front-end frameworks: React, Vue, Angular, Solid and Lit. This aligns with the broader TanStack philosophy of creating headless and framework-agnostic components. Looking at some of the comparisons to other libraries within the ecosystem, such as Formik or React Hook Form, TanStack Form supports a wider variety of UI frameworks from day one.

In addition to cross-framework compatibility, TanStack Form also supports multiple runtimes, including mobile and server-side environments like React Native and NativeScript, as well as server-rendered environments such as NextJS and TanStack Start. This broad compatibility ensures that developers can adopt TanStack form regardless of not only their platform, but also their runtimes.

In general, the development community seem excited about the announcement, however even Corbin Crutchley, the lead developer for the project, has mentioned on Reddit that if you are already happy with your existing setup with React Hook Form, then they wouldn’t suggest migrating right away:

“FWIW if you’re already happy with RHF I wouldn’t inherently suggest migrating away with it; it’s a well maintained library by a talented group of maintainers. It’s clearly not going anywhere – even with our entry in the space …”

You may not want to switch, but TanStack Form presents first-class type safety, server-side rendering (SSR) support and a consistent API across frameworks.

A technical detail that is subtle in the documentation, but worth highlighting is that TanStack Forms is using signals under the hood, more specifically TanStack Store, which in turn uses signals for its state management. The architectural choice of signals and their fine-grain reactivity should prevent unnecessary rerenders and ultimately lead to better performance across the board, especially when working with larger forms with complex validation rules.

For validation, the library follows the standard schema specification, which includes validation libraries such as Zod and Valibot. The benefit of following the standard schema specification means that TanStack Form is not tied to a single validation library, and instead can support a wide range of validation libraries that align with the standard schema interface.

TanStack is a collection of libraries to support common requirements in web development. Created by Tanner Linsley, it began with the popular data fetching library React Query (now known as TanStack Query). Since then the ecosystem has grown to include TanStack Table, TanStack Router, TanStack Virtual and now TanStack Form. The libraries are widely adopted across the front-end community with millions of downloads per month, TanStack Query alone currently has 9.5 million weekly downloads.

Developers can find the full documentation on the TanStack website, complete with detailed getting started guides, full API documentation and interactive examples. The project is also open source and hosted on GitHub.