Back to blog

Storybook 8.1

A more productive, organized, and predictable Storybook

loading
Michael Shilman
@mshilman
Last updated:

Storybook is the industry standard workshop for building, testing, and documenting UI components. Thousands of developers use it every day, including teams at BBC, Etsy, and Dropbox.

Over the past year we’ve focused on quality of life maintenance work. This culminated in the March launch of Storybook 8.0, our most performant and stable release yet.

Now in 8.x, we’re back on the hunt to improve your UI development experience. To kick that off, I’m excited to announce a more productive, organized, and predictable Storybook 8.1:

  • 🤖 Story auto-generation and save from controls
  • 🥸 Type-safe, standards-based module mocking
  • ⚛️ Unit testing React Server Components
  • 🧳 Portable stories for Playwright Component Tests
  • 💯 Hundreds more improvements

New UI for creating and editing stories

Storybook’s atomic unit is the story, a small snippet of JavaScript that captures a component example. We’ve worked hard to make stories easy to read & write, but in 8.1 we’ve gone even further: you can now create and edit stories from Storybook’s UI and React projects can add stories for new components. To learn more, read the full announcement or check out the official documentation.

0:00
/0:19

Creating a new generated stories file for an Avatar component

Type-safe module mocking

Components can depend on a variety of inputs and contexts, like needing to be rendered inside a context or receiving data from network requests. When developing and testing, you will often need to mock these dependencies.

Storybook supports a variety of mocks: from passing props to your components, to wrapping them with decorators that control styling or context, to mocking out network requests with Mock Service Worker (MSW).

In 8.1, we’ve added module mocking to Storybook. This allows you to flexibly swap JS modules with controlled replacements. You can use this to mock component inputs from browser cookies, local storage, or meta-framework features like your application router.

Our module mocking is completely typesafe, and best of all, it is completely standards-based. To learn more, read our detailed post or see the official documentation.

A screenshot of a portion of a `package.json` file containing the code: {   "type": "module",   "imports": {     "#lib/db": {       "storybook": "./lib/db.mock.ts",       "default": "./lib/db.ts"     },     "#*": [       "./*",       "./*.ts",       "./*.tsx"     ]   } }
This configuration will add an absolute import for the lib/db module and automatically import the mock file when inside Storybook.

Unit testing React Server Components

Unlike end-to-end tests (E2E), unit tests are faster, less flaky, and allow you to break down your UI and its tests to more easily verify key states. Storybook’s new module mocking gives us the capability to unit test React Server Components (RSCs), by mocking the server modules they depend on. This is a major advancement for React, which until now has lacked a unit testing strategy for RSCs.

Because RSCs are primarily used in Next.js projects right now, the bulk of this work involved creating mocked versions of many Next.js modules. Those mocks are automatically spied and add key abilities—like being able to set cookie values—which you can use directly within your stories. To learn more, check out our example repo and look forward to the full announcement.

A screenshot of the `noteDetail.stories.ts` file, containing the code: import { cookies } from '@storybook/nextjs/headers.mock';  import { createUserCookie, userCookieKey } from '#lib/cookie'; import Page from './noteDetail';  const meta = {   component: Page, // Use an RSC component in Storybook!   async beforeEach() {     // Set a Next.js cookie before each story is rendered     cookies().set(userCookieKey, await createUserCookie('alice'))   },   parameters: {     nextjs: {       navigation: { pathname: '/note/[id]', query: { id: '1' } },     },   }, } satisfies Meta<typeof Page>
A stories file for an RSC Next.js page component, setting a cookie value using the mocked cookies utility.
Know what's better than unit tests for UI components? Visual tests! We just launched Visual Tests addon to automatically test stories across multiple browsers and viewports, without leaving Storybook. Develop faster and with more confidence.

Portable stories for Playwright Component Tests

One of the biggest benefits of developing in Storybook is that you get tests for free. Each isolated component example—or “story”—is a UI test. And if you want to test data fetching and user interactions, Storybook has tools for that too.

Now, for the first time, it is possible to easily reuse those stories in Playwright’s experimental component testing. This workflow combines Storybook’s component development and documentation with Playwright’s powerful test features. To learn more, read the full announcement or see the official documentation.

0:00
/0:26

Using Playwright's VS Code extension to record a test based on a story

Hundreds more improvements

In addition to the features above, every Storybook release contains hundreds of improvements and bug fixes at every level. Here are some highlights:

Try it today

Storybook 8.1 is available today. Try it in a new project:

npx storybook@latest init

Or upgrade an existing project:

npx storybook@latest upgrade

If you’re upgrading from 7.x, we have a guide to help you. We also have a guide for migrating from older versions.

What’s next

We are focused on two main projects for 8.2:

  1. Reducing Storybook install footprint and version conflicts
  2. Adding story lifecycle hooks for parity with other testing tools

For an up-to-date view on we’re working on and considering, please check out Storybook’s new roadmap.

Credits

Huge shoutout to the 58 contributors whose PRs feature in Storybook 8.1!

@43081j @abiriadev @ariperkkio @arnabsen @balazsorban44 @bashmish @benmccann @cdedreuille @chakas3 @cherry @deining @drik98 @eric-blue @ethriel3695 @fatcat560 @fyodorovandrei @ghengeveld @glenjamin @goodactive @hakshu25 @imgbotapp @inokawa @johnendson @jonniebigodes @jorge-ji @joshwooding @jpzwarte @jreinhold @justingish @jwilliams-met @kasperpeulen @kylegach @larsdouweschuitema @larsrickert @laurens94 @leeovictor @lifeiscontent @ndelangen @nkabrown @noranda @r4ai @rui-silva-beqom @scottdotjs @seanparmelee @shilman @shuta13 @simenb @sni-j @spanishpear @takurinton @tmeasday @tobbe @valentinpalkovic @vanessayuenn @xyy94813 @yannbf @yuemori @yukikitagata

Join the Storybook mailing list

Get the latest news, updates and releases

6,618 developers and counting

We’re hiring!

Join the team behind Storybook and Chromatic. Build tools that are used in production by 100s of thousands of developers. Remote-first.

View jobs

Popular posts

Type-safe module mocking in Storybook

A new, standards-based mocking approach
loading
Jeppe Reinhold

Interactive story generation

Make your first story in seconds without leaving the browser!
loading
Valentin Palkovic

Portable stories for Playwright Component Tests

Test your stories in Playwright CT with minimal setup.
loading
Yann Braga
Join the community
6,618 developers and counting
WhyWhy StorybookComponent-driven UI
DocsGuidesTutorialsChangelogTelemetry
CommunityAddonsGet involvedBlog
ShowcaseExploreProjectsComponent glossary
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI