Storybook 8.5

Storybook 是构建、文档化和测试 UI 组件的行业标准工作坊。每周有数十万开发者使用它，包括 Brex、Slack 和 Audi 的团队。

Storybook Test 是我们努力将最佳实践的组件测试引入前端开发的产品，它使其变得快速且简单。组件测试之所以快速，是因为你无需启动整个产品堆栈即可测试你的 UI。而 Storybook 的组件测试之所以简单，是因为我们提供了一种更好的方式来编写、运行和调试测试，并带有实时反馈。

但一个 UI 按照预期工作，并不意味着它对每个人都无障碍。即使精心设计的用户界面，也可能无意中排除了有视力、听力、运动或认知障碍的用户。

这就是为什么我很高兴宣布 Storybook 8.5。我们升级了 Storybook 广受欢迎的无障碍功能 (a11y) 插件，使其在开发过程中对所有 Stories 运行 Axe a11y 检查。这使得确保你的 UI 符合基本的无障碍功能指南变得前所未有的容易。

Storybook 8.5 包含

• ♿️ 实时无障碍功能测试，帮助为所有人构建 UI
• 🛡️ 项目代码覆盖率，衡量测试的完整性
• 🎯 聚焦测试，实现更快的测试反馈
• ⚛️ React Native Web Vite 框架，用于测试移动 UI
• 🎁 Storybook 测试训练营，提升你的测试水平
• 💯 数百项更多改进

实时无障碍功能测试

无障碍功能 (a11y) 在现代用户界面中越来越重要。它正成为私人服务的强制要求，例如将于 2025 年 6 月生效的 欧洲无障碍法案，并且已经在全球许多政府服务中强制执行。

Storybook 的无障碍功能插件 @storybook/addon-a11y，会检查你的 Stories 是否存在常见的 a11y 问题。它基于 axe-core 构建，这是一个行业标准的库，使用一套实现了 Web 内容无障碍指南 (WCAG) 和一系列最佳实践的规则来检查 DOM。

到目前为止，你需要浏览到某个 Story，诊断其违规之处，然后修复它们。

这是手动改进 UI 无障碍功能的一个很棒的工作流程。然而，它并不能帮助你理解代码更改对整个 UI 的影响。

现在在 Storybook 8.5 中，你可以一键对整个 Storybook 运行相同的 a11y 套件，并获得每个 Story 的实时反馈。请继续关注关于无障碍功能改进的详细文章！

项目代码覆盖率

组件测试的一个巨大好处是它们速度快且相对稳定（无闪烁）。这意味着你可以在测试中覆盖所有关键的 UI 状态 — 这在使用端到端测试时是不切实际的。

但你如何知道哪些内容已经被测试了？代码覆盖率衡量你的 UI 代码中哪些行/分支在每次测试运行时被执行到，这是帮助确保你的测试套件完整性的绝佳方法。

为了展示这些信息，我们将覆盖率功能内置到了 Storybook Test UI 中

当你选择启用时，Storybook Test 会在测试运行期间收集覆盖率，并在 UI 中显示摘要。点击结果可以打开完整的报告，在那里你可以看到项目中每个文件的详细结果，甚至包括单行/分支的结果。

Storybook Test Coverage 在 Storybook 8.5 中可用。请参阅文档了解详细信息。

聚焦测试

Storybook Test 建立在即时反馈的原则之上，这就是为什么它会在你构建组件的工作坊中显示测试结果。我们与 Vitest 合作以实现极快的测试速度，但当你的 Storybook 增长到数百或数千个 Stories 时，完整的测试运行可能会变慢。

这就是我们引入聚焦测试的原因，它允许你在 Storybook 的层级侧边栏中测试单个 Story、组件或一组组件。在实践中，我们发现在处理未被重用的组件时，这非常有用，同时仍然可以在 CI 中进行完整的测试运行来捕获未知问题。

Storybook 聚焦测试在 Storybook 8.5 中可用。请参阅文档了解详细信息。

React Native Web Vite 框架

最近发布的 React Native Storybook 8 在你的移动设备或模拟器上以原生保真度构建 React Native (RN) 用户界面方面提供了更高级别的体验。

但是如果你想使用 Storybook Docs 为你的原生组件编写文档或使用 Storybook Test 测试它们怎么办？React Native Web Vite (RNW-Vite) 框架使用 React Native Web 在浏览器中渲染你的 RN Stories。与原生版本不同的是，它与 Storybook 的 500 多个公共插件完全兼容。

RNW-Vite 是一个官方支持的框架，它将取代社区维护的、基于 Webpack 的 RNW 插件。与前身相比，它更快、更容易设置，并且与需要基于 Vite 框架的 Storybook Test 兼容。

RNW-Vite 在 Storybook 8.5 中可用。请参阅文档了解详细信息。

Storybook 测试训练营

在过去的两个月里，我们完成了 Storybook Test 早期访问计划的首次迭代。400 多名参与者加入我们，试用并提供了关于新测试功能的反馈，并获得了 Storybook 维护者的实际帮助。Storybook 8.5 是他们反馈的成果！非常感谢所有参与者！

我们决定继续该计划——这次以Storybook 测试训练营的形式——以帮助更多人对在 Storybook 中进行测试感到兴奋，尤其是在无障碍功能和覆盖率测试现已可用之后。我们很快会发送更多详细信息，请注册以了解更多。

👉 注册参加 Storybook 测试训练营

数百项更多改进

除了上述功能，每个 Storybook 版本都包含数百项各层面的改进和错误修复。一些亮点如下：

• ✅ React 19 支持
• ✅ Vite 6 支持
• ✅ Angular 19 支持 #29659 #29677
• ✅ Code 插件面板 #29253
• ✅ Bun 实验性支持 #29267
• ✅ Svelte Storybook Test 支持 #30105
• ✅ Nuxt 实验性支持 #28607

立即尝试！

Storybook 8.5 现已可用。在新项目中尝试：

npx storybook@latest init

或升级现有项目：

npx storybook@latest upgrade

如果你正在从 7.x 升级， 我们有指南帮助你。我们还提供 从更早版本迁移的指南。

下一步是什么？

在 Storybook 9 发布之前，我们还有一个次要版本。以下是正在进行的工作：

• 用于类型安全和自动完成的 CSF 工厂
• 新项目的测试和 Docs 安装
• Storybook Test 修复和改进

要了解我们正在进行和考虑的工作的最新情况，请查看 Storybook 的路线图。

致谢

特别鸣谢在 Storybook 8.5 中贡献了 PR 的 36 位贡献者！

@borgund @daleseo @dannyhw @ghengeveld @grantwforsythe @ianvs @ingowagner @jameshenry @joca96 @johannesfischer @jonniebigodes @jreinhold @kasperpeulen @kylegach @larsrickert @leosvelperez @mrginglymus @ndelangen @radovenchyk @rdebeasi @schallerala @sentience @shilman @sidnioulz @slax57 @spanishpear @tmeasday @tobiasdiez @toothlessdev @valentinpalkovic @valeras @vanessayuenn @yannbf