參加你附近的 ,瞭解 VS Code 中的 AI 輔助開發。

測試

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 等)提供支援。

  • 集中化測試管理測試資源管理器提供了一個集中的位置來管理和執行專案中的測試。根據測試擴充套件的不同,測試資源管理器可能會自動發現你專案中的測試。

  • 整合的測試結果:在編輯器中與測試程式碼並排檢視測試狀態,或在測試資源管理器中檢視所有測試。詳細的測試結果可在“測試結果”面板中檢視。

  • 除錯除錯你的測試以診斷測試失敗的原因。利用 VS Code 中豐富的除錯支援,如斷點、監視變數等。

  • 測試覆蓋率執行帶覆蓋率的測試,以檢視你的程式碼有多少被測試所覆蓋。

  • AI 輔助測試:在 VS Code 中使用 GitHub Copilot 協助你設定測試框架、生成測試程式碼和修復失敗的測試。

  • 任務整合:透過建立任務來執行你的測試,使你的測試工作更輕鬆。你還可以在更改程式碼時在後臺執行測試。

開始在 VS Code 中進行測試

要在 VS Code 中開始測試,請按照以下步驟操作:

  1. 開啟“擴充套件”檢視併為你的專案安裝一個測試擴充套件。按測試 (Testing) 類別 (@category:"testing") 篩選擴充套件。

  2. 在活動欄中選擇燒杯圖示 () 以開啟測試資源管理器並發現專案中的測試。

  3. 從測試資源管理器或直接從編輯器中執行和除錯你的測試。

用於測試的擴充套件

你可以在 Visual Studio Marketplace 中查詢支援測試的擴充套件。你也可以轉到“擴充套件”檢視 (⇧⌘X (Windows、Linux Ctrl+Shift+X)),並按測試 (Testing) 類別進行篩選。

提示

Copilot 可以協助設定測試框架並建議相關的測試擴充套件。開啟“聊天”檢視 (⌃⌘I (Windows、Linux Ctrl+Alt+I)),輸入 /setupTests 命令,Copilot 將引導你完成配置專案的過程。

在測試檢視中自動發現測試

“測試”檢視提供了一個集中的位置來管理和執行你的測試。你可以透過選擇活動欄中的燒杯圖示 () 來進入“測試”檢視。你也可以在命令面板 (⇧⌘P (Windows、Linux Ctrl+Shift+P)) 中使用 Testing: Focus on Test Explorer View (測試: 聚焦於測試資源管理器檢視) 命令。

如果你有一個包含測試的專案,“測試資源管理器”檢視會發現並列出工作區中的測試。預設情況下,發現的測試會在測試資源管理器中以樹狀檢視顯示。樹狀檢視與測試的層次結構相匹配,使導航和執行測試變得容易。

Screenshot that shows VS Code with the Test Explorer showing the tests, matching the test code that is shown in the editor.

你可以透過選擇播放按鈕從測試資源管理器中執行測試。在執行和除錯測試部分了解更多關於執行和除錯測試的資訊。

提示

雙擊“測試資源管理器”檢視中的測試,可以導航到測試程式碼。如果你選擇一個失敗的測試,編輯器會開啟測試檔案,高亮顯示失敗的測試,並顯示錯誤資訊。

如果你有很多測試,可以使用篩選選項快速找到你感興趣的測試。你可以使用篩選 (Filter) 按鈕按狀態篩選測試,或只顯示當前檔案的測試。你也可以使用搜索框按名稱搜尋特定測試,或使用 @ 符號按狀態搜尋。

Test Explorer view with filtering options

更多操作 (More Actions) 選單中,你可以訪問更多功能,如排序和顯示選項。

如果你添加了新測試或更改了測試,請使用重新整理測試 (Refresh Tests) 按鈕來重新整理測試資源管理器中的測試列表。你也可以在命令面板 (⇧⌘P (Windows、Linux Ctrl+Shift+P)) 中使用 Test Explorer: Reload tests (測試資源管理器: 重新載入測試) 命令。

注意

根據測試擴充套件的不同,你可能首先需要配置測試框架或測試執行器才能發現專案中的測試。有關更多資訊,請查閱測試擴充套件的文件。你可以在 Copilot 聊天檢視中使用 setupTests 命令來獲取有關為你的專案設定測試框架的幫助。

使用 AI 編寫測試

編寫測試可能很耗時,而且常常被忽略。Copilot 可以透過為你的應用程式建立測試程式碼來加快編寫測試的過程。你可以用它來編寫單元測試、整合測試、端到端測試等等。

要在 VS Code 中使用 Copilot 編寫測試,你可以使用以下任一方法:

  • 編輯器智慧操作

    1. (可選)選擇一段應用程式程式碼

    2. 在編輯器中右鍵單擊,然後選擇 Copilot > 生成測試 (Generate Tests)

  • 聊天提示

    1. 開啟你想要為其生成測試的應用程式程式碼檔案

    2. 開啟 Copilot 編輯 ()、聊天檢視 (⌃⌘I (Windows、Linux Ctrl+Alt+I)) 或編輯器內聯聊天 (⌘I (Windows、Linux Ctrl+I))

    3. 輸入一個生成測試的提示,例如“為這段程式碼生成測試。也包括邊緣情況的測試。”

      透過在提示中輸入 #file 來為你的提示新增額外的上下文。例如,“為這段程式碼 #file:calculator.js 生成測試”

      提示

      在 GitHub Copilot 文件中獲取更多關於生成單元測試模擬物件端到端測試的示例提示。

