Модульное тестирование JavaScript и TypeScript в Visual Studio

Вы можете создавать и запускать модульные тесты в Visual Studio с помощью некоторых из более популярных платформ JavaScript без необходимости переключиться в командную строку. Поддерживаются как Node.js, так и ASP.NET основные проекты.

Поддерживаемые платформы:

• Mocha (mochajs.org)
• Jasmine (Jasmine.github.io)
• Лента (github.com/substack/tape)
• Jest (jestjs.io)
• Vitest (vitest.dev)

Написание модульных тестов для проекта на основе ИНТЕРФЕЙСА командной строки (.esproj)

Проекты на основе интерфейса командной строки, поддерживаемые в Visual Studio 2022, работают с обозревателем тестов. Vitest — это встроенная тестовая платформа для проектов React и Vue (ранее Jest), а Карма и Jasmine используются для проектов Angular. По умолчанию вы сможете выполнять тесты по умолчанию, предоставляемые каждой платформой, а также любые дополнительные тесты, которые вы пишете. Просто нажмите кнопку "Запустить " в обозревателе тестов. Если у вас еще нет открытого обозревателя тестов, его можно найти, выбравобозреватель тестов> в строке меню.

Чтобы запустить модульные тесты из командной строки, щелкните правой кнопкой мыши проект в обозревателе решений, выберите "Открыть в терминале" и выполните команду, определенную для типа теста.

Дополнительные сведения о настройке модульных тестов см. в следующих статьях:

• Тестирование с помощью Vitest
• Тестирование React с помощью Jest
• Тестирование Angular
• Тестирование Vue.js

Здесь также приведен простой пример. Однако используйте приведенные выше ссылки для получения полных сведений.

Добавление модульного теста (.esproj)

Следующий пример основан на шаблоне проекта TypeScript React, предоставленном в Visual Studio 2022 версии 17.12 или более поздней версии, который является шаблоном автономного проекта 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, пакет npm поддержки jest-editor-support требуется, а также пакет jest.

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 параметр в tsconfig.json, так как обозреватель тестов не сможет найти модульные тесты. Этот параметр можно использовать outdir , но убедитесь, что файлы конфигурации, такие как package.json и tsconfig.json находятся в корневом каталоге проекта.

   Это важно

   Если выходные данные тестов в окне вывода отображают ошибку ReadOnlySpan во время обнаружения тестов, используйте следующее решение для известной проблемы MSBuild. Для <, откройте папку <, и переименуйте System.Memory.dll в другое название. Это исправление включает обнаружение тестов.

Выполнение тестов (.esproj)

Вы можете выполнить тесты, щелкнув ссылку "Выполнить все " в обозревателе тестов. Кроме того, можно выполнить тесты, выбрав один или несколько тестов или групп, щелкнув правой кнопкой мыши и выбрав команду "Выполнить " в контекстном меню. Тесты выполняются в фоновом режиме и обозревателе тестов автоматически обновляются и отображают результаты. Кроме того, можно также выполнить отладку выбранных тестов, щелкнув правой кнопкой мыши и выбрав "Отладка".

На следующем рисунке показан пример с добавленным вторым модульным тестом.

Для некоторых платформ модульных тестов модульные тесты обычно выполняются в созданном коде JavaScript.

Замечание

В большинстве сценариев TypeScript можно выполнить отладку модульного теста, установив точку останова в коде TypeScript, щелкнув правой кнопкой мыши тест в обозревателе тестов и выбрав "Отладка". В более сложных сценариях, таких как некоторые сценарии, использующие исходные карты, в коде TypeScript могут возникнуть трудности при достижении точек останова. В качестве обходного решения попробуйте использовать ключевое debugger слово.

Замечание

Тесты профилирования и покрытие кода в настоящее время не поддерживаются.

Запуск модульных тестов в консоли для проекта на основе командной строки (.esproj)

Модульные тесты можно запускать непосредственно из командной строки для платформы модульных тестов так же, как и в случае, если вы не использовали Visual Studio.

Вы также можете запустить тесты из командной строки с помощью vstest.console. Например, можно использовать vstest.console для поддержания согласованности с модульными тестами C# или для запуска в Azure DevOps. Используйте следующую команду, но замените MyProj именем вашего проекта.

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

Написание модульных тестов для ASP.NET Core

Чтобы добавить поддержку модульного тестирования JavaScript и TypeScript в проекте ASP.NET Core, необходимо добавить поддержку TypeScript, npm и модульного тестирования в проект, включая необходимые пакеты NuGet.

