在 Visual Studio 中對 JavaScript 和 TypeScript 進行單元測試

發行項
02/21/2024

您可以在 Visual Studio 中撰寫和執行單元測試，方法是使用一些較熱門的 JavaScript 架構，而不需要切換到命令提示字元。同時支援 Node.js 和 ASP.NET Core 專案。

支援的架構包括：

如果不支援您最愛的架構，請參閱新增單元測試架構的支援，以取得新增支援的資訊。

撰寫 CLI 型專案的單元測試 (.esproj)

Visual Studio 2022 中支援的 CLI 型專案會使用測試總管。 Jest 是 React 和 Vue 專案的內建測試架構，而 Karma 和 Jasmine 則用於 Angular 專案。根據預設，您將能夠執行每個架構所提供的預設測試，以及您撰寫的任何其他測試。只要在測試總管中點擊 [執行] 按鈕即可。如果您尚未開啟測試總管，則可以在功能表列中選取 [測試]>[測試總管] 來找到此測試總管。

若要從命令列執行單元測試，請右鍵按一下解決方案資源管理器中的項目，選擇在終端機中開啟，然後執行特定於測試類型的命令。

有關設定單元測試的資訊，請參閱以下內容：

這裡還提供了一個簡單的例子。但是，請使用前面的連結獲取完整資訊。

新增單元測試 (.esproj)

以下範例基於 Visual Studio 2022 版本 17.8 或更高版本中提供的 TypeScript React 專案範本，即獨立 TypeScript React 專案範本。對於 Vue 和 Angular，步驟類似。

在解決方案資源管理器中，以滑鼠右鍵按一下 React 專案並選擇編輯專案檔案。
確保 .esproj 檔案中存在下列屬性以及顯示的值。
```
<PropertyGroup>
  <JavaScriptTestRoot>src\</JavaScriptTestRoot>
  <JavaScriptTestFramework>Jest</JavaScriptTestFramework>
</PropertyGroup> 
```
此範例指定 Jest 作為測試框架。您可以指定 Mocha、Tape 或 Jasmine。

此JavaScriptTestRoot元素指定您的單元測試將位於專案根目錄的 src 資料夾中。
在解決方案資源管理器中，以滑鼠右鍵按一下 npm 節點並選擇安裝新的 npm 套件。

使用 npm 套件安裝對話框安裝以下 npm 套件：
- jest
- jest-editor-support
這些套件將會新增到相依性下的 package.json 檔案中。
在 package.json 中，在該部分的test結尾增加scripts該部分：
```
"scripts": {
   ...
   "test": "jest"
},
```
在解決方案資源管理器中，右鍵點選 src 資料夾並選擇新增>項目，然後新增一個名為 App.test.tsx 的新檔案。

這會將新檔案新增到 src 資料夾下。

將以下程式碼加入 App.test.tsx。

describe('testAsuite', () => {
   it('testA1', async () => {
      expect(2).toBe(2);
   });
});

開啟測試資源管理器（選擇 Test>Test Explorer），Visual Studio 會發現並顯示測試。如果一開始未顯示測試，則重建專案以重新整理清單。

注意

對於 TypeScript，請勿在 tsconfig.json 中使用 outfile 選項，因為測試總管無法找到您的單元測試。您可以使用 outdir 選項，但請確定 package.json 和 tsconfig.json 之類的設定檔位於專案根目錄中。

執行測試 (.esproj)

您可以按一下 [測試總管] 中的 [全部執行] 連結來執行測試。或者，您可以選取一或多個測試或群組、按一下滑鼠右鍵，然後從捷徑功能表中選取 [執行] 來執行測試。測試會在背景中執行，而 [測試總管] 會自動更新並顯示結果。此外，您也可以按一下滑鼠右鍵並選取 [偵錯] 來偵錯選取的測試。

下圖顯示了新增了第二個單元測試的範例。

Screenshot of Test Explorer results (.esproj).

對於某些單元測試框架，單元測試通常會針對產生的 JavaScript 程式碼執行。

注意

在大部分的 TypeScript 案例中，您可以在 TypeScript 程式碼中設定中斷點、以滑鼠右鍵按一下測試總管中的測試，然後選擇 [偵錯]，來偵錯單元測試。在更複雜的案例中，例如某些使用來源對應的案例，您可能很難在 TypeScript 程式碼中叫用中斷點。因應措施是嘗試使用 debugger 關鍵字。

注意

目前不支援分析測試和程式碼覆蓋率。

撰寫 ASP.NET Core 的單元測試

