Storybook 8.5

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

Storybook Test 是我们为了将最佳实践组件测试引入前端开发而做的努力，使其快速和简单。组件测试是快速的，因为您无需启动整个产品堆栈来测试您的 UI。Storybook 的组件测试是简单的，因为我们有一种更好的方式来编写、运行和调试具有实时反馈的测试。

但仅仅因为 UI 按预期工作，并不意味着它对所有人都是可访问的。即使是精心设计的用户界面也可能无意中排除有视觉、听觉、运动或认知障碍的用户。

这就是为什么我很高兴地宣布 Storybook 8.5 的发布。我们已升级 Storybook 流行的可访问性 (a11y) 插件，以便在您开发时对所有故事运行 Axe a11y 检查。这使得确保您的 UI 符合基本 a11y 指南变得非常容易。

Storybook 8.5 包括

• ♿️ 实时可访问性测试，帮助为所有人构建 UI
• 🛡️ 项目代码覆盖率，衡量测试的完整性
• 🎯 专注测试，实现更快的测试反馈
• ⚛️ React Native Web Vite 框架，用于测试移动 UI
• 🎁 Storybook 测试训练营，提升您的测试技能
• 💯 数百项更多改进

实时可访问性测试

可访问性 (a11y) 在现代用户界面中变得越来越必要。它正成为私营服务的强制要求，例如 欧洲可访问性法案 将于 2025 年 6 月生效，并且已在世界各地的许多政府服务中强制执行。

Storybook 的可访问性插件 @storybook/addon-a11y，检查您的故事是否存在常见的 a11y 问题。它基于 axe-core 构建，这是一个行业标准库，它使用一套 规则 检查 DOM，这些规则实现了 Web 内容可访问性指南 (WCAG) 以及最佳实践的集合。

到目前为止，您需要浏览到一个故事，诊断其违规行为，然后修复它们。

这是一个手动改进 UI 可访问性的绝佳工作流程。但是，它无助于您了解代码更改对整个 UI 的影响。

现在在 Storybook 8.5 中，您可以对整个 Storybook 运行相同的 a11y 套件，并通过单击一个按钮获得每个故事的实时反馈。请继续关注有关可访问性改进的详细文章！

项目代码覆盖率

组件测试的一大好处是它们快速且相对无干扰。这意味着您可以在测试中覆盖所有关键 UI 状态 — 这对于端到端测试来说是不切实际的。

但是您如何知道哪些内容已被测试？代码覆盖率衡量您的 UI 代码的哪些行/分支正在通过您的每个测试运行，并且是帮助确保您的测试套件完整的绝佳方法。

为了展示此信息，我们在 Storybook Test UI 中构建了覆盖率

当您选择加入时，Storybook Test 会在测试运行期间收集覆盖率，并在 UI 中显示摘要。单击结果以调出完整报告，您可以在其中查看项目中每个文件的详细结果，甚至包括各个行/分支。

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

专注测试

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

这就是为什么我们引入了专注测试，它允许您在 Storybook 的分层侧边栏中测试单个故事、组件或组件组。在实践中，我们发现这在处理未重用的组件时很有帮助，同时仍然在 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 故事。与原生版本不同，它与 Storybook 的 500 多个公共插件完全兼容。

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

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
• ✅ 代码插件面板 #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 工厂
• 新项目的测试和文档安装
• Storybook Test 修复和改进

要了解我们正在做什么和考虑什么，请查看 Storybook 的路线图。

致谢

非常感谢 36 位贡献者，他们的 PR 出现在 Storybook 8.5 中！

@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