Добавление модульного теста (ASP.NET Core)

Следующий пример основан на шаблоне проекта ASP.NET Core Model-View-Controller и включает добавление модульного теста Jest или Mocha.

1. Создайте проект ASP.NET Core Model-View-Controller.

   Пример проекта см. в разделе "Добавление TypeScript" в существующее приложение ASP.NET Core. Для поддержки модульного тестирования рекомендуется начать с стандартного шаблона проекта ASP.NET Core.

2. В обозревателе решений (справа) щелкните правой кнопкой мыши узел проекта ASP.NET Core и выберите пункт "Управление пакетами NuGet для решений".

3. На вкладке "Обзор" найдите следующие пакеты и установите каждый из них:

   • Microsoft.TypeScript.MSBuild
   • Npm

   Используйте пакет NuGet для добавления поддержки TypeScript вместо пакета npm TypeScript.

4. В обозревателе решений щелкните правой кнопкой мыши узел проекта и выберите пункт "Изменить файл проекта".

   Csproj-файл открывается в Visual Studio.

5. Добавьте следующие элементы в CSPROJ-файл в PropertyGroup элемент.

   В этом примере указывается Jest или Mocha в качестве тестовой платформы. Вместо этого можно указать Ленту или Jasmine.

   Шутка

   Элемент 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 и выберите "Добавить > новый элемент". Выберите файл конфигурации JSON TypeScript, а затем выберите Добавить.

   Если вы не видите все шаблоны элементов, выберите показать все шаблоны, а затем выберите шаблон элемента.

   Visual Studio добавляет файл tsconfig.json в корневой каталог проекта. Этот файл можно использовать для настройки параметров компилятора TypeScript.

7. Откройте tsconfig.json и замените код по умолчанию следующим кодом:

   Шутка

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

   Эти пакеты добавляются в файл package.json в разделе devDependencies.

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

   Мокко

   • мокко
   • утверждать
   • @types/mocha
   • @types/node

   Эти пакеты добавляются в файл package.json в разделе devDependencies.

    "@types/mocha": "^10.0.5",
    "@types/node": "^20.9.2",
    "assert": "^2.1.0",
    "mocha": "^10.2.0"
   

10. В package.jsonдобавьте test раздел в конце scripts раздела:

    Шутка

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

    Мокко

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

11. В обозревателе решений щелкните правой кнопкой мыши тестовую папку и выберите команду "Добавить>новый элемент", а затем добавьте новый файл с именем App.test.tsx.

    При этом новый файл добавляется в тестовую папку.

12. Добавьте следующий код в App.test.tsx.

    Шутка

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

    Мокко

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

13. Откройте обозреватель тестов (выберите>обозреватель тестов>) и Visual Studio обнаруживает и отображает тесты. Если тесты не отображаются изначально, перестройте проект, чтобы обновить список. На следующем рисунке показан пример Jest с двумя разными файлами модульного теста.

    

    Замечание

    Для TypeScript не используйте outfile параметр в tsconfig.json, так как обозреватель тестов не сможет найти модульные тесты. Этот параметр можно использовать outdir , но убедитесь, что файлы конфигурации, такие как package.json и tsconfig.json находятся в корневом каталоге проекта.

Выполнение тестов (ASP.NET Core)

Вы можете выполнить тесты, щелкнув ссылку "Выполнить все " в обозревателе тестов. Кроме того, можно выполнить тесты, выбрав один или несколько тестов или групп, щелкнув правой кнопкой мыши и выбрав команду "Выполнить " в контекстном меню. Тесты выполняются в фоновом режиме и обозревателе тестов автоматически обновляются и отображают результаты. Кроме того, можно также выполнить отладку выбранных тестов, щелкнув правой кнопкой мыши и выбрав "Отладка".

На следующем рисунке показан пример Jest с добавленным вторым модульным тестом.

Для некоторых платформ модульных тестов модульные тесты обычно выполняются в созданном коде JavaScript.

Замечание

В большинстве сценариев TypeScript можно выполнить отладку модульного теста, установив точку останова в коде TypeScript, щелкнув правой кнопкой мыши тест в обозревателе тестов и выбрав "Отладка". В более сложных сценариях, таких как некоторые сценарии, использующие исходные карты, в коде TypeScript могут возникнуть трудности при достижении точек останова. В качестве обходного решения попробуйте использовать ключевое debugger слово.

Замечание

Тесты профилирования и покрытие кода в настоящее время не поддерживаются.