測試
Visual Studio Code 提供了豐富的程式碼測試功能。您可以自動發現專案中的測試、執行和除錯測試,並獲取測試覆蓋率結果。VS Code 中的 GitHub Copilot 可以幫助您設定專案的測試框架,並幫助您生成測試程式碼和修復失敗的測試。
在本文中,您將學習如何在 VS Code 中開始測試,查詢流行的測試擴充套件,並探索測試功能。您還將學習 VS Code 中的 Copilot 如何幫助您更快地編寫測試,並幫助您修復失敗的測試。
如果你還沒有 Copilot 訂閱,可以透過註冊 Copilot 免費計劃來免費使用 Copilot。你將獲得每月限量的程式碼補全和聊天互動次數。
關於 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))中的“測試資源管理器: 重新載入測試”命令。
根據測試擴充套件的不同,您可能需要先配置測試框架或測試執行器來發現專案中的測試。有關更多資訊,請查閱測試擴充套件的文件。您可以使用 Copilot Chat 檢視中的 setupTests 命令來獲取有關為專案設定測試框架的幫助。
使用 AI 編寫測試
編寫測試可能耗時且經常被忽略。Copilot 可以透過為您的應用程式建立測試程式碼來加快編寫測試的過程。您可以使用它來編寫單元測試、整合測試、端到端測試等。
要使用 VS Code 中的 Copilot 編寫測試,您可以使用以下任一方法
-
編輯器智慧操作
-
(可選)選擇一段應用程式程式碼
-
在編輯器中右鍵單擊,然後選擇“Copilot”>“生成測試”
-
-
聊天提示
-
開啟您要為其生成測試的應用程式程式碼檔案
-
開啟 Copilot Edits()、聊天檢視(⌃⌘I (Windows, Linux Ctrl+Alt+I))或編輯器內聯聊天(⌘I (Windows, Linux Ctrl+I))
-
輸入一個提示來生成測試,例如為這段程式碼生成測試。還包括邊緣情況的測試。
透過輸入
#file來為您的提示新增額外的上下文。例如,為這段程式碼生成測試 #file:calculator.js
-
Copilot 將為您的應用程式程式碼生成測試用例程式碼。如果您已有測試檔案,Copilot 將把測試新增到其中,或者在需要時建立一個新檔案。您可以透過提供更多提示來進一步自定義生成的測試。例如,您可以要求 Copilot 使用另一個測試框架。
您可以為 Copilot 提供自己的特殊程式碼生成指令。例如,您可以告訴 Copilot 使用特定的測試框架、命名約定或程式碼結構。
瞭解更多關於在 VS Code 中使用 Copilot。
執行和除錯測試
在您的專案中的測試被發現後,您可以直接在 VS Code 中執行和除錯您的測試,並檢視測試結果。
在“測試資源管理器”中,使用節標題中的控制元件來執行或除錯所有測試。您還可以透過選擇樹狀檢視中特定節點上的執行/除錯圖示來執行或除錯特定測試。

在編輯器中檢視測試程式碼時,使用編輯器裝訂線中的播放控制元件在該位置執行測試。

右鍵單擊裝訂線控制元件以檢視其他操作,例如除錯測試。
使用 testing.defaultGutterClickAction 設定配置裝訂線控制元件的預設測試操作。
執行一個或多個測試後,編輯器裝訂線和“測試資源管理器”中的樹狀檢視將顯示相應的測試狀態(透過/失敗)。當測試失敗時,請注意測試錯誤訊息會顯示為編輯器中的疊加層。

使用“測試資源管理器”中的“顯示輸出”按鈕在“測試結果”面板中檢視測試輸出。

Copilot 可以幫助您修復失敗的測試。在“測試資源管理器”中,將滑鼠懸停在樹狀檢視上,然後選擇“修復測試失敗”按鈕(閃爍),Copilot 將建議修復失敗的測試。或者,在 Copilot Chat 中輸入 /fixTestFailure 命令。

