结论

开发者花费 21% 的时间修复错误。调试 UI 外观尤其令人沮丧。重现错误需要您启动不同的浏览器，将应用置于正确的状态，并仔细检查 DOM。风险也更高；在生产环境中修复未捕获的错误比在 QA 中修复错误花费的时间多 5-10 倍。

因此，数千个前端团队使用 Storybook 进行可视化测试是很常见的。Storybook 帮助您构建组件并编写可视化测试。在组件级别运行测试可帮助您查明错误的根本原因。拍摄图像快照有助于您自动捕获回归错误。这意味着人们可以交付 UI，而无需担心隐藏的错误。

本指南向您介绍了可视化测试的基础知识。Tom 和我希望您可以在自己的项目中运用这些知识。加入 Storybook 邮件列表，以便收到更多类似的有用的文章和指南的通知。

本教程的示例代码

如果您一直在关注本教程，那么您的存储库和已部署的 Storybook 应该如下所示

• 📕 GitHub 存储库
• 🌎 已部署的 Storybook

更多资源

想要深入了解吗？这里有一些额外的有用资源

• Storybook 官方文档 包含 API 文档、示例和插件库。

• 如何真正地测试 UI 总结了来自 Shopify、Adobe、Twilio 等公司的实用 UI 测试策略。

• Discord 聊天 让您与 Storybook 社区和维护者取得联系。

• 博客 展示最新的版本和功能，以简化您的 UI 开发工作流程。