
Storybook 8.3
极速组件测试

Storybook 是构建、测试和文档化 UI 组件的行业标准工作坊。全球数十万开发者日常使用它,包括微软、Spotify 和法拉利等团队。
我们最近宣布了 我们对 UI 测试未来的重大投入。组件测试是 E2E 测试的完美补充,它带来覆盖范围、控制力、速度和可靠性,与 E2E 的黑盒“整个系统”保真度相得益彰。
现在我很高兴宣布 Storybook 8.3。
Storybook,最好的组件开发工具,与 Vitest,世界上最快、可配置性最强的测试运行器,携手为您带来无与伦比的组件测试体验。
Storybook 8.3 带来了
- ⚡️ 一流的 Vitest 集成,将故事作为组件测试运行
- 🔼 面向 Vitest 兼容性和更佳 DX 的 Next.js-Vite 框架
- 🗜️ 减小捆绑包大小,安装占用空间更小
- 🌐 用于标准化主题、视口和语言环境故事的 Story globals API
- 💯 数百项更多改进
一流的 Vitest 集成
一个 故事 是一个 JavaScript 片段,它捕获了 UI 组件的示例;Storybook 是一个可浏览的故事目录,它列出了所有关键的 UI 状态。
除了目录之外,Storybook 也是一个可执行的测试套件。基本的故事是冒烟测试,用于渲染组件及其输入。复杂的故事可以模拟应用程序状态和网络请求,像用户一样与 UI 交互,并断言关于 DOM 或执行的某些事情——所有这些都是你在一个功能齐全的组件测试中所做的事情。
现在,在 Storybook 8.3 中,得益于 Storybook 的 Vitest 集成,可以在无头浏览器中以极快的速度将所有这些故事作为测试运行。

Storybook 从第一天起就进入了测试领域,所以我们知道什么是优秀的测试运行器。当我们第一次尝试 Vitest 的浏览器模式时,我们就知道它很特别。当天我们就与 Vitest 核心团队通了电话,探讨我们如何共同协作组件测试的未来。
今天,这种合作的第一个成果以 @storybook/experimental-addon-test
的形式可供使用。只需最少的配置,你现在就可以将你的故事作为 Vitest 测试运行。
这意味着
- 无与伦比的测试执行速度,
- Vitest CLI 出色的开发者体验 (DX),
- 开箱即用的测试覆盖率指标,
- 与 Vitest VSCode 扩展的兼容性,
- 在浏览器或 JSDom 中运行测试的灵活性,
- 故事的内联/文件快照测试,
- 以及更多。

