Visual Studio 中的 JavaScript 和 TypeScript 单元测试

可以使用一些更常用的 JavaScript 框架在 Visual Studio 中编写和运行单元测试，而无需切换到命令提示符。 支持 Node.js 和 ASP.NET 核心项目。

支持的框架包括：

• Mocha (mochajs.org)
• 茉莉花（Jasmine.github.io）
• Tape (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 文件夹中。 指定 test 文件夹也是常见做法。

3. 在解决方案资源管理器中，右键单击 npm 节点，然后选择 安装新的 npm 包。

   使用 npm 包安装对话框安装以下 npm 包：

   • vitest

   此包将添加到依赖项下的 package.json 文件中。

   注意

   如果你在使用 jest，那么除了 jest 包外，你还需要安装 jest-editor-support npm 包。

4. 在 package.json中，在 scripts 节末尾添加 test 节：

   "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，请勿在 tsconfig.json中使用 outfile 选项，因为测试资源管理器无法找到单元测试。 可以使用 outdir 选项，但请确保 package.json 和 tsconfig.json 等配置文件位于项目根目录中。

运行测试 (.esproj)

可以通过在测试资源管理器中单击“全部运行”链接来运行测试。 或者，可以通过选择一个或多个测试或组来运行测试，右键单击并从快捷菜单中选择 运行。 测试在后台运行，测试资源管理器会自动更新并显示结果。 此外，还可以通过右键单击并选择“调试”来调试所选的测试。

下图显示了添加第二个单元测试的示例。

对于某些单元测试框架，单元测试通常针对生成的 JavaScript 代码运行。

注意

在大多数 TypeScript 方案中，可以通过在 TypeScript 代码中设置断点、在测试资源管理器中右键单击测试并选择 调试来调试单元测试。 在更复杂的场景中，例如某些使用源映射的场景，您可能很难在 TypeScript 代码中触发断点。 解决方法是尝试使用 debugger 关键字。

注意

目前不支持分析测试和代码覆盖率。

为 ASP.NET Core 编写单元测试

若要在 ASP.NET 核心项目中添加对 JavaScript 和 TypeScript 单元测试的支持，需要通过包括所需的 NuGet 包向项目添加 TypeScript、Npm 和单元测试支持。

添加单元测试（ASP.NET 核心）

以下示例基于 ASP.NET Core Model-View-Controller 项目模板，包括添加 Jest 或 Mocha 单元测试。

1. 创建 ASP.NET 核心模型View-Controller 项目。

   有关示例项目，请参阅 将 TypeScript 添加到现有 ASP.NET Core 应用。 对于单元测试支持，建议从标准 ASP.NET 核心项目模板开始。

2. 在解决方案资源管理器（右窗格）中，右键单击 ASP.NET 核心项目节点，然后选择 管理解决方案的 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 元素指定单元测试将位于项目根目录 测试文件夹中。

   <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"
     ]
   }
   

   scripts 文件夹是放置应用的 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中，在 scripts 节末尾添加 test 节：

    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. 打开测试资源管理器（选择“测试>Windows>测试资源管理器”），Visual Studio 将发现并显示测试。 如果测试最初未显示，请重新生成项目以刷新列表。 下图显示了 Jest 示例，其中包含两个不同的单元测试文件。

    

    注意

    对于 TypeScript，请勿在 tsconfig.json中使用 outfile 选项，因为测试资源管理器无法找到单元测试。 可以使用 outdir 选项，但请确保 package.json 和 tsconfig.json 等配置文件位于项目根目录中。

运行测试（ASP.NET 核心）

可以通过在测试资源管理器中单击“全部运行”链接来运行测试。 或者，可以通过选择一个或多个测试或组来运行测试，右键单击并从快捷菜单中选择 运行。 测试在后台运行，测试资源管理器会自动更新并显示结果。 此外，还可以通过右键单击并选择“调试”来调试所选的测试。

下图显示了 Jest 示例，添加了第二个单元测试。

测试资源管理器结果的

对于某些单元测试框架，单元测试通常针对生成的 JavaScript 代码运行。

注意

在大多数 TypeScript 方案中，可以通过在 TypeScript 代码中设置断点、在测试资源管理器中右键单击测试并选择 调试来调试单元测试。 在更复杂的场景中，例如在某些使用源映射的场景中，可能很难在 TypeScript 代码中命中断点。 解决方法是尝试使用 debugger 关键字。

注意

目前不支持分析测试和代码覆盖率。