在 Visual Studio 中对 JavaScript 和 TypeScript 代码进行单元测试

使用更受欢迎的 JavaScript 框架，无需切换到命令提示符，即可在 Visual Studio 中写入和运行单元测试。 支持 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 测试
• Angular 测试
• 测试 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 中，在 scripts 部分末尾添加 test 部分：

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

5. 在解决方案资源管理器中，右键单击 src 文件夹并选择“添加”>“新建项”，然后添加名为 App.test.tsx 的新文件。

   此操作会在 src 文件夹下添加新文件。

6. 将以下代码添加到 App.test.tsx。

   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 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 包（而不是 npm TypeScript 包）来添加 TypeScript 支持。

4. 在解决方案资源管理器中，右键单击项目节点，并选择“编辑项目文件”。

   将在 Visual Studio 中打开 .csproj 文件。

5. 将以下元素添加到元素中的 .csproj 文件中的 PropertyGroup 元素。

   此示例将 Jest 或 Mocha 指定为测试框架。 可以改为指定 Tape 或 Jasmine。

   Jest

   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>
   

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，请从 exclude 部分中删除 tests 文件夹。

   scripts 文件夹是放置应用的 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"
     ]
   }
   

   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

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

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

   穆哈咖啡

   • mocha
   • assert
   • @types/mocha
   • @types/node

   这些包将添加到 dev 依赖项下的 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"
    },
    

    穆哈咖啡

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

11. 在解决方案资源管理器中，右键单击 test 文件夹并选择“添加”>“新建项”，然后添加名为 App.test.tsx 的新文件。

    此操作会在 test 文件夹下添加新文件。

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

运行测试 (ASP.NET Core)

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

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

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

注意

在大多数 TypeScript 场景中，你可在 TypeScript 代码中设置断点，在测试资源管理器中右键单击一个测试，然后选择“调试”来调试单元测试。 在更复杂的场景中，例如在某些使用源映射的场景中，可能很难在 TypeScript 代码中命中断点。 一种变通方法是尝试使用 debugger 关键字。

注意

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