我们还为 Vitest 带来了 Storybook 标志性的“点击调试”工作流程:当测试失败时,只需单击一下即可在浏览器中启动时间旅行调试器,精确检查出错的原因。
在接下来的几周里,我们将分享更多关于此集成的信息,但在此期间,你可以参考官方文档来开始使用。
Next.js Vite 框架
Vitest 集成的一个大问题是如何支持 Webpack 项目。
我们没有一个通用的答案,但对于 Next.js 项目(约占 Storybook 使用量的 20%),我们创建了一个 Vite 插件来模拟 Next.js 环境。该插件支持 Next 的优化图像/字体、SWC 配置以及对标准样式系统的开箱即用支持。
当你在 Next.js 项目中安装 Storybook Test 时,它会自动添加该插件,以便你在 Vitest 中测试客户端和服务器应用程序组件。
我们还使用该插件创建了一个 Next.js Vite 框架。这意味着你也可以使用 Storybook 的 Vite 构建器开发组件,它的启动速度和热模块替换 (HMR) 比默认的 Webpack 构建器快得多。许多用户已经手动配置了这一点,因为 Vite 的开发者体验 (DX) 要好得多。但手动配置通常对 Next.js 环境的模拟较差(除非你费很大力气)。现在我们已经为你解决了这些困难,我们认为这是一个巨大的改进。
结果在 @storybook/experimental-nextjs-vite
中可用,你可以通过安装该软件包并更新 .storybook/main.ts
来试用。
// .storybook/main.ts
export default {
- framework: '@storybook/nextjs',
+ framework: '@storybook/experimental-nextjs-vite',
};
要了解更多关于插件和框架的信息,请参阅 Next.js Vite 文档。
减小捆绑包大小
有超过 2 万名开发者参与调查,State of JS 调查是 JS 生态系统的风向标。在 2022 年有所下降后,我们改进 Storybook 的努力在 2023 年取得了惊人的成果。最大的抱怨是依赖管理不善:臃肿、安装占用空间和版本冲突。
在 8.2 中,我们将 18 个 Storybook 软件包整合到了一个核心软件包 storybook
中,这是为了实现更一致的软件包结构而进行的重大结构性更改。它还带来了额外的益处,即安装大小/时间减少了约 20%,以及锁文件(lockfile)新增行数减少了约 30%。
在 8.3 中,我们花了一些时间进行依赖去重,又额外减少了约 30% 的安装大小和约 35% 的锁文件新增行数。
这使得我们在 Vite React-TS 项目上,与 Storybook 8.1 相比,总体安装大小减少了 50%,锁文件减少了 65%。我们计划在 8.4 中再进行一轮清理,然后在 9.0 中进行一些小的破坏性更改,以进一步推进。
实验性故事全局设置
每个 Storybook 故事都捕获了 UI 组件的关键状态。多年来,我们一直努力优化故事语法,以便通过系统地改变其输入(通常是 props)来轻松捕获所有 UI 状态。
但 UI 状态也可以由组件上下文决定。例如,视口、主题、背景或国际化语言环境都是影响组件渲染方式的环境设置。
尽管这些环境设置很重要,但一直没有一个简单、标准的方法在故事或组件级别设置这些上下文变量。
在 8.3 中引入了“故事全局设置”这一新概念来解决这一问题
// RestaurantCard.stories.ts
import type { Meta, StoryObj } from '@storybook/react'
import { RestaurantCard } from './RestaurantCard'
const meta = {
component: RestaurantCard,
} satisfies Meta<typeof RestaurantCard>
export default meta
type Story = StoryObj<typeof meta>
export const Default: Story = {
args: {
id: '1',
name: 'Burger Kingdom',
rating: 4.2,
}
}
export const Dark: Story = {
...Default,
globals: { theme: 'dark' }
}
注意:导航到 Dark 故事会禁用主题工具栏菜单
更多信息请参阅实验性故事全局设置文档。
数百项更多改进
除了上述功能外,每个 Storybook 版本都包含各方面的数百项改进和错误修复。亮点包括
✅ Rsbuild。Rspack 团队一直在默默改进对 Rsbuild 的支持,并将其添加为 Storybook CLI 的新构建器。#28694 查看刚刚发布的 Rsbuild 1.0!
✅ 支持 Angular+Vite。查看新的 Analog 集成!
✅ 禁用保存参数。交互式故事生成可以使用控件值从 Storybook UI 创建新的故事。根据社区反馈,我们添加了一个参数来禁用此功能。#28734
✅ Vue 代码片段和内存管理改进。我们对 Vue 用于文档的源代码片段进行了一系列改进。#27194
✅ Vue 内存管理。我们还修复了 vue-component-meta 中用于自动控件推断的一些内存管理问题。#28589
立即试用!
Storybook 8.3 现已可用。在新项目中试用
npx storybook@latest init
或升级现有项目
npx storybook@latest upgrade
如果你正在从 7.x 升级,我们提供了一份指南来帮助你。我们还提供了从旧版本迁移的指南。
接下来
我们将在 8.4 中带来更多令人兴奋的改进
- 在 Storybook 中运行测试和可视化结果的 UI
- 交互式调试测试失败和警告的工作流程
- 进一步减小安装大小(我们正在进步!)
- 基于标签的交互式侧边栏过滤 UI
要了解我们正在进行和考虑的工作的最新信息,请查看 Storybook 的路线图。
鸣谢
特别感谢在 Storybook 8.3 中贡献了 PR 的 31 位贡献者!
@0916dhkim @43081j @abcdmku @aberllin @ahayes91 @aminghs @andrejilderda @averethel @bbboy01 @booc0mtaco @chakas3 @fi3ework @filipemelo2002 @ghengeveld @jonniebigodes @jreinhold @kasperpeulen @kylegach @kyletsang @larsrickert @marklb @ndelangen @shilman @skred @tmeasday @tobiasdiez @valentinpalkovic @vanessayuenn @vincentdevreede @yannbf
Storybook 8.3!
— Storybook (@storybookjs) 2024年9月24日
⚡️ 一流的 Vitest 集成,将故事作为组件测试运行
🔼 面向 Vitest 兼容性 & 更佳 DX 的 Next.js-Vite 框架
🗜️ 减小捆绑包大小,安装空间减少 30%
🌐 用于标准化主题、视口和语言环境故事的 Story globals API
👇 pic.twitter.com/6Yctgg8IzH