要在 ASP.NET Core 專案中新增對 JavaScript 和 TypeScript 單元測試的支援，需要透過包含所需的 NuGet 套件來為專案新增 TypeScript、Npm 和單元測試支援。

新增單元測試（ASP.NET Core）

以下範例基於 ASP.NET Core 模型-視圖-控制器專案範本，並包含新增 Jest 或 Mocha 單元測試。

建立 ASP.NET Core 模型-視圖-控制器專案。

如需範例項目，請參閱將 TypeScript 新增至現有 ASP.NET Core 應用程式。如需單元測試支援，建議您開始使用標準 ASP.NET Core 專案範本。
在解決方案資源管理器（右窗格）中，以滑鼠右鍵按一下 ASP.NET Core 專案節點並選擇管理解決方案的 NuGet 套件。
在瀏覽標籤中，搜尋以下軟體包並安裝每個軟體包：
使用 NuGet 套件來新增 TypeScript 支援，而不是 npm TypeScript 套件。
在解決方案資源管理器中，右鍵點選專案節點並選擇編輯專案文件。

此 .csproj 檔案在 Visual Studio 中開啟。
將下列元素新增至 PropertyGroup 元素中的 .csproj 檔案。

此範例指定 Jest 或 Mocha 作為測試框架。您可以指定 Tape 或 Jasmine。
- Jest
- Mocha
JavaScriptTestRoot 元素會指定您的單元測試將位於專案根目錄的 tests 資料夾中。
```
<PropertyGroup>
   ...
   <JavaScriptTestRoot>tests\</JavaScriptTestRoot>
   <JavaScriptTestFramework>Jest</JavaScriptTestFramework>
   <GenerateProgramFile>false</GenerateProgramFile>
</PropertyGroup>
```
此JavaScriptTestRoot元素指定單元測試的位置。為了簡化 Mocha 的配置，在本範例中，我們將測試根目錄指向輸出資料夾 *wwwroot\js\tests*。
```
<PropertyGroup>
   ...
   <JavaScriptTestRoot>wwwroot\js\tests\</JavaScriptTestRoot>
   <JavaScriptTestFramework>Mocha</JavaScriptTestFramework>
   <GenerateProgramFile>false</GenerateProgramFile>
</PropertyGroup>
```
在解決方案資源管理器中，以滑鼠右鍵按一下 ASP.NET Core 專案節點並選擇>新增項目。選擇 [TypeScript JSON 組態檔]，然後選取 [新增]。

如果您沒有看到所有項目範本，請選取 [顯示所有範本]，然後選擇項目範本。

Visual Studio 會將 tsconfig.json 檔案新增至專案根目錄。您可以使用此檔案，為 TypeScript 編譯器設定選項。

開啟 tsconfig.json，並將預設程式碼取代為下列程式碼：

Jest
Mocha

{
  "compileOnSave": true,
  "compilerOptions": {
     "noImplicitAny": false,
     "noEmitOnError": true,
     "removeComments": false,
     "sourceMap": true,
     "target": "es5",
     "outDir": "wwwroot/js"
  },
  "include": [
    "scripts/**/*"
  ],
  "exclude": [
   "node_modules",
   "tests"
  ]
}

對於 Jest，如果要將 TypeScript 測試編譯為 JavaScript，請從排除部分中刪除測試資料夾。

該腳本資料夾是您可以放置應用程式的 TypeScript 程式碼的位置。有關新增程式碼的範例項目，請參閱將 TypeScript 新增至現有 ASP.NET Core 應用程式。

{
  "compileOnSave": true,
  "compilerOptions": {
     "noImplicitAny": false,
     "noEmitOnError": true,
     "removeComments": false,
     "sourceMap": true,
     "target": "es5",
     "outDir": "wwwroot/js"
  },
  "include": [
     "scripts/**/*",
     "tests/**/*"
  ],
  "exclude": [
     "node_modules"
  ]
}

該腳本資料夾是您可以放置應用程式的 TypeScript 程式碼的位置。有關新增程式碼的範例項目，請參閱將 TypeScript 新增至現有 ASP.NET Core 應用程式。

在解決方案資源管理器中以滑鼠右鍵按一下該項目，然後選擇>新增項目（或按 Ctrl + SHIFT + A）。使用搜尋方塊來尋找 npm 檔案、選擇 npm 設定檔、使用預設名稱，然後按一下 [新增]。

一個 package.json 檔案將會加入到專案根目錄。
在解決方案資源管理器中，以滑鼠右鍵按一下相依項下的 npm 節點，然後選擇安裝新的 npm 套件。

注意

