结论

开发者花费 21% 的时间来修复 bug。调试 UI 外观可能特别令人沮丧。重现问题需要启动不同的浏览器，将应用调整到正确状态，并仔细检查 DOM。风险也更高；在生产环境中修复未捕获的 bug 所花费的时间是在 QA 环境中的 5-10 倍。

因此，成千上万的前端团队使用 Storybook 进行可视化测试是理所当然的。Storybook 帮助你构建组件并编写可视化测试。在组件级别运行测试可以帮助你查明 bug 的根本原因。捕获图像快照有助于自动捕获回归。这意味着人们可以发布 UI，而无需担心潜藏的 bug。

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

本教程的示例代码

如果你一直跟着操作，你的仓库和已部署的 Storybook 应该像这样

• 📕 GitHub 仓库
• 🌎 已部署的 Storybook

更多资源

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

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

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

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

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