Visual Studio 中的 JavaScript 和 TypeScript 单元测试

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

vstest.console .\MyProj.esproj /TestAdapterPath:"C:\Program Files\Microsoft Visual Studio\18\Enterprise\Common7\IDE\Extensions\Microsoft\JavaScript"

vstest.console .\MyProj.esproj /TestAdapterPath:"C:\Program Files\Microsoft Visual Studio\2022\Enterprise\Common7\IDE\Extensions\Microsoft\JavaScript"

为 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

   使用 NuGet 包添加 TypeScript 支持，而不是 npm TypeScript 包。

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

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

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

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

   • Jest
   • Mocha

   JavaScriptTestRoot 元素指定单元测试将位于项目根目录 测试文件夹中。

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

6. 在解决方案资源管理器中，右键单击 ASP.NET Core 项目节点，然后选择“添加 > 新项”。 选择 TypeScript JSON 配置文件，然后选择 添加。

   如果未看到所有项模板，请选择 显示所有模板，然后选择项模板。

   Visual Studio 将 tsconfig.json 文件添加到项目根目录。 可以使用此文件为 TypeScript 编译器配置选项。

7. 打开 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 应用。

8. 右键单击解决方案资源管理器中的项目，然后选择“添加”“新建项”（或按 Ctrl>SHIFTA） + + 。 使用搜索框查找 npm 文件，选择 npm 配置文件，使用默认名称，然后单击 添加。

   package.json 文件将添加到项目根目录。

9. 在解决方案资源管理器中，右键单击依赖项下的 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"
   

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

    • Jest
    • Mocha

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

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

    这会在 测试 文件夹下添加新文件。

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

    • Jest
    • Mocha

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

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

    

    注意

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

    重要

    如果“输出”窗口中的 测试 输出在测试发现过程中显示错误 ReadOnlySpan，请使用以下解决方法来解决已知的 MSBuild 问题。 在 Visual Studio 2022 中，打开文件夹 Program Files\Microsoft Visual Studio\2022\<version>\Common7\IDE\Extensions\TestPlatform，并将 System.Memory.dll 重命名为其他名称。 此补丁启用测试发现。

运行测试（ASP.NET 核心）

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

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

测试资源管理器结果的

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