iT邦幫忙

鐵人檔案

2025 iThome 鐵人賽
回列表
Modern Web

React TDD 實戰:用 Vitest 打造可靠的前端應用 系列

本系列將帶領讀者從零開始學習如何在 React 開發中實踐測試驅動開發(TDD)。透過 30 天的實戰練習,您將掌握使用 Vitest 測試框架撰寫前端測試的技巧,從單元測試到整合測試,最終完成一個具備完整測試覆蓋的 Todo 應用程式。

參賽天數 8 天 | 共 8 篇文章 | 4 人訂閱 訂閱系列文 RSS系列文
DAY 1

Day 01 - 環境設置與第一個測試

今天要做什麼? 歡迎來到「React TDD 實戰:用 Vitest 打造可靠的前端應用」系列! 想像一下,你是一位新手開發者,剛加入一個重視程式品質的團隊。主...

2025-08-26 ‧ 由 recca0120 分享
DAY 2

Day 02 - 認識斷言(Assertions)

今天要做什麼? 昨天我們成功建立了測試環境並寫下第一個測試,今天要深入了解測試的核心 —「斷言(Assertions)」。 想像一下,你正在開發一個使用者註冊功...

2025-08-27 ‧ 由 recca0120 分享
DAY 3

Day 03 - TDD 紅綠重構循環

今天要做什麼? 昨天我們深入了解了斷言的各種用法,今天要學習 TDD 的精髓 —「紅綠重構循環」。 想像一下,你接到一個需求:「我們需要一個判斷質數的函數。」以...

2025-08-28 ‧ 由 recca0120 分享
DAY 4

Day 04 - 測試結構與組織

今天要做什麼? 昨天我們學會了 TDD 的紅綠重構循環,體驗了從無到有開發功能的完整流程。隨著測試越寫越多,你可能開始感到困擾:「這些測試散落各處,很難找到我要...

2025-08-29 ‧ 由 recca0120 分享
DAY 5

Day 05 - 測試生命週期

今天要做什麼? 昨天我們學會了測試結構與組織,但隨著測試越寫越多,你可能遇到一個問題:「為什麼這個測試單獨執行會通過,但和其他測試一起執行時會失敗?」 想像一個...

2025-08-30 ‧ 由 recca0120 分享
DAY 6

Day 06 - 參數化測試

今天要做什麼? 昨天我們學會了測試生命週期,解決了測試污染的問題。但現在面對一個新的挑戰:「要測試同一個函數的多組輸入輸出,難道要寫幾十個類似的測試嗎?」 想像...

2025-08-31 ‧ 由 recca0120 分享
DAY 7

Day 07 - 測試替身基礎(Test Doubles)

今天要做什麼? 昨天我們學會了參數化測試,用優雅的方式處理大量測試資料。今天要解決一個新挑戰:「如何測試依賴外部服務的函數?」 想像一個場景:你的應用需要呼叫...

2025-09-01 ‧ 由 recca0120 分享
DAY 8

Day 08 - 例外處理測試

今天要做什麼? 昨天我們學會了測試替身,今天要學習如何測試程式的錯誤處理。真實應用中總是充滿意外:API 錯誤、無效輸入、網路問題等。我們需要確保程式在這些情況...

2025-09-02 ‧ 由 recca0120 分享