測試
Visual Studio Code 提供了一套豐富的功能來測試您的程式碼。您可以自動發現專案中的測試、執行與偵錯測試，並取得測試涵蓋率結果。VS Code 中的 GitHub Copilot 可以協助您為專案設定測試框架，並幫您產生測試程式碼以及修正失敗的測試。
在本文中，您將了解如何在 VS Code 中開始進行測試、尋找熱門的測試延伸模組，以及探索測試功能。您也將了解 VS Code 中的 Copilot 如何協助您更快地撰寫測試，並協助您修正失敗的測試。
如果您尚未訂閱 Copilot，可以註冊 Copilot 免費方案免費使用 Copilot。您將獲得每月的內嵌建議額度與 AI 點數。
關於 VS Code 中的測試
VS Code 中的測試支援是特定於語言的，並取決於您安裝的 測試延伸模組。語言延伸模組或獨立延伸模組可以為特定語言或測試框架實作測試功能。
VS Code 具有下列用於測試程式碼的功能
-
支援多種測試框架：語言 延伸模組與獨立測試延伸模組提供各種語言和測試執行器的支援，例如 Jest、Mocha、Pytest、JUnit 等。
-
集中式測試管理：測試總管提供了一個集中管理和執行專案中測試的地方。視測試延伸模組而定，測試總管可能會自動發現專案中的測試。
-
整合式測試結果：在編輯器中與程式碼並排檢視內嵌的測試狀態，或在測試總管中檢視所有測試。詳細的測試結果可在「測試結果」面板中查看。
-
測試涵蓋率：執行含涵蓋率的測試，以查看測試涵蓋了多少程式碼。
-
AI 輔助測試：使用 VS Code 中的 GitHub Copilot 來協助您設定測試框架、產生測試程式碼以及修正失敗的測試。
-
工作整合：透過 建立執行測試的工作讓您的測試工作更輕鬆。您也可以在變更程式碼時在背景執行測試。
開始在 VS Code 中進行測試
若要開始在 VS Code 中進行測試，請遵循下列步驟
-
開啟「延伸模組」檢視並為您的專案安裝測試延伸模組。依測試類別 (@category:"testing") 篩選延伸模組。
-
選取活動列中的燒杯圖示 () 以開啟測試總管並發現專案中的測試。
-
從測試總管或直接從編輯器執行與偵錯您的測試。
用於測試的延伸模組
您可以在 Visual Studio Marketplace 中尋找支援測試的延伸模組。您也可以前往「延伸模組」檢視 (⇧⌘X (Windows, Linux Ctrl+Shift+X))，並依測試類別進行篩選。
Copilot 可以協助設定測試框架並建議相關的測試延伸模組。開啟「聊天」檢視 (⌃⌘I (Windows, Linux Ctrl+Alt+I))，輸入 /setupTests 命令，Copilot 將引導您完成專案組態設定的過程。
在「測試」檢視中自動發現測試
「測試」檢視提供了一個集中管理和執行測試的地方。您可以透過選取活動列中的燒杯圖示 () 來進入「測試」檢視。您也可以使用命令選擇區 (⇧⌘P (Windows, Linux Ctrl+Shift+P)) 中的 測試: 聚焦於測試總管檢視 命令。
如果您的專案包含測試，「測試總管」檢視會發現並列出工作區中的測試。根據預設，發現的測試會以樹狀檢視顯示在測試總管中。此樹狀檢視符合您測試的階層結構，讓您輕鬆巡覽和執行測試。
您可以透過選取播放按鈕來從測試總管執行測試。在 執行與偵錯測試 一節中深入了解如何執行與偵錯測試。
在「測試總管」檢視中的測試上按兩下，即可巡覽至測試程式碼。如果您選取失敗的測試，編輯器會開啟測試檔案、反白顯示失敗的測試，並顯示錯誤訊息。
如果您有許多測試，可以使用篩選選項快速找到您感興趣的測試。您可以使用篩選按鈕依狀態篩選測試，或僅顯示目前檔案的測試。您也可以使用搜尋方塊依名稱搜尋特定測試，或使用 @ 符號依狀態搜尋。
在更多動作功能表中，您可以存取更多功能，例如排序和顯示選項。
如果您新增了測試或變更了測試，請使用重新整理測試按鈕來重新整理測試總管中的測試清單。您也可以使用命令選擇區 (⇧⌘P (Windows, Linux Ctrl+Shift+P)) 中的 Test Explorer: 重新載入測試 命令。
根據測試延伸模組而定，您可能必須先設定測試框架或測試執行器，才能發現專案中的測試。如需詳細資訊，請參閱測試延伸模組的文件。您可以在 Copilot 聊天檢視中使用 setupTests 命令，以取得有關為專案設定測試框架的協助。
使用 AI 撰寫測試
撰寫測試可能很耗時且經常被忽略。Copilot 可以透過為您的應用程式建立測試程式碼來加快撰寫測試的過程。您可以使用它來撰寫單元測試、整合測試、端對端測試等。
若要使用 VS Code 中的 Copilot 撰寫測試，您可以使用下列任一方法
-
編輯器智慧動作
-
(選擇性) 選取一區塊應用程式程式碼
-
在編輯器中按一下滑鼠右鍵，然後選取 Copilot > 產生測試
-
-
聊天提示詞
-
開啟您要為其產生測試的應用程式程式碼檔案
-
開啟 Copilot 編輯 ()、「聊天」檢視 (⌃⌘I (Windows, Linux Ctrl+Alt+I)) 或編輯器內嵌聊天 (⌘I (Windows, Linux Ctrl+I))
-
輸入用以產生測試的提示詞，例如 為此程式碼產生測試。同時包含邊界條件的測試。
透過在提示詞中輸入
#file來新增額外內容。例如：為此程式碼產生測試 #file:calculator.js
-
Copilot 將會為您的應用程式程式碼產生測試案例程式碼。如果您已經有測試檔案，Copilot 會將測試加入其中，或在需要時建立新檔案。您可以透過向 Copilot 提供更多提示詞來進一步自訂產生的測試。例如，您可以要求 Copilot 使用其他測試框架。
您可以給予 Copilot 您自己的產生程式碼特殊指示。例如，您可以告訴 Copilot 使用特定的測試框架、命名慣例或程式碼結構。
深入了解 在 VS Code 中使用 Copilot。
執行與偵錯測試
在發現專案中的測試之後，您可以直接在 VS Code 中執行與偵錯測試，並檢視測試結果。
在測試總管中，使用區段標題中的控制項來執行或偵錯所有測試。您也可以透過選取特定節點上的執行/偵錯圖示，在樹狀檢視中執行或偵錯特定的測試。
當您在編輯器中檢視測試程式碼時，請使用編輯器裝訂邊中的播放控制項來執行該位置的測試。
在裝訂邊控制項上按一下滑鼠右鍵，以檢視其他動作，例如偵錯測試。
使用 testing.defaultGutterClickAction 設定來設定裝訂邊控制項的預設測試動作。
在您執行一或多個測試之後，編輯器裝訂邊與測試總管中的樹狀檢視會顯示對應的測試狀態 (通過/失敗)。當測試失敗時，請注意編輯器會以覆疊方式顯示測試錯誤訊息。
使用測試總管中的顯示輸出按鈕，在測試結果面板中檢視測試輸出。
Copilot 可以協助您修正失敗的測試。在測試總管中，將滑鼠停留在樹狀檢視上，並選取修正測試失敗按鈕 (閃爍圖示)，Copilot 將會為失敗的測試建議修正程式碼。或者，在 Copilot 聊天中輸入 /fixTestFailure 命令。
測試涵蓋率
測試涵蓋率是用來衡量您的程式碼有多少比例被測試所涵蓋的指標。它有助於您識別程式碼中未被測試涵蓋的區域。如果對應的測試延伸模組支援測試涵蓋率，VS Code 支援執行含涵蓋率的測試並檢視涵蓋率結果。
您可以執行含涵蓋率的測試，就像執行和偵錯測試一樣。使用「測試總管」檢視、編輯器裝訂邊中的對應動作，或命令選擇區 (⇧⌘P (Windows, Linux Ctrl+Shift+P)) 中的命令。
在您執行含涵蓋率的測試之後，您可以在不同的位置檢視涵蓋率結果
-
在「測試涵蓋率」檢視中
樹狀檢視會顯示測試及其涵蓋率百分比。色彩指示器也提供有關涵蓋率百分比的視覺提示。將滑鼠停留在每一行上，即可查看有關涵蓋率結果的更多詳細資料。
-
作為編輯器中的覆疊
對於具有測試涵蓋率的程式碼檔案，編輯器會在裝訂邊中顯示色彩覆疊，以指出哪些行已被測試涵蓋或未被涵蓋。當您將滑鼠停留在裝訂邊上時，請注意針對已涵蓋的行，也會顯示該行被執行的次數指示器。您也可以選取編輯器標題列中的顯示內嵌涵蓋率按鈕，或使用 Test: Show Inline Coverage 命令 (⌘; ⇧⌘I (Windows, Linux Ctrl+; Ctrl+Shift+I)) 來切換涵蓋率覆疊。
-
在「總管」檢視中，它會顯示程式碼檔案的涵蓋率百分比
「總管」檢視會顯示程式碼檔案的涵蓋率百分比。將滑鼠停留在總管中的檔案或節點上，即可查看有關涵蓋率結果的更多詳細資料。
-
在差異編輯器中
如果您開啟了差異編輯器，涵蓋率結果也會顯示在差異編輯器中，其顯示方式與在編輯器中的方式類似。
-
在「測試涵蓋率」工具列中
編輯器中的「測試涵蓋率」工具列會顯示測試涵蓋率結果、讓您在未涵蓋的程式碼區塊之間巡覽，以及切換內嵌涵蓋率。使用 testing.coverageToolbarEnabled 設定來啟用測試涵蓋率工具列。
工作整合
VS Code 中的工作可以設定為在 VS Code 內執行指令碼並啟動處理程序，而不需輸入命令列或撰寫新程式碼。在 VS Code 中，您可以定義執行測試的預設測試工作，並選擇性地建立執行測試的鍵盤快速鍵。
使用 Tasks: Configure Default Test Task (工作: 設定預設測試工作) 命令來設定預設測試工作。VS Code 會嘗試自動偵測測試工作，例如根據您的 package.json 檔案。選取預設測試工作之後，系統會開啟 tasks.json 檔案供您自訂工作。
下列程式碼片段顯示了將 node --test 命令指定為預設測試工作的 tasks.json 檔案。
{
"version": "2.0.0",
"tasks": [
{
"type": "npm",
"script": "test",
"group": {
"kind": "test",
"isDefault": true
},
"problemMatcher": [],
"label": "npm: test",
"detail": "node --test src/tests/**.js"
}
]
}
若要執行測試工作，請使用 Tasks: Run Test Task (工作: 執行測試工作) 命令或為該命令建立鍵盤快速鍵。
深入了解 使用與設定工作。
目前工作尚未與 VS Code 的測試功能進行特殊整合，因此在工作中執行測試不會更新使用者介面。個別的測試延伸模組可以提供整合至 UI 中的特定測試自動化功能。
測試組態設定
您可以設定多個設定來自訂 VS Code 中的測試體驗。每個語言延伸模組可能會提供特定於該語言測試的額外設定。以下是您可以設定的一些常見設定
| 設定 ID | 詳細資訊 |
|---|---|
| testing.countBadge | 控制活動列上「測試」圖示上的計數徽章 |
| testing.gutterEnabled | 設定是否在編輯器裝訂邊中顯示測試控制項 |
| testing.defaultGutterClickAction | 設定選取裝訂邊測試控制項時的預設動作 |
| testing.coverageBarThresholds | 設定「測試涵蓋率」檢視的涵蓋率列閾值色彩 |
| testing.displayedCoveragePercent | 設定「測試涵蓋率」檢視中顯示的百分比數值 (總計、陳述式或最小值) |
| testing.showCoverageInExplorer | 設定是否要在「總管」檢視中顯示涵蓋率百分比 |
您可以在設定編輯器 (⌘, (Windows, Linux Ctrl+,)) 中找到所有與測試相關的設定。
後續步驟
-
深入了解 使用與設定工作