Storybook 中的自动视觉测试，以及 React+TS 构建速度提升 2.2 倍

欢迎阅读最新的《Storybook 新闻》。下面，了解 Storybook 上个月的一些重大更新。内容包括：

• 🚀 视觉测试插件：现已进入私有 Alpha 测试阶段
• 🏎️ react-docgen v6 支持：React+TS 项目构建速度提升高达 2.2 倍
• 🔎 改进的 Bug 处理：崩溃报告的新分类
• 📚 更新的教程：如何运行视觉测试、设计系统中的 Storybook 以及交互测试

视觉测试插件 – 现已进入私有 Alpha 测试阶段

我们在八月份开始了对 Storybook 下一个重要功能的公告：视觉测试插件。

视觉测试插件允许您使用 Storybook 运行故事的自动测试。这些测试可以覆盖任何浏览器、视口和主题的组合。此外，它们全部由Chromatic 的云基础设施提供支持，可以同时运行。

该插件现已进入私有 Alpha 测试阶段，我们正在向早期访问列表中的用户发放邀请。要加入早期访问，请立即注册 →

react-docgen v6 支持

我们很高兴在 Storybook 中分享对 react-docgen v6 的首个 Canary 版本支持。这极大地加快了 React+TS 项目的启动时间。在中等规模的Mealdrop项目上，启动时间快了 2.2 倍，从 8.9 秒减少到 4.0 秒（约 55%）。

我们希望在 Storybook 8.0 中将 react-docgen v6 设置为默认。7.0 解决方案 react-docgen-typescript 会在整个项目源代码上运行 TypeScript 编译器，这很慢。react-docgen 速度更快，但直到最近，它对于实际项目来说还太有限。

我们非常希望您能在您的项目中测试新版本。通过遵循 Canary 版本中包含的开放 PR 上的说明来了解如何操作 ↓

将 `react-docgen` 更新到 6.0.x 并改进联合处理，作者 shilman · Pull Request #23825 · storybookjs/storybook

扩展 #22324 我做了什么 注意：这仅适用于 VITE 项目，目前不适用于 Webpack 项目！！！扩展 #22324：将 react-docgen 更新到 6.0.x 添加对 fs 解析器的支持 此外：添加实验性 su…

GitHubstorybookjs

改进崩溃报告的错误分类

由于存在不同的框架、渲染器、插件和其他技术，每个包含 Storybook 的项目几乎都是独一无二的。这使得我们很难发现 Storybook 在哪里以及如何不起作用。

我们用来分类问题的关键信息来源之一是用户的崩溃报告。崩溃报告是选择加入的，并且完全匿名，但它们极大地拓宽了我们对 Storybook 用例的覆盖范围。

为了能够从崩溃报告中获得更多信息，我们正在添加一种新的框架来对错误代码进行分类。这将帮助我们更快地识别和修复 Bug。

我们始终感谢您的支持以及用户所做的每一项贡献。为了帮助我们维护 Storybook，请考虑选择加入发送崩溃报告，或通过GitHub Issues向我们报告 Bug。谢谢！

新的学习资料

为了帮助您在 Storybook 的工作上更进一步并提高您的技能，我们发布了几项新的学习资源。

了解如何使用 Storybook 来维护您的设计系统 ↓

学习使用 Storybook 来测试组件的事件处理和交互 ↓

阅读我们更新的 2023 年 UI 视觉测试指南（通过Chromatic）↓

2023 年如何进行视觉回归测试 – Chromatic

学习如何有效地测试用户界面

Ink by ChromaticTom Coleman

社区招聘

我们在社区招聘板上有 87 个 Storybook 开发者的开放职位！目前，这些职位包括 JP Morgan、The Times、BT、eBay 等众多组织的招聘机会。

立即查看并申请 →