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

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

支援的架構包括：

• Mocha (mochajs.org)
• Jasmine (Jasmine.github.io)
• Tape (github.com/substack/tape)
• Jest (jestjs.io)

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

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

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

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

• 用 Jest 測試 React
• 角度測試
• 測試 Vue.js

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

新增單元測試 (.esproj)

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

1. 在解決方案資源管理器中，以滑鼠右鍵按一下 React 專案並選擇編輯專案檔案。

2. 確保 .esproj 檔案中存在下列屬性以及顯示的值。

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

   此範例指定 Jest 作為測試框架。 您可以指定 Mocha、Tape 或 Jasmine。

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

3. 在解決方案資源管理器中，以滑鼠右鍵按一下 npm 節點並選擇安裝新的 npm 套件。

   使用 npm 套件安裝對話框安裝以下 npm 套件：

   • jest
   • jest-editor-support

   這些套件將會新增到相依性下的 package.json 檔案中。

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

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

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

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

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

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

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

   

   注意

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

執行測試 (.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 單元測試。

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

   如需範例項目，請參閱將 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 元素中的 .csproj 檔案。

   此範例指定 Jest 或 Mocha 作為測試框架。 您可以指定 Tape 或 Jasmine。

   Jest

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

   <PropertyGroup>
      ...
      <JavaScriptTestRoot>tests\</JavaScriptTestRoot>
      <JavaScriptTestFramework>Jest</JavaScriptTestFramework>
      <GenerateProgramFile>false</GenerateProgramFile>
   </PropertyGroup>
   

   Mocha

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

   Mocha

   {
     "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
   • jest-editor-support
   • @types/jest

   這些套件將會加入 devDependencies 下的 package.json 檔案中。

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

   Mocha

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

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

    Jest

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

    Mocha

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

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

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

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

    Jest

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

    Mocha

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

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

    

    注意

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

執行測試 (ASP.NET Core)

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

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

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

注意

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

注意

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