🚀 在 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 聊天檢視中的 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 可以協助您修正失敗的測試。在測試總管中,將滑鼠停留在樹狀檢視上方,然後選取修正測試失敗按鈕 (閃爍),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

  • 以重疊顯示在編輯器中

    對於具有測試涵蓋率的程式碼檔案,編輯器會在邊界中顯示色彩重疊,以指出哪些程式碼行被測試涵蓋或未涵蓋。當您將滑鼠停留在邊界上方時,請注意,對於涵蓋的程式碼行,也會有一個指標顯示該程式碼行執行的次數。您也可以選取編輯器標題列中的顯示內嵌涵蓋率按鈕,或使用測試:顯示內嵌涵蓋率命令 (⌘; ⇧⌘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 檔案供您自訂工作。

下列程式碼片段顯示指定 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"
    }
  ]
}

若要執行測試工作,請使用命令工作:執行測試工作或為命令建立鍵盤快速鍵

深入了解使用和設定工作

注意

目前,工作沒有特殊整合到 VS Code 的測試功能中,因此在工作中執行測試不會更新使用者介面。個別測試擴充功能可以提供整合到 UI 中的特定測試自動化功能。

測試組態設定

您可以設定多個設定來自訂 VS Code 中的測試體驗。每個語言擴充功能都可以提供特定於該語言中測試的其他設定。以下是一些您可以設定的常見設定

設定 ID 詳細資料
testing.countBadge 控制活動列上測試圖示的計數徽章
testing.gutterEnabled 設定是否在編輯器邊界中顯示測試控制項
testing.defaultGutterClickAction 設定選取邊界測試控制項時的預設動作
testing.coverageBarThresholds 設定測試涵蓋率檢視的涵蓋率長條圖臨界值的色彩
testing.displayedCoveragePercent 設定測試涵蓋率檢視中顯示的百分比值 (總計、陳述式或最小值)
testing.showCoverageInExplorer 設定是否在檔案總管檢視中顯示涵蓋率百分比

您可以在設定編輯器 (⌘, (Windows、Linux Ctrl+,)) 中找到所有與測試相關的設定。

後續步驟