[{"data":1,"prerenderedAt":203},["ShallowReactive",2],{"post-\u002Fblog\u002Funit-test":3,"post-surroundings":169},{"id":4,"title":5,"body":6,"date":155,"description":156,"desktopCover":26,"extension":157,"isPopular":158,"meta":159,"mobileCover":160,"navigation":161,"path":162,"seo":163,"slug":162,"stem":164,"tags":165,"__hash__":168},"blog\u002Fblog\u002Funit-test.md","掌握前端測試：從單元測試到端對端測試的完整攻略",{"type":7,"value":8,"toc":148},"minimark",[9,20,128,131],[10,11,12,16],"content-space",{},[13,14,15],"h2",{"id":15},"前言",[17,18,19],"p",{},"測試是前端開發中不可或缺的一環，能在程式部署到生產環境前發現問題、避免使用者遭遇錯誤。從最小粒度的單元測試，到模擬真實使用者互動的端對端測試，各有其應用場景與優勢。接下來，我們將依序介紹三大測試階段與實務建議，幫助你建立完善的測試流程。",[10,21,22,27,30,66,94,122],{},[23,24],"prose-img",{"alt":25,"src":26},"前言圖片","\u002Fdesktop\u002Fblog\u002Funit-test.webp",[13,28,29],{"id":29},"三大測試階段與關鍵做法",[31,32,33,38,48,53],"content-block",{},[34,35,37],"h3",{"id":36},"一單元測試unit-testing","一、單元測試（Unit Testing）",[17,39,40,44,47],{},[41,42,43],"strong",{},"為何重要",[45,46],"br",{},"\n單元測試聚焦在最小功能單位，能精準驗證函式、元件或工具函式的行為是否符合預期，快速定位問題來源。",[17,49,50],{},[41,51,52],{},"建議做法",[54,55,56,60,63],"ul",{},[57,58,59],"li",{},"建立測試檔案與程式檔案並行存放，命名要清晰易對應。",[57,61,62],{},"針對各種輸入和邊界條件撰寫測試案例，確保各種情境下的輸出都正確。",[57,64,65],{},"持續整合（CI）中自動執行單元測試，避免任何錯誤未經檢查即合併。",[31,67,68,72,79,83],{},[34,69,71],{"id":70},"二組件測試integration-testing","二、組件測試（Integration Testing）",[17,73,74,76,78],{},[41,75,43],{},[45,77],{},"\n組件測試關注多個元件或模組之間的互動，確認資料流與狀態管理在整體協作時不會出錯。",[17,80,81],{},[41,82,52],{},[54,84,85,88,91],{},[57,86,87],{},"在測試環境中模擬狀態管理（如 Redux、Vuex）或 API 資料，確保組件在整合後仍能正常運作。",[57,89,90],{},"為常見使用場景撰寫流程測試，例如登入流程、表單提交等，檢查 UI 更新與後端互動是否正確。",[57,92,93],{},"使用虛擬 DOM 渲染與快照測試，驗證 UI 輸出無誤。",[31,95,96,100,107,111],{},[34,97,99],{"id":98},"三端對端測試e2e-testing","三、端對端測試（E2E Testing）",[17,101,102,104,106],{},[41,103,43],{},[45,105],{},"\n端對端測試從使用者角度出發，模擬真實瀏覽器操作，涵蓋完整流程，能捕捉到環境配置或組件整合層面才會出現的問題。",[17,108,109],{},[41,110,52],{},[54,112,113,116,119],{},[57,114,115],{},"選擇合適框架（如 Cypress、Playwright），以真實瀏覽器模式執行測試。",[57,117,118],{},"建立重要路徑的測試腳本，如用戶註冊、購物車結帳等，並在 CI\u002FCD 部署流程中自動跑一遍。",[57,120,121],{},"定期更新測試案例，隨著產品功能演進，一併維護測試腳本。",[123,124,125],"blockquote",{},[17,126,127],{},"小結：完整的測試策略應涵蓋單元、組件到端對端，並搭配持續整合自動化執行。透過這三大階段，你的前端專案將更穩健、錯誤率更低、維護成本也會大幅下降。",[13,129,130],{"id":130},"延伸閱讀",[54,132,133,138,143],{},[57,134,135],{},[41,136,137],{},"測試驅動開發（TDD）全流程實踐",[57,139,140],{},[41,141,142],{},"Cypress 官方使用指南：從入門到進階",[57,144,145],{},[41,146,147],{},"前端持續整合：在 CI\u002FCD 中加入測試與部署",{"title":149,"searchDepth":150,"depth":150,"links":151},"",2,[152,153,154],{"id":15,"depth":150,"text":15},{"id":29,"depth":150,"text":29},{"id":130,"depth":150,"text":130},"2024-02-07","寫程式容易，但要確保程式在多種情境、裝置都能正常運行就沒那麼簡單了。這時「測試」便成了維持程式品質的關鍵環節。從最基礎的單元測試，到模擬使用者行為的端對端測試，每一種測試方式都有它的價值與最佳應用情境。本文將帶你認識不同類型的前端測試工具，以及如何在開發流程中實踐自動化測試，打造更穩定、可預期的專案。","md",false,{},"\u002Fmobile\u002Fblog\u002Funit-test.webp",true,"\u002Fblog\u002Funit-test",{"title":5,"description":156},"blog\u002Funit-test",[166,167],"測試框架","品質保證","HXiDS7go4sg7ra3RIP-J7iAylTlb38sIqzzbIJPqBGQ",[170,173,176,179,182,185,188,191,194,197,200,202],{"slug":171,"path":171,"date":172},"\u002Fblog\u002Fstart-from-scratch","2024-10-21",{"slug":174,"path":174,"date":175},"\u002Fblog\u002Freact-intro","2024-10-11",{"slug":177,"path":177,"date":178},"\u002Fblog\u002Fgood-resume","2024-09-07",{"slug":180,"path":180,"date":181},"\u002Fblog\u002Fcss-magic","2024-09-03",{"slug":183,"path":183,"date":184},"\u002Fblog\u002Fmental-journey","2024-07-09",{"slug":186,"path":186,"date":187},"\u002Fblog\u002Fjob-interview","2024-07-08",{"slug":189,"path":189,"date":190},"\u002Fblog\u002Fvue3-composition-api","2024-06-29",{"slug":192,"path":192,"date":193},"\u002Fblog\u002Fgit","2024-05-04",{"slug":195,"path":195,"date":196},"\u002Fblog\u002Fseo","2024-05-01",{"slug":198,"path":198,"date":199},"\u002Fblog\u002Fautomation","2024-02-17",{"slug":201,"path":201,"date":199},"\u002Fblog\u002Ftypescript",{"slug":162,"path":162,"date":155},1793785242410]