💡 前言

在現代軟體開發流程中，單元測試 與 測試驅動開發 是確保程式碼品質與維護性的重要防線。

過去許多工程師在寫測試時，習慣在終端機不斷重複執行 npm test 或 pytest 指令，然後在一大串純文字 Log 中尋找哪一個 Test Case 失敗。VS Code 內建了強大的 Testing API 與測試總管面板，能將專案中的所有測試案例進行視覺化管理，讓你可以直接在編輯器行號旁一鍵點擊執行、查看紅綠燈狀態，甚至直接針對失敗的測試案例下斷點除錯！

今天 Day 21 我們就來體驗如何在 VS Code 中打造高效的視覺化測試環境！

🎯 本篇重點

1. VS Code 內建測試總管面板 (Test Explorer) 介紹
2. JavaScript / TypeScript 專案 (Jest / Vitest) 測試整合
3. Python 專案 (Pytest) 測試整合
4. 視覺化除錯與 TDD (Test-Driven Development) 實務工作流

🧪 1. 認識 VS Code 測試總管面板

開啟 VS Code 左側工具列，點擊帶有 「燒杯 / 試管」 圖示的面板（快捷鍵 Ctrl + Shift + T 或透過 Command Palette 開啟 Testing: Focus on Test Explorer View）。

測試總管的核心特色：
• 自動偵測 (Auto Discovery)：自動掃描專案中的所有測試檔案（如 *.test.js、test_*.py）。
• 視覺化狀態：以 綠色勾勾 (Passed) 與 紅色叉叉 (Failed) 直覺呈現每個測試案例的結果。
• 行內按鈕 (Inline Play Buttons)：直接在程式碼編輯器的 it()、test() 或 def test_* 函式行號旁顯示綠色播放按鈕，隨按隨測。

⚡ 2. JavaScript / TypeScript 專案測試整合 (以 Jest / Vitest 為例)

以目前前端與 Node.js 最熱門的 Jest 或 Vitest 為例：

Step 1：安裝對應的擴充套件

在擴充套件商店搜尋並安裝：
• Jest（由 Orta 提供）或 Vitest 官方擴充套件。

Step 2：自動識別與執行

安裝完成後，擴充套件會讀取專案根目錄下的 jest.config.js 或 vite.config.ts：

1. 點開測試面板，你會看到專案中的測試樹狀圖。
2. 點擊頂部的 「播放 (Run Tests)」 按鈕，VS Code 就會在背景執行測試。
3. 如果測試失敗，程式碼下方會直接以紅色波浪線標示錯誤原因，點開即可查看斷言 Failure 的詳細 Diff 對比！

🐍 3. Python 專案測試整合 (以 Pytest 為例)

對 Python 開發者而言，VS Code 官方的 Python 套件已經深度整合了 Pytest 與 Unittest：

設定步驟：

1. 按下 Ctrl + Shift + P 開啟命令面板，輸入並選擇 Python: Configure Tests。
2. 選擇測試框架（推薦選擇 pytest）。
3. 選擇測試檔案所在的目錄（通常選擇根目錄或 tests 資料夾）。
4. 選擇完成後，VS Code 會在 .vscode/settings.json 中寫入相應設定：

{
  "python.testing.pytestArgs": [
    "tests"
  ],
  "python.testing.unittestEnabled": false,
  "python.testing.pytestEnabled": true
}

此時開啟測試面板，所有的 Python 測試案例就會自動呈現並可隨時執行！

🔄 4. 高效 TDD 工作流：點擊即除錯

在實行 TDD（先寫測試、再寫實作、最後重構）的過程中，最爽快的功能莫過於 「測試即時除錯」：

• Debug Single Test：
當某個測試案例失敗時，不需要啟動整個專案的 Debugger。只需在該測試案例旁邊的播放按鈕上記錄右鍵，選擇 「Debug Test（除錯測試）」（或點擊試管帶蟲蟲的圖示）。
• 自動暫停：
VS Code 會立刻啟動除錯模式，並精準停在你設定的斷點或 Failure 產生的那一行，讓你可以直接檢查當下的變數狀態，極速完成修復！