Visual Studio 中的 JavaScript 和 TypeScript 單元測試

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

支援的架構如下：

• 莫查 （mochajs.org）
• 茉莉花 （Jasmine.github.io）
• 磁帶 （github.com/substack/tape）
• 傑斯特 （jestjs.io）
• Vitest （vitest.dev）

撰寫 CLI 型項目的單元測試 （.esproj）

Visual Studio 2022 支援的 基於 CLI 的專案 可與測試總管一起使用。 Vitest 是 React 和 Vue 專案的內建測試架構（先前稱為 Jest），而 Karma 和 Jasmine 則用於 Angular 專案。 根據預設，您將能夠執行每個架構所提供的預設測試，以及您撰寫的任何其他測試。 只要在 [測試總管] 中按一下 [執行] 按鈕即可。 如果您尚未開啟 [測試總管]，您可以在功能表欄中選取 [測試]>[測試總管]，即可找到它。

若要從命令行執行單元測試，請以滑鼠右鍵按兩下 [方案總管] 中的項目，選擇 [在終端機中開啟]，然後執行測試類型特定的命令。

如需設定單元測試的相關信息，請參閱下列各項：

• 使用 Vitest 進行 測試
• 使用 Jest 測試 React
• Angular 測試
• 測試 Vue.js

這裡也會提供簡單的範例。 不過，請使用上述連結取得完整資訊。

新增單元測試 （.esproj）

下列範例是以 Visual Studio 2022 17.12 版或更新版本中提供的 TypeScript React 專案範本為基礎，這是獨立 TypeScript React 專案 範本。 針對 Vue 和 Angular，步驟很類似。

1. 在 [方案總管] 裡，以滑鼠右鍵點選 React 專案，然後選擇 [編輯專案檔]。

2. 請確定下列屬性存在於 .esproj 檔案中，並顯示值。

   <PropertyGroup>
     <JavaScriptTestRoot>src\</JavaScriptTestRoot>
     <JavaScriptTestFramework>Vitest</JavaScriptTestFramework>
   </PropertyGroup> 
   

   此範例會將 Vitest 指定為測試架構。 您可以改為指定 Mocha、Tape、Jasmine 或 Jest。

   JavaScriptTestRoot 元素會指定單元測試將位於專案根目錄的 src 資料夾中。 通常也會指定 測試 資料夾。

