
Storybook 9 现已进入 Beta
立即体验未来的 UI 测试

Storybook 9 是我们迄今为止最宏伟的版本。Beta 版本意味着 9 已功能完备,可用于您的项目,但我们仍需要您的帮助来冲刺终点。
我们的目标是将 Storybook 打造成一个精简、高效的测试机器。以下是其包含的内容:
🚥 组件测试小部件
▶️ 交互测试
♿️ 可访问性测试
👁️ 可视化测试
🛡️ 测试覆盖率
🪶 Bundle 体积减少 48%
🏷️ 基于标签的组织
⚛️ 适用于设备和 Web 的 React Native

组件测试
组件测试是 UI 测试中的“金发姑娘”,它结合了单元测试的速度和可靠性以及端到端 (E2E) 测试的浏览器内真实性。与更适合少量“快乐路径”用户流程的 E2E 测试不同,组件测试可以编写和维护成千上万个,为您提供对所有关键 UI 状态的全面覆盖。
我们与生态系统中最快的测试运行器 Vitest 合作,创建了一个卓越的工具,用于在开发时测试您的组件。
交互测试
交互测试可帮助您模拟用户行为并断言组件功能正常。现在,它们可以单独运行、批量运行或在整个 Storybook 中运行。启用监视模式即可在您保存更改时运行它们。

可访问性测试
我们已经彻底改进了可访问性工作流程。就像上面描述的功能测试一样,您现在可以在所有故事中运行可访问性测试,并通过全新高效的 UI 检查违规情况。

可视化测试
只需单击一个按钮,您就可以可视化测试所有故事,精确到像素地找出差异。

测试覆盖率
只需单击一个按钮,您就可以计算测试覆盖率以精确找出您的组件测试覆盖了哪些行、函数和分支。

体积减轻 48%
Storybook 9 的体积不到 Storybook 8 的一半。其依赖结构也更加扁平;安装速度更快,并且不会与您项目的任何依赖项冲突。

基于标签的组织
Storybook 标签是在侧边栏中组织和过滤故事的新方法。

随处可用的 React Native
我们带来了官方的React Native 的 Web 支持,为 React Native 带来了与 Storybook 文档和测试功能的完全兼容性!

使用自动迁移轻松升级
您今天可以使用一个命令将项目升级到 Beta 版本
npx storybook@next upgrade
我们的自动迁移系统将检测任何相关的重大更改,并逐步指导您完成该过程,尽可能提供代码转换以实现自动化。我们还提供了一份 迁移指南 以帮助填补空白。
我们需要您对 9 Beta 版本的反馈
我们已经进行了多轮全面测试,因此您应该能够顺利升级。但我们测试的项目越多越好。如果您的项目有任何问题,请通过提交GitHub 问题告诉我们。整个团队都在随时待命,准备修复 bug 并解答问题。
Storybook 9 现已进入 Beta 版本!您今天就可以尝试。让我们看看里面有什么…
— Storybook (@storybook.js.org) 2025-04-24T20:03:42.562Z