測試

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)) 中使用 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.

您可以透過選取播放按鈕,從「測試總管」執行測試。在執行和偵錯測試章節中了解更多關於執行和偵錯測試的資訊。

提示

透過在「測試總管」檢視中雙擊測試,導覽至測試程式碼。如果您選取失敗的測試,編輯器會開啟測試檔案,突顯失敗的測試,並顯示錯誤訊息。

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

Test Explorer view with filtering options

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

如果您新增或變更測試,請使用重新整理測試按鈕重新整理「測試總管」中的測試清單。您也可以在「指令選擇區」(⇧⌘P (Windows、Linux Ctrl+Shift+P)) 中使用 Test Explorer: Reload tests 命令。

注意

根據測試擴充功能,您可能需要先設定測試框架或測試執行器才能探索專案中的測試。如需更多資訊,請查閱測試擴充功能的說明文件。您可以使用 Copilot 聊天檢視中的 setupTests 命令來協助設定專案的測試框架。

使用 AI 編寫測試

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

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

  • 編輯器智慧動作

    1. (選用)選取一個應用程式程式碼區塊

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

  • 聊天提示

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

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

    3. 輸入提示以產生測試,例如 Generate tests for this code. Also include tests for edge cases. (為此程式碼產生測試。也包含邊緣案例的測試。)

      透過在提示中輸入 #file 為您的提示新增額外內容。例如,Generate tests for this code #file:calculator.js (為此程式碼產生測試 #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 在 VS Code 中開啟 在 VS Code Insiders 中開啟 設定來設定間距控制項的預設測試動作。

執行一個或多個測試後,編輯器間距和「測試總管」中的樹狀檢視會顯示對應的測試狀態(通過/失敗)。當測試失敗時,請注意測試錯誤訊息會以覆疊方式顯示在編輯器中。

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

  • 作為編輯器中的覆疊

    對於具有測試涵蓋範圍的程式碼檔案,編輯器會在間距中顯示顏色覆疊,以指示哪些行被測試涵蓋或未涵蓋。當您將滑鼠游標停留在間距上時,請注意,對於已涵蓋的行,還有一個指示器顯示該行被執行的次數。您也可以選取編輯器標題列中的顯示內嵌涵蓋範圍按鈕,或使用 Test: Show Inline Coverage 命令 (⌘; ⇧⌘I (Windows、Linux Ctrl+; Ctrl+Shift+I)) 以切換涵蓋範圍覆疊。

    View coverage in editor

  • 在「檔案總管」檢視中,它顯示您的程式碼檔案的涵蓋範圍百分比

    「檔案總管」檢視會顯示您的程式碼檔案的涵蓋範圍百分比。將滑鼠游標停留在「檔案總管」中的檔案或節點上,以查看有關涵蓋範圍結果的更多詳細資訊。

    View coverage in Explorer view

  • 在差異編輯器中

    如果您開啟差異編輯器,涵蓋範圍結果也會顯示在差異編輯器中,類似於它們在編輯器中的顯示方式。

  • 在「測試涵蓋範圍」工具列中

    編輯器中的「測試涵蓋範圍」工具列顯示測試涵蓋範圍結果,讓您可以在未涵蓋的程式碼區塊之間導覽,並切換內嵌涵蓋範圍。使用 testing.coverageToolbarEnabled 在 VS Code 中開啟 在 VS Code Insiders 中開啟 設定來啟用「測試涵蓋範圍」工具列。

    Test Coverage toolbar

工作整合

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 的測試功能進行特殊整合,因此在工作中執行測試不會更新使用者介面。個別的測試擴充功能可以提供整合到使用者介面中的特定測試自動化功能。

測試組態設定

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

設定 ID 詳細資訊
testing.countBadge 在 VS Code 中開啟 在 VS Code Insiders 中開啟 控制「活動列」上「測試」圖示的計數徽章
testing.gutterEnabled 在 VS Code 中開啟 在 VS Code Insiders 中開啟 設定是否在編輯器間距中顯示測試控制項
testing.defaultGutterClickAction 在 VS Code 中開啟 在 VS Code Insiders 中開啟 設定選取間距測試控制項時的預設動作
testing.coverageBarThresholds 在 VS Code 中開啟 在 VS Code Insiders 中開啟 設定「測試涵蓋範圍」檢視中涵蓋範圍長條閾值的顏色
testing.displayedCoveragePercent 在 VS Code 中開啟 在 VS Code Insiders 中開啟 設定在「測試涵蓋範圍」檢視中顯示的百分比值(總計、陳述式或最小值)
testing.showCoverageInExplorer 在 VS Code 中開啟 在 VS Code Insiders 中開啟 設定是否在「檔案總管」檢視中顯示涵蓋範圍百分比

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

後續步驟

© . This site is unofficial and not affiliated with Microsoft.