在某些情況下，由於此處所述的已知問題，解決方案資源管理器可能不會顯示 npm 節點。如果您需要看到 npm 節點，則可以卸載專案 (以滑鼠右鍵按一下專案並選擇 [卸載專案])，然後重新載入專案，讓 npm 節點重新出現。或者，您可以將套件條目新增至 package.json 並透過建置專案進行安裝。

使用 npm 套件安裝對話框安裝以下 npm 套件：
- Jest
- Mocha
- jest
- jest-editor-support
- @types/jest
這些套件將會加入 devDependencies 下的 package.json 檔案中。
```
 "@types/jest": "^29.5.8",
 "jest": "^29.7.0",
 "jest-editor-support": "^31.1.2"
```
- mocha
- assert
- @types/mocha
- @types/node
這些套件將會加入 devDependencies 下的 package.json 檔案中。
```
 "@types/mocha": "^10.0.5",
 "@types/node": "^20.9.2",
 "assert": "^2.1.0",
 "mocha": "^10.2.0"
```

在 package.json 中，在該部分的test結尾增加scripts該部分：

Jest
Mocha

"scripts": {
   ...
   "test": "jest"
},

"scripts": {
   ...
   "test": "mocha"
},

在解決方案資源管理器中，右鍵點選測試資料夾並選擇新增>項目，然後新增一個名為 App.test.tsx 的新檔案。

這將在測試資料夾下新增檔案。

將以下程式碼加入 App.test.tsx。

Jest
Mocha

describe('testAsuite', () => {
   it('testA1', async () => {
      expect(2).toBe(2);
   });
});

var assert = require('assert');

describe('testAsuite', function () {
   it('testA1', function () {
      assert.equal(1, 1);
   })
})

開啟測試總管 (選擇 [測試]>[視窗]>[測試總管])，且 Visual Studio 會探索並顯示測試。如果一開始未顯示測試，則重建專案以重新整理清單。下圖顯示了 Jest 範例，其中包含兩個不同的單元測試檔案。

注意

對於 TypeScript，請勿在 tsconfig.json 中使用 outfile 選項，因為測試總管無法找到您的單元測試。您可以使用 outdir 選項，但請確定 package.json 和 tsconfig.json 之類的設定檔位於專案根目錄中。

執行測試 (ASP.NET Core)

下圖顯示了 Jest 範例，並新增了第二個單元測試。

Screenshot of Test Explorer results (ASP.NET Core).

對於某些單元測試框架，單元測試通常會針對產生的 JavaScript 程式碼執行。

注意

目前不支援分析測試和程式碼覆蓋率。

新增單元測試架構的支援

您可以使用 JavaScript 實作探索和執行邏輯，以新增其他測試架構的支援。

注意

針對 ASP.NET Core，請將 NuGet 套件 Microsoft.JavaScript.UnitTest 新增至專案以新增支援。

您可以使用測試架構的名稱新增資料夾來完成此動作：

<VisualStudioFolder>\Common7\IDE\Extensions\Microsoft\NodeJsTools\TestAdapter\TestFrameworks

如果您未在 ASP.NET Core 專案中看到 NodeJsTools 資料夾，請使用 Visual Studio 安裝程式新增 Node.js 開發工作負載。此工作負載包含單元測試 JavaScript 和 TypeScript 的支援。

此資料夾必須包含具有相同名稱的 JavaScript 檔案，該檔案會匯出下列兩個函式：

find_tests
run_tests

如需 find_tests 和 run_tests 實作的良好範例，請參閱下列檔案中 Mocha 單元測試架構的實作：

<VisualStudioFolder>\Common7\IDE\Extensions\Microsoft\NodeJsTools\TestAdapter\TestFrameworks\mocha\mocha.js

探索可用的測試架構會在 Visual Studio 啟動時發生。如果在 Visual Studio 執行時新增架構，請重新啟動 Visual Studio 來偵測此架構。不過，當您對實作進行變更時，不需要重新啟動。

.NET Framework 中的單元測試

您並不限於只能在 Node.js 和 ASP.NET Core 專案中撰寫單元測試。當您將 TestFramework 和 TestRoot 屬性新增至任何 C# 或 Visual Basic 專案時，會列舉那些測試，且您可以使用 [測試總管] 視窗執行它們。

若要啟用此功能，請以滑鼠右鍵按一下 [方案總管] 中的專案節點、選擇 [卸載專案]，然後選擇 [編輯專案]。然後在專案檔中，將下列兩個項目新增至屬性群組。

重要

請確定您要新增項目的屬性群組不包含指定的條件。這可能會導致非預期的行為。

