測試基礎：課程規劃總覽，從暖身測試逐步升溫到邊界案例，並認識 Mocking 陷阱與 Vitest 工具選擇
從暖身測試開始，逐步升溫
課程一開始會先寫一些非常簡單的測試，簡單到會讓人懷疑「這有什麼好測的」，例如驗證加法確實照預期運作。Steve 坦言這些測試本身沒什麼意義，用意只是先讓大家習慣寫測試這個動作、抓到手感，接著才會慢慢把難度往上加。這個過程會漸進到讓人幾乎沒察覺自己已經在處理更複雜的情境。
已知情境測試之外，還有沒預料到的邊界案例
單純驗證程式碼在已知、預期的情境下能正常運作只是第一步。真正的挑戰在於程式碼上線後，會遇到各種寫程式當下沒設想過的怪異輸入，例如使用者的名字裡塞了一個 emoji，或某個原本以為一定有值的變數突然變成 undefined。這類情況即使在瀏覽器裡手動點過所有按鈕、看起來一切正常，也未必能提前發現。
測試在這裡扮演的角色，不只是把這些邊界案例硬塞進測試案例裡而已，更重要的是透過撰寫測試的過程，反過來檢視自己是不是已經把這些情況都想過一輪、涵蓋到了。這也是這門課想呈現的核心關係：寫程式碼跟寫測試不是各自獨立的兩件事，而是彼此互相對照、幫忙補全的兩個面向。
一些小技巧，重點是知道它存在
課程也會穿插一些能讓測試寫起來更輕鬆的小技巧。Steve 坦言這些技巧不會是每天都用得到的東西，甚至他自己可能半年才用上一次，因此他也不期待學員把它們背下來。真正的目的是在腦中留下一個印記，讓學員下次卡關時，至少會想起「這裡好像有更好的做法」，進而回頭查資料，而不是每次都用最土法煉鋼的方式硬解。
Mocking 的分寸：造假太多，測試就失去意義
有學員（暱稱 CJ online）在課堂上提出觀察：mocking 用太多的時候，容易出現假陽性，也就是測試明明通過了，程式碼卻其實有問題。Steve 認同這個觀察，並進一步說明 mocking 的用途與風險。
Mocking 大致上是「假裝這是真實世界」的手法。例如程式碼會呼叫外部 API，但你不會希望每次跑測試都真的打一次那支 API，一方面測試次數頻繁時成本太高，另一方面外部伺服器的回應也很難完全照你要的樣子控制。這時候就會用 mock 去模擬那個外部依賴的回應。
但這裡有個容易失衡的地方：如果把越來越多的真實世界都換成假造的版本，最終可以把整個世界都變成虛構的，測試自然會全部通過，但也因此完全失去驗證的價值。課程會示範什麼時候適合用 mock，也會談到怎麼重構程式碼、減少對 mock 的依賴。
測試覆蓋率不是目標，消除焦慮才是
延續 mocking 過度會讓測試失真的邏輯，Steve 進一步點出一個常見的迷思：即使擁有三千個測試、百分之百的測試覆蓋率，也完全可能沒有消除任何改動程式碼時的焦慮感，這正好呼應上一篇提到「測試是為了消除改動程式碼時的焦慮感」這個核心目標。測試覆蓋率這個數字很容易被灌水，數字好看不代表測試真的有價值。
因此這門課不追求測試數量或覆蓋率的多寡，真正該問的問題是：你現在敢不敢放心去重構這段程式碼？如果測試寫了一大堆，卻還是不敢動手改程式碼，那就代表這些測試並沒有達到原本該有的效果。
DOM 測試：從操作節點到啟動瀏覽器戳按鈕
多數學員是 JavaScript 工程師，也大致都碰過瀏覽器端的程式碼。光是驗證「二加二等於四」這種抽象邏輯很簡單，但一旦要處理實際畫面上冒出來的 DOM 節點，往往就會不知道從何下手。
課程會從多個角度切入 DOM 測試：一是直接抓取 DOM 節點並操作它們，二是實際啟動一個瀏覽器、指向應用程式，模擬使用者去點擊按鈕。核心精神都是把「戳一戳程式有沒有壞」這件事自動化，讓開發者改動程式碼時能更安心。
別讓測試依賴你控制不了的東西
課程也會處理一個常見的痛點：測試依賴外部網路或第三方 API 時，一旦後端工程師改動了什麼、或被外部 API 限流，測試就會無端失敗，即使自己的程式碼完全沒有問題。這類測試一旦變得不穩定（flaky），最常見的下場就是直接被關掉，等於這個測試從此形同虛設。
因此課程會說明如何避免測試變成在間接測試別人的程式碼，讓測試結果真正反映自己這端程式碼的健康狀態。這部分也會延伸到從瀏覽器角度驅動測試，Steve 提到這本身是個更大的主題，這門課只會先建立起初步的概念框架。
課程資源：筆記網站與範例程式庫
Steve 提到自己維護了一個網站，裡面收錄了這門課所有的筆記，字數統計起來有數萬字。內容除了程式碼的逐步說明，也包含許多堂上不見得會細講、但值得進一步閱讀的延伸主題，甚至有些堂上只會稍微帶過的周邊議題，在筆記網站裡有更深入的說明。
網站上也連結了一個範例程式庫，裡面有大量可以直接動手練習的小範例。如果課堂上遇到學員提出的特定問題，需要臨時寫一個新範例來說明，也會直接動手示範。目的是讓多數時間花在真正動手測試程式碼上，而不是花在看講師寫非常簡單的程式碼。
工具選擇：為什麼用 Vitest
市面上的測試執行器（test runner）不少，例如 Jest、Mocha 搭配 Chai、Jasmine 等。這些工具底層邏輯大多相通，同一個測試案例往往可以用三種不同框架寫出幾乎一樣的內容，差異可能只在於 import 的來源、或個別語法上的小調整。
這門課選擇使用 Vitest，它是 Vite 生態系底下的工具，同時也能搭配 React、Angular、Svelte、Vue 等框架使用。Steve 特別說明，如果學員平常工作場合用的是 Jest，這門課教的內容一樣完全適用，過程中他也會不時點出兩者之間的細微差異，但多數情況下差異都不影響理解，因為它們底層用的往往是同一套共用工具。
此文章是 FrontendMasters 上的 Testing Fundamentals 課程筆記
