Storybook 中的自动可视化测试，以及 React+TS 项目 2.2 倍速的构建时间

欢迎来到 Storybook 最新动态。在下面了解上个月 Storybook 领域的一些最大变化。亮点包括

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

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

我们在 8 月初宣布了 Storybook 的下一个大动作：可视化测试插件。

可视化测试插件让您可以使用 Storybook 运行 Story 的自动测试。这些测试可以覆盖浏览器、视口和主题的任意组合。此外，它们都由 Chromatic 的云基础设施 提供支持，同时运行。

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

react-docgen v6 支持

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

我们希望 react-docgen v6 成为 Storybook 8.0 中的默认设置。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 用例的覆盖范围。

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

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

新的学习材料

为了帮助您进一步使用 Storybook 并提高您的技能，我们发布了一些新的学习资源。

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

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

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

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

了解如何有效地测试用户界面

Ink by ChromaticTom Coleman

社区职位

我们在我们的社区职位板上有 87 个 Storybook 开发人员的空缺职位！目前，这些职位包括摩根大通、泰晤士报、英国电信、eBay 等组织的职位机会

立即查看并申请 →