結論
事半功倍
開發人員花費 21% 的時間在修復錯誤。測試有助於減少您需要做的工作量,方法是捕獲缺陷並加速除錯。但是,每個新功能都會引入更多需要測試的 UI 和狀態。保持生產力的唯一方法是實施直覺式的測試工作流程。
從將測試案例編寫為 Story 開始。您可以在 Jest、Chromatic 和 Axe 等測試工具中重複使用它們。研究表明,重複使用程式碼可以節省 42-81% 的開發時間。
在開發期間,在編寫程式碼時進行測試,以獲得快速的回饋迴圈,並在錯誤進入生產環境之前捕獲它們。在生產環境中修復錯誤的成本是 10 倍!

最後,使用 CI 伺服器在整個 UI 上執行所有檢查,以防止意外的迴歸。微軟的研究支持的研究表明,透過自動化測試,您可以發現缺陷減少 20.9%。
當您的測試通過時,您將有信心您的 UI 沒有錯誤。
我希望將這些學習內容濃縮成實用的工作流程,有助於您實施自己的可靠測試策略。讓這成為您的起點。
本教學的範例程式碼
如果您一直在跟著編碼,您的儲存庫和部署的 Storybook 應該看起來像這樣
更多資源
想要更多嗎?這裡有一些額外的實用資源
- 視覺化測試手冊 是一本深入探討 UI 外觀測試的指南,其中包含來自 BBC、Adobe、Target 等領先工程團隊的經驗。
- 如何使用 Storybook 測試 UI 詳細說明了如何使用 Storybook 進行 UI 測試。
- Discord 聊天室 讓您與 Storybook 社群和維護者聯繫。
- 部落格 展示了最新的版本和功能,以簡化您的 UI 開發工作流程。
感謝您與我們一同學習。訂閱 Storybook 電郵列表,以便在發布像這樣有用的文章和指南時收到通知。