返回UI 測試手冊
React
章節
  • 簡介
  • 視覺
  • 組合
  • 互動
  • 無障礙
  • 使用者流程
  • 自動化
  • 工作流程
  • 結論

結論

事半功倍

開發人員花費 21% 的時間在修復錯誤。測試有助於減少您需要做的工作量,方法是捕獲缺陷並加速除錯。但是,每個新功能都會引入更多需要測試的 UI 和狀態。保持生產力的唯一方法是實施直覺式的測試工作流程。

從將測試案例編寫為 Story 開始。您可以在 Jest、Chromatic 和 Axe 等測試工具中重複使用它們。研究表明,重複使用程式碼可以節省 42-81% 的開發時間

在開發期間,在編寫程式碼時進行測試,以獲得快速的回饋迴圈,並在錯誤進入生產環境之前捕獲它們。在生產環境中修復錯誤的成本是 10 倍

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

最後,使用 CI 伺服器在整個 UI 上執行所有檢查,以防止意外的迴歸。微軟的研究支持的研究表明,透過自動化測試,您可以發現缺陷減少 20.9%

當您的測試通過時,您將有信心您的 UI 沒有錯誤。

我希望將這些學習內容濃縮成實用的工作流程,有助於您實施自己的可靠測試策略。讓這成為您的起點。

本教學的範例程式碼

如果您一直在跟著編碼,您的儲存庫和部署的 Storybook 應該看起來像這樣

更多資源

想要更多嗎?這裡有一些額外的實用資源

感謝您與我們一同學習。訂閱 Storybook 電郵列表,以便在發布像這樣有用的文章和指南時收到通知。

這個免費指南對您有幫助嗎?發推文表達讚賞,並幫助其他開發人員找到它。
✍️ 在 GitHub 上編輯 – 歡迎 PR!
加入社群
6,721位開發人員及更多
為何為何選擇 Storybook組件驅動的 UI
開源軟體
Storybook - Storybook 繁體中文

特別感謝 Netlify CircleCI