返回博客

Storybook 9 现已进入 Beta

立即体验未来的 UI 测试

loading
Michael Shilman
@mshilman
最后更新

Storybook 9 是我们迄今为止最宏伟的版本。Beta 版本意味着 9 已功能完备,可用于您的项目,但我们仍需要您的帮助来冲刺终点。

我们的目标是将 Storybook 打造成一个精简、高效的测试机器。以下是其包含的内容:

🚥 组件测试小部件
▶️ 交互测试
♿️ 可访问性测试
👁️ 可视化测试
🛡️ 测试覆盖率
🪶 Bundle 体积减少 48%
🏷️ 基于标签的组织
⚛️ 适用于设备和 Web 的 React Native

Storybook's test widget. It's titled "Run components tests". Under that is "Testing... 1/97" with an eye and stop icons beside them. Then three rows of checkboxes labeled, Interactions, Coverage, and Accessibility, each with a gray status dot. Under that is another section, titled "Run visual tests in cloud". The final section has a "Run tests" button.

组件测试

组件测试是 UI 测试中的“金发姑娘”,它结合了单元测试的速度和可靠性以及端到端 (E2E) 测试的浏览器内真实性。与更适合少量“快乐路径”用户流程的 E2E 测试不同,组件测试可以编写和维护成千上万个,为您提供对所有关键 UI 状态的全面覆盖。

我们与生态系统中最快的测试运行器 Vitest 合作,创建了一个卓越的工具,用于在开发时测试您的组件。

交互测试

交互测试可帮助您模拟用户行为并断言组件功能正常。现在,它们可以单独运行、批量运行或在整个 Storybook 中运行。启用监视模式即可在您保存更改时运行它们。

Storybook with the Filled Form story for the LoginForm component open. The Interactions panel is open, showing a passing test with the interactive debugger and each step of the interaction, all of which are successful.

可访问性测试

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

Storybook, with the Empty Form story of the LoginForm component open. In the preview, a gray button is highlighted and a popover informs about a color contrast ratio violation. The Accessibility panel is open and more details about that violation are shown.

可视化测试

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

Storybook with the Primary story of the Button component open. The Visual tests panel is open, showing a visual diff between the baseline and the latest snapshot.

测试覆盖率

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

Two browser windows. The foreground window shows an interactive coverage report. Many of the files have 100% coverage and are highlighted green, but card.tsx has 74% and is highlighted yellow. The background window shows Storybook's sidebar, where the coverage summary of 95% is visible.

体积减轻 48%

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

Dependency graph, Before, A full-height, very complex dependency graph. After, a much simpler graph approximately 10% the size of the other one.
Storybook 8(左)与 9(右)的依赖关系图

基于标签的组织

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

Storybook's sidebar with the filter menu on the search bar open. There are two options, experimental and play-fn. The sidebar has been filtered to only show the Experimental Feature story under the Button component.

随处可用的 React Native

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

Marcelo Prado 的 React Native Flash 日历在 RNW 和 RN 中并行运行。RNW Storybook 包含文档和测试插件。一次测试运行显示该日历通过了所有 WCAG 可访问性检查!

使用自动迁移轻松升级

您今天可以使用一个命令将项目升级到 Beta 版本

npx storybook@next upgrade

我们的自动迁移系统将检测任何相关的重大更改,并逐步指导您完成该过程,尽可能提供代码转换以实现自动化。我们还提供了一份 迁移指南 以帮助填补空白。

我们需要您对 9 Beta 版本的反馈

我们已经进行了多轮全面测试,因此您应该能够顺利升级。但我们测试的项目越多越好。如果您的项目有任何问题,请通过提交GitHub 问题告诉我们。整个团队都在随时待命,准备修复 bug 并解答问题。

Storybook 9 现已进入 Beta 版本!您今天就可以尝试。让我们看看里面有什么…

Storybook (@storybook.js.org) 2025-04-24T20:03:42.562Z

加入 Storybook 邮件列表

获取最新新闻、更新和发布信息

7,180开发者及以上

我们正在招聘!

加入 Storybook 和 Chromatic 背后的团队。构建数十万开发者在生产中使用的工具。远程优先。

查看职位

热门帖子

抢先看:可访问性插件更新

我们如何在 Storybook 9.0 中彻底改进可访问性插件
loading
Dominic Nguyen

Storybook 8.5

触手可及的可访问性
loading
Michael Shilman

Storybook 标签

根据您的工作方式组织组件和故事
loading
Michael Shilman
加入社区
7,180开发者及以上
原因为什么选择 Storybook组件驱动的 UI
文档指南教程更新日志遥测
社区插件参与贡献博客
案例展示探索项目组件词汇表
开源软件
Storybook - Storybook 中文

特别感谢 Netlify CircleCI