Copilot 將為你的應用程式程式碼生成測試用例程式碼。如果你已經有一個測試檔案,Copilot 會將測試新增到那裡,或者在需要時建立一個新檔案。你可以透過向 Copilot 提供更多提示來進一步自定義生成的測試。例如,你可以要求 Copilot 使用另一個測試框架。

提示

你可以給 Copilot 你自己的用於生成程式碼的特殊指令。例如,你可以告訴 Copilot 使用特定的測試框架、命名約定或程式碼結構。

瞭解更多關於在 VS Code 中使用 Copilot 的資訊。

執行和除錯測試

在發現專案中的測試後,你可以直接在 VS Code 中執行和除錯你的測試,並檢視測試結果。

在測試資源管理器中,使用區域標題中的控制元件來執行或除錯所有測試。你也可以透過選擇特定節點上的執行/除錯圖示來執行或除錯樹狀檢視中的特定測試。

Run and debug tests in Test Explorer

當你在編輯器中檢視測試程式碼時,使用編輯器邊欄中的播放控制元件來執行該位置的測試。

Run and debug tests in editor gutter

右鍵單擊邊欄控制元件以檢視其他操作,例如除錯測試。

提示

透過使用 testing.defaultGutterClickAction 設定來配置邊欄控制元件的預設測試操作。

在你執行一個或多個測試後,編輯器邊欄和測試資源管理器中的樹狀檢視會顯示相應的測試狀態(透過/失敗)。當一個測試失敗時,請注意測試錯誤資訊會作為浮層顯示在編輯器中。

Screenshot that shows a test error message overlay in the editor.

使用測試資源管理器中的顯示輸出 (Show Output) 按鈕,在測試結果 (Test Results) 面板中檢視測試輸出。

Test Results panel

提示

Copilot 可以幫助你修復失敗的測試。在測試資源管理器中,將滑鼠懸停在樹狀檢視上,然後選擇修復測試失敗 (Fix Test Failure) 按鈕 (火花),Copilot 將為失敗的測試建議一個修復方案。或者,在 Copilot 聊天中輸入 /fixTestFailure 命令。

Screenshot showing the Test Explorer, highlighting the "Fix Test Failure" button, and the editor that shows a suggestion from Copilot on how to fix the failing test.

測試覆蓋率

測試覆蓋率是衡量你的程式碼有多少被測試所覆蓋的指標。它幫助你識別程式碼中未被測試的區域。如果相應的測試擴充套件支援測試覆蓋率,VS Code 支援執行帶覆蓋率的測試並檢視覆蓋率結果。

你可以執行帶覆蓋率的測試,就像你可以執行和除錯測試一樣。在測試資源管理器檢視、編輯器邊欄或命令面板 (⇧⌘P (Windows、Linux Ctrl+Shift+P)) 中使用相應的操作。

Run tests with coverage

在你執行帶覆蓋率的測試後,你可以在不同位置檢視覆蓋率結果:

  • 在“測試覆蓋率”檢視中

    一個樹狀檢視顯示了測試及其覆蓋率百分比。顏色指示器也提供了關於覆蓋率百分比的視覺提示。將滑鼠懸停在每一行上以檢視有關覆蓋率結果的更多詳細資訊。

    Test Coverage view

  • 作為編輯器中的浮層

    對於具有測試覆蓋率的程式碼檔案,編輯器會在邊欄中顯示一個顏色浮層,以指示哪些行被測試覆蓋或未被覆蓋。當你將滑鼠懸停在邊欄上時,你會注意到對於被覆蓋的行,還有一個指示器顯示該行被執行的次數。你也可以選擇編輯器標題欄中的顯示內聯覆蓋率 (Show Inline Coverage) 按鈕或使用 Test: Show Inline Coverage (測試: 顯示內聯覆蓋率) 命令 (⌘; ⇧⌘I (Windows、Linux Ctrl+; Ctrl+Shift+I)) 來切換覆蓋率浮層。

    View coverage in editor

  • 在“資源管理器”檢視中,它顯示你程式碼檔案的覆蓋率百分比

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

    View coverage in Explorer view

  • 在差異編輯器中

    如果你打開了差異編輯器,覆蓋率結果也會顯示在差異編輯器中,類似於它們在編輯器中的顯示方式。

任務整合

VS Code 中的任務可以配置為在 VS Code 內部執行指令碼和啟動程序,而無需輸入命令列或編寫新程式碼。在 VS Code 中,你可以定義一個執行測試的預設測試任務,並可選地建立執行測試的鍵盤快捷鍵。

使用 Tasks: Configure Default Test Task (任務: 配置預設測試任務) 命令來配置預設測試任務。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"
    }
  ]
}

要執行測試任務,請使用 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+,)) 中找到所有與測試相關的設定。

後續步驟