測試覆蓋率
測試覆蓋率是指您的測試覆蓋了多少程式碼。它有助於識別程式碼中未被測試的區域。VS Code 支援執行帶覆蓋率的測試,並在相應的測試擴充套件支援測試覆蓋率時檢視覆蓋率結果。
您可以像執行和除錯測試一樣執行帶覆蓋率的測試。使用“測試資源管理器”檢視、編輯器裝訂線或命令面板(⇧⌘P (Windows, Linux Ctrl+Shift+P))中的相應命令。

執行帶覆蓋率的測試後,您可以在不同位置檢視覆蓋率結果
-
在“測試覆蓋率”檢視中
樹狀檢視顯示帶有覆蓋率百分比的測試。顏色指示器也提供了覆蓋率百分比的視覺提示。將滑鼠懸停在每行上以檢視有關覆蓋率結果的更多詳細資訊。

-
作為編輯器中的疊加層
對於具有測試覆蓋率的程式碼檔案,編輯器會在裝訂線中顯示顏色疊加層,以指示哪些行被測試覆蓋或未被覆蓋。當您將滑鼠懸停在裝訂線上時,請注意,對於已覆蓋的行,還有一個執行次數的指示器。您還可以選擇編輯器標題欄中的“顯示內聯覆蓋率”按鈕,或使用“測試: 顯示內聯覆蓋率”命令(⌘; ⇧⌘I (Windows, Linux Ctrl+; Ctrl+Shift+I))來切換覆蓋率疊加層。

-
在“資源管理器”檢視中,顯示程式碼檔案的覆蓋率百分比
“資源管理器”檢視顯示程式碼檔案的覆蓋率百分比。將滑鼠懸停在“資源管理器”中的檔案或節點上,以檢視有關覆蓋率結果的更多詳細資訊。

-
在差異編輯器中
如果您打開了差異編輯器,覆蓋率結果也會顯示在差異編輯器中,類似於它們在編輯器中的顯示方式。
任務整合
VS Code 中的任務可以配置為在 VS Code 中執行指令碼和啟動程序,而無需輸入命令列或編寫新程式碼。在 VS Code 中,您可以定義一個預設測試任務來執行您的測試,並可選擇建立鍵盤快捷鍵來執行測試。
使用“任務: 配置預設測試任務”命令來配置預設測試任務。VS Code 會嘗試自動檢測測試任務,例如基於您的 package.json 檔案。選擇預設測試任務後,tasks.json 檔案將為您開啟以自定義任務。
以下程式碼片段顯示了一個 tasks.json 檔案,該檔案將 node --test 命令指定為預設測試任務。
{
"version": "2.0.0",
"tasks": [
{
"type": "npm",
"script": "test",
"group": {
"kind": "test",
"isDefault": true
},
"problemMatcher": [],
"label": "npm: test",
"detail": "node --test src/tests/**.js"
}
]
}
要執行測試任務,請使用“任務: 執行測試任務”命令,或為該命令建立鍵盤快捷鍵。
瞭解更多關於使用和配置任務。
目前,任務與 VS Code 的測試功能沒有特殊的整合,因此在任務中執行測試不會更新使用者介面。單個測試擴充套件可以提供整合到 UI 中的特定測試自動化功能。
測試配置設定
有多個設定可以配置,以自定義 VS Code 中的測試體驗。每個語言擴充套件可能提供特定於該語言的測試的附加設定。以下是一些可以配置的常用設定
| 設定 ID | 詳細資訊 |
|---|---|
| testing.countBadge | 控制活動欄中“測試”圖示上的計數徽章 |
| testing.gutterEnabled | 配置是否在編輯器裝訂線中顯示測試控制元件 |
| testing.defaultGutterClickAction | 配置選擇裝訂線測試控制元件時的預設操作 |
| testing.coverageBarThresholds | 配置“測試覆蓋率”檢視的覆蓋率條閾值的顏色 |
| testing.displayedCoveragePercent | 配置在“測試覆蓋率”檢視中顯示的百分比值(總計、語句或最小值) |
| testing.showCoverageInExplorer | 配置是否在“資源管理器”檢視中顯示覆蓋率百分比 |
您可以在設定編輯器(⌘, (Windows, Linux Ctrl+,))中找到所有與測試相關的設定。
後續步驟
-
瞭解更多關於 Copilot 和 VS Code 中的 AI 輔助測試
-
瞭解更多關於使用和配置任務