iT邦幫忙

鐵人檔案

2025 iThome 鐵人賽
回列表
Modern Web

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

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

參賽天數 28 天 | 共 28 篇文章 | 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 - 測試替身基礎 🎭

今天要做什麼? 昨天我們學會了參數化測試,用優雅的方式處理大量測試資料。今天要解決一個新挑戰:「如何測試依賴外部服務的程式碼?」 想像你有個寄送通知的功能,它會...

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

Day 08 - 例外處理測試 ⚠️

今天進入測試基礎概念的第八天,我們要學習如何測試程式在錯誤情況下的行為。 挑戰的開始 🎯 昨天我們學會了測試替身,解決了外部依賴的測試問題。今天面對一個新的挑戰...

2025-09-02 ‧ 由 recca0120 分享
DAY 9

Day 09 - 測試覆蓋率:你的測試真的夠完整嗎? 📊

今天的目標 還記得昨天我們學會了例外處理測試,確保程式在錯誤情況下的穩定運行嗎?今天要面對一個更深層的問題:「我們的測試到底覆蓋了多少程式碼?」 測試覆蓋率(T...

2025-09-03 ‧ 由 recca0120 分享
DAY 10

Day 10 - 重構與測試:讓程式碼持續進化 🔧

還記得第一次接手別人寫的程式碼嗎?那種「這是什麼?」的困惑、「為什麼要這樣寫?」的疑問,以及「我該從哪裡開始改?」的無助感。每個開發者都有過這樣的經歷。 經過前...

2025-09-04 ‧ 由 recca0120 分享