3. 在 [方案總管] 中，以滑鼠右鍵按兩下 [npm] 節點，然後選擇 [安裝新的 npm 套件。

   使用 [npm 套件安裝] 對話框來安裝下列 npm 套件：

   • vitest

   此套件會新增至依賴項下的 package.json 檔案。

   注意

   如果您正在使用 jest，則除了需要 jest 套件以外，還需要 jest-editor-support npm 套件。

4. 在 package.json中，於 test 區段結尾新增 scripts 區段：

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

5. 在 [方案總管] 中，以滑鼠右鍵點擊 src 資料夾，然後選擇 [新增>新項目]，然後新增名為 App.test.tsx的新檔案。

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

6. 將下列程式代碼新增至 App.test.tsx。

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

7. 開啟 [測試總管]（選擇 [測試 測試>測試總管]），然後 Visual Studio 會探索並顯示測試。 如果測試一開始未顯示，請重建專案以重新整理清單。

   

   注意

   針對 TypeScript，請勿在 outfile中使用 選項，因為 [測試總管] 將無法找到單元測試。 您可以使用 [outdir] 選項，但請確定專案根目錄中有 package.json 和 tsconfig.json 等組態檔。

執行測試 （.esproj）

您可以按下 [測試總管] 中的 [執行所有] 連結，以執行測試。 或者，您可以選取一或多個測試或群組，右鍵點擊，然後從快捷選單中選取 [執行] 來執行測試。 測試會在背景執行，測試總管會自動更新並顯示結果。 此外，您可以右鍵單擊並選擇 [偵錯]來偵錯所選的測試。

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

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

注意

在大部分的 TypeScript 案例中，您可以在 TypeScript 程式代碼中設定斷點、在 [測試總管] 中以滑鼠右鍵點擊測試，然後選擇 [偵錯]，以偵錯單元測試。 在更複雜的情境中，例如某些使用原始碼對應的情境，您可能很難在 TypeScript 程式代碼中設置斷點。 作為因應措施，請嘗試使用 debugger 關鍵詞。

注意

目前不支援分析測試和程式代碼涵蓋範圍。

撰寫 ASP.NET Core 的單元測試

若要在 ASP.NET Core 專案中新增 JavaScript 和 TypeScript 的單元測試支援，您必須加入 TypeScript、Npm 和單元測試支援至專案，方法是包含必要的 NuGet 套件。

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

下列範例是以 ASP.NET Core Model-View-Controller 項目範本為基礎，並包含新增 Jest 或 Mocha 單元測試。

1. 建立 ASP.NET 核心模型-View-Controller 專案。

   如需範例專案，請參閱 將 TypeScript 新增至現有的 ASP.NET Core 應用程式。 如需單元測試支援，建議您從標準 ASP.NET Core 專案範本開始。

2. 在 [方案總管]（右窗格中），以滑鼠右鍵按一下 [ASP.NET Core 專案節點]，然後選取 [為方案管理 NuGet 套件]。

3. 在 [瀏覽] 索引標籤中，搜尋下列套件並安裝每個套件：

   • Microsoft.TypeScript.MSBuild
   • Npm
   • Microsoft.JavaScript.UnitTest

   使用 NuGet 套件來新增 TypeScript 支援，而不是 npm TypeScript 套件。

4. 在 [方案總管] 中，以滑鼠右鍵按兩下項目節點，然後選擇 [編輯項目檔] 。

   .csproj 檔案會在 Visual Studio 中開啟。

5. 將下列元素新增至 元素中的 PropertyGroup 檔案。

   此範例會將 Jest 或 Mocha 指定為測試架構。 您可以改為指定 Tape 或 Jasmine。

   Jest

   JavaScriptTestRoot 元素會指定單元測試將位於專案根目錄 測試資料夾中。

   <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>
   

6. 在 [方案總管] 中，以滑鼠右鍵按一下 [ASP.NET Core 專案] 節點，然後選取 [新增 > 新項目]。 選擇 TypeScript JSON 組態檔，然後選擇 新增。

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

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

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

   Jest

   {
     "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 應用程式。

8. 以滑鼠右鍵按兩下 [方案總管] 中的項目，然後選擇 [新增 >[或按 ctrl + SHIFT + A]。 使用搜尋方塊尋找 npm 檔案、選擇 [npm 組態檔]、使用預設名稱，然後按兩下 [新增]。

   package.json 檔案會新增至專案根目錄。

9. 在 [方案總管] 中，以滑鼠右鍵按兩下 [相依性] 下的 [npm] 節點，然後選擇 [安裝新的 npm 套件]。

   注意

   在某些情況下，方案總管可能不會顯示 npm 節點，因為存在此處描述的已知問題 。 如果您需要看到 npm 節點，您可以卸除專案（以滑鼠右鍵按兩下專案，然後選擇 [卸除專案]，然後重載專案，讓 npm 節點重新出現。 或者，您可以藉由建置專案，將套件專案新增至 package.json 並安裝。

   使用 [npm 套件安裝] 對話框來安裝下列 npm 套件：

   Jest

   • 開玩笑
   • jest-editor-support
   • @types/jest

   這些套件會新增至 devDependencies 底下的 package.json 檔案。

    "@types/jest": "^29.5.8",
    "jest": "^29.7.0",
    "jest-editor-support": "^31.1.2"
   

   莫查

   • 摩卡
   • 斷言
   • @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"
   

10. 在 package.json中，於 test 區段結尾新增 scripts 區段：

    Jest

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

    莫查

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

11. 在 [方案總管] 中，右鍵單擊 [測試] 資料夾，然後選擇 [新增>新項目]，接著新增一個名為 App.test.tsx的新檔案。

    這會在 [測試] 資料夾下新增一個新檔案。

12. 將下列程式代碼新增至 App.test.tsx。

    Jest

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

    莫查

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

13. 開啟 [測試總管]（選擇 [測試>Windows>測試總管]）後，Visual Studio 會探索並顯示測試。 如果測試一開始未顯示，請重建專案以重新整理清單。 下圖顯示 Jest 範例，其中包含兩個不同的單元測試檔案。

    

    注意

    針對 TypeScript，請勿在 outfile中使用 選項，因為 [測試總管] 將無法找到單元測試。 您可以使用 [outdir] 選項，但請確定專案根目錄中有 package.json 和 tsconfig.json 等組態檔。

執行測試 （ASP.NET Core）

您可以按下 [測試總管] 中的 [執行所有] 連結，以執行測試。 或者，您可以選取一或多個測試或群組，右鍵點擊，然後從快捷選單中選取 [執行] 來執行測試。 測試會在背景執行，測試總管會自動更新並顯示結果。 此外，您可以右鍵單擊並選擇 [偵錯]來偵錯所選的測試。

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

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

注意

在大部分的 TypeScript 案例中，您可以在 TypeScript 程式代碼中設定斷點、在 [測試總管] 中以滑鼠右鍵點擊測試，然後選擇 [偵錯]，以偵錯單元測試。 在更複雜的情境中，例如某些使用原始碼對應的情境，您可能很難在 TypeScript 程式代碼中設置斷點。 作為因應措施，請嘗試使用 debugger 關鍵詞。

注意

目前不支援分析測試和程式代碼涵蓋範圍。