🚀 在 VS Code 中免費取得

測試

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. 開啟 [擴充功能] 檢視並安裝專案的測試擴充功能。依測試類別篩選擴充功能 (@category:"testing")。

  2. 選取活動列中的燒杯圖示 () 以開啟測試總管並探索專案中的測試。

  3. 從測試總管或直接從編輯器執行和偵錯測試。

測試擴充功能

您可以透過查看 Visual Studio Marketplace 來尋找支援測試的擴充功能。您也可以前往 [擴充功能] 檢視 (⇧⌘X (Windows、Linux Ctrl+Shift+X)),然後依測試類別篩選。

提示

Copilot 可以協助設定測試架構並建議相關的測試擴充功能。開啟 [聊天] 檢視 (⌃⌘I (Windows、Linux Ctrl+Alt+I)),輸入 /setupTests 命令,Copilot 將引導您完成設定專案的程序。

在測試檢視中自動探索測試

「測試」檢視提供集中位置來管理和執行測試。您可以選取活動列中的燒杯圖示 () 以進入「測試」檢視。您也可以在命令面板中使用 [測試: 焦點放在測試總管檢視] 命令 (⇧⌘P (Windows、Linux Ctrl+Shift+P))。

如果您有包含測試的專案,「測試總管」檢視會探索並列出工作區中的測試。依預設,探索到的測試會以樹狀檢視顯示在「測試總管」中。樹狀檢視符合測試的階層式結構,讓您輕鬆導覽和執行測試。

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

您可以從測試總管中選取播放按鈕來執行測試。如需執行和偵錯測試的詳細資訊,請參閱執行和偵錯測試章節。

提示

按兩下「測試總管」檢視中的測試,即可導覽至測試程式碼。如果您選取失敗的測試,編輯器會開啟測試檔案、醒目提示失敗的測試,並顯示錯誤訊息。

如果您有許多測試,可以使用篩選選項快速尋找您感興趣的測試。您可以使用 [篩選] 按鈕依狀態篩選測試,或僅顯示目前檔案的測試。您也可以使用搜尋方塊依名稱搜尋特定測試,或使用 @ 符號依狀態搜尋。

Test Explorer view with filtering options

[更多動作] 功能表中,您可以存取更多功能,例如排序和顯示選項。

如果您新增測試或變更測試,請使用 [重新整理測試] 按鈕重新整理測試總管中的測試清單。您也可以在命令面板中使用 [測試總管: 重新載入測試] 命令 (⇧⌘P (Windows、Linux Ctrl+Shift+P))。

注意

根據測試擴充功能,您可能必須先設定測試架構或測試執行器,才能探索專案中的測試。如需詳細資訊,請參閱測試擴充功能的文件。您可以使用 Copilot Chat 檢視中的 setupTests 命令,取得設定專案測試架構的協助。

使用 AI 撰寫測試

撰寫測試可能很耗時,而且經常被忽略。Copilot 可以透過為您的應用程式建立測試程式碼,來加速撰寫測試的程序。您可以使用它來撰寫單元測試、整合測試、端對端測試等等。

若要在 VS Code 中使用 Copilot 撰寫測試,您可以使用下列其中一種方法

  • 編輯器智慧動作

    1. 選擇性地選取應用程式程式碼區塊

    2. 在編輯器中按一下滑鼠右鍵,然後選取 [Copilot] > [產生測試]

  • 聊天提示

    1. 開啟您要為其產生測試的應用程式程式碼檔案

    2. 開啟 Copilot 編輯 (⇧⌘I (Windows Ctrl+Shift+I、Linux Ctrl+Shift+Alt+I))、[聊天] 檢視 (⌃⌘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.

使用測試總管中的 [顯示輸出] 按鈕,在 [測試結果] 面板中檢視測試輸出。

Test Results panel

提示

Copilot 可以協助您修正失敗的測試。在測試總管中,將滑鼠指標停留在樹狀檢視上方,然後選取 [修正測試失敗] 按鈕 (sparkle),Copilot 將建議失敗測試的修正方式。或者,在 Copilot Chat 中輸入 /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

  • 以覆疊方式顯示在編輯器中

    對於具有測試涵蓋率的程式碼檔案,編輯器會在邊界中顯示色彩覆疊,以指出哪些程式碼行被測試涵蓋或未涵蓋。當您將滑鼠指標停留在邊界上方時,請注意,對於涵蓋的程式碼行,也會有程式碼行執行次數的指示器。您也可以選取編輯器標題列中的 [顯示內嵌涵蓋率] 按鈕,或使用 [測試: 顯示內嵌涵蓋率] 命令 (⌘; ⇧⌘I (Windows、Linux Ctrl+; Ctrl+Shift+I)) 來切換涵蓋率覆疊。

    View coverage in editor

  • 在 [檔案總管] 檢視中,其中顯示程式碼檔案的涵蓋率百分比

    「檔案總管」檢視會顯示程式碼檔案的涵蓋率百分比。將滑鼠指標停留在「檔案總管」中的檔案或節點上方,即可查看涵蓋率結果的更多詳細資料。

    View coverage in Explorer view

  • 在差異編輯器中

    如果您已開啟差異編輯器,則涵蓋率結果也會顯示在差異編輯器中,與在編輯器中顯示的方式類似。

工作整合

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+,))。

後續步驟