返回UI 测试手册
React
章节
  • 简介
  • 视觉
  • 组合
  • 交互
  • 可访问性
  • 用户流程
  • 自动化
  • 工作流
  • 结论

结论

少即是多,提高效率
此社区翻译尚未更新到最新的 Storybook 版本。请将英文指南中的更改应用到此翻译中,帮助我们更新它。 欢迎提交 Pull Request.

开发者花费21% 的时间修复 bug。测试通过捕获缺陷和加速调试来减少您的工作量。但是每个新功能都会引入更多需要测试的 UI 和状态。保持高效的唯一方法是实施直观的测试工作流程。

首先编写测试用例作为故事。您可以在 Jest、Chromatic 和 Axe 等测试工具中重用它们。研究表明,重用代码可以节省42-81%的开发时间。

在开发过程中,边编码边测试,以获得快速反馈循环,并在上线前捕获 bug。修复生产环境中的 bug 比在开发阶段修复成本高 10 倍

PR checks for all types of UI testing: visual, interaction, accessibility, composition and user flows

最后,使用 CI 服务器在整个 UI 上运行所有检查,以防止意外回归。微软的研究表明,通过自动化测试,您可以减少 20.9% 的缺陷

当您的测试通过时,您将确信您的 UI 没有 bug。

我希望将这些经验总结成一个实用的工作流程,能帮助您建立自己的稳健的测试策略。以此为起点。

本教程的示例代码

如果您一直在同步编码,您的存储库和已部署的 Storybook 应该看起来像这样

更多资源

想要更多?这里有一些额外的有用资源

  • 视觉测试手册 是一份深入的 UI 外观测试指南,其中包含 BBC、Adobe、Target 等领先工程团队的经验。
  • 如何使用 Storybook 测试 UI 详细介绍了如何将 Storybook 用于 UI 测试。
  • Discord 聊天 让您与 Storybook 社区和维护者取得联系。
  • 博客 展示最新的版本和功能,以简化您的 UI 开发工作流程。

感谢与我们一起学习。订阅 Storybook 邮件列表,以便在发布类似本文的有用的文章和指南时收到通知。

这个免费指南对您有帮助吗?请在 Twitter 上分享以表示赞赏,并帮助其他开发者发现它。
✍️ 在 GitHub 上编辑 – PR 欢迎!
加入社区
7,424开发者及更多
原因为什么选择 Storybook组件驱动的 UI
文档指南教程更新日志遥测
社区插件参与进来博客
展示探索关于
开源软件
Storybook - Storybook 中文

特别感谢 Netlify CircleCI