<PropertyGroup>
    <JavaScriptTestRoot>tests\</JavaScriptTestRoot>
    <JavaScriptTestFramework>Tape</JavaScriptTestFramework>
</PropertyGroup>

接下來，將測試新增至您指定的測試根資料夾，它們便可在 [測試總管] 視窗中執行。如果它們最初沒有出現，您可能需要重建項目。

.NET Core 與 .NET Standard 中的單元測試

除了前面針對 .NET Framework 所述的屬性之外，您還需要安裝 NuGet 套件 Microsoft.JavaScript.UnitTest 並設定屬性：

<PropertyGroup>
    <GenerateProgramFile>false</GenerateProgramFile>
</PropertyGroup>

某些測試框架可能需要額外的 npm 套件來進行測試檢測。例如，jest 需要 jest-editor-support npm 套件。如有必要，請檢查特定架構的文件。

在 Node.js 專案中撰寫單元測試 (.njsproj)

對於 Node.js 專案，在將單元測試新增至您的專案之前，請確定您打算使用的架構已安裝在本機專案中。使用 npm 套件安裝視窗可以輕鬆地完成此動作。

將單元測試新增至專案的慣用方法是在專案中建立 tests 資料夾，並在專案屬性中將其設定為測試根目錄。您還必須選取要使用的測試架構。

Screenshot of set test root and test framework.

您可以使用 [新增項目] 對話方塊，將簡單的空白測試新增至您的專案。相同專案中同時支援 JavaScript 和 TypeScript。

Screenshot of how to add new unit test.

如果是 Mocha 單元測試，請使用下列程式碼：

var assert = require('assert');

describe('Test Suite 1', function() {
    it('Test 1', function() {
        assert.ok(true, "This shouldn't fail");
    })

    it('Test 2', function() {
        assert.ok(1 === 1, "This shouldn't fail");
        assert.ok(false, "This should fail");
    })
})

如果您尚未在專案屬性中設定單元測試選項，則必須確定 [屬性] 視窗中的 [測試架構] 屬性已針對您的單元測試檔案設定為正確的測試架構。這是由單元測試檔案範本自動完成。

Screenshot of choosing Test Framework.

注意

單元測試選項優先於個別檔案的設定。

開啟 [測試總管] (選擇 [測試]>[Windows]>[測試總管]) 之後，Visual Studio 會探索並顯示測試。如果一開始未顯示測試，則重建專案以重新整理清單。

Screenshot of Test Explorer.

注意

對於 TypeScript，請勿在 tsconfig.json 中使用 outdir 或 outfile 選項，因為測試總管將無法找到您的單元測試。

執行測試 (Node.js)

您可以在 Visual Studio 中執行測試，或從命令列執行測試。

在 Visual Studio 中執行測試

對於 TypeScript，單元測試會針對產生的 JavaScript 程式碼執行。

注意

我們目前不支援分析測試或程式碼涵蓋範圍。

從命令列執行測試

您可以使用下列命令，從 Visual Studio 的開發人員命令提示字元執行測試：

vstest.console.exe <path to project file>\NodejsConsoleApp23.njsproj /TestAdapterPath:<VisualStudioFolder>\Common7\IDE\Extensions\Microsoft\NodeJsTools\TestAdapter

這個命令會顯示與下列類似的輸出：

Microsoft (R) Test Execution Command Line Tool Version 15.5.0
Copyright (c) Microsoft Corporation.  All rights reserved.

Starting test execution, please wait...
Processing: NodejsConsoleApp23\NodejsConsoleApp23\UnitTest1.js
  Creating TestCase:NodejsConsoleApp23\NodejsConsoleApp23\UnitTest1.js::Test Suite 1 Test 1::mocha
  Creating TestCase:NodejsConsoleApp23\NodejsConsoleApp23\UnitTest1.js::Test Suite 1 Test 2::mocha
Processing finished for framework of Mocha
Passed   Test Suite 1 Test 1
Standard Output Messages:
 Using default Mocha settings
 1..2
 ok 1 Test Suite 1 Test 1

Failed   Test Suite 1 Test 2
Standard Output Messages:
 not ok 1 Test Suite 1 Test 2
   AssertionError [ERR_ASSERTION]: This should fail
       at Context.<anonymous> (NodejsConsoleApp23\NodejsConsoleApp23\UnitTest1.js:10:16)

Total tests: 2. Passed: 1. Failed: 1. Skipped: 0.
Test Run Failed.
Test execution time: 1.5731 Seconds

注意

如果您收到錯誤，指出找不到 vstest.console.exe，請確定您已開啟開發人員命令提示字元，而不是一般的命令提示字元。

共用方式為