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

Вы можете писать и выполнять модульные тесты в 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)

Проекты на основе CLI, поддерживаемые в Visual Studio 2022, работают с обозревателем тестов. Jest — это встроенная платформа тестирования для проектов React и Vue, а Karma и Jasmine используются для проектов Angular. По умолчанию вы сможете выполнять тесты, по умолчанию предоставляемые каждой платформой, а также любые дополнительные тесты, которые вы создаете. Просто нажмите кнопку Выполнить в обозревателе тестов. Если вы еще не открыли обозреватель тестов, выберите в строке меню пункт Тест>Обозреватель тестов.

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

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

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

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

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

Следующий пример основан на шаблоне проекта TypeScript React, предоставленном в Visual Studio 2022 версии 17.8 или более поздней версии, который является шаблоном автономного проекта 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-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. Откройте Обозреватель теста (выберите >тестовый тест Обозреватель), а Visual Studio обнаруживает и отображает тесты. Если тесты не отображаются изначально, перестройте проект, чтобы обновить список.

   

   Примечание.

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

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

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

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

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

Примечание.

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

Примечание.

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

Написание модульных тестов для 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
   • Microsoft.JavaScript.UnitTest

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

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

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

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

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

   Jest

   Элемент JavaScriptTestRoot указывает, что модульные тесты будут находиться в папке tests корневого каталога проекта.

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

   Мокко

   Элемент JavaScriptTestRoot задает расположение для модульных тестов. Чтобы упростить конфигурацию для Mocha, в этом примере мы указываем корневой каталог теста на выходную папку *wwwroot\js\test*.

   <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 и замените код по умолчанию следующим кодом.

   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.

   Мокко

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

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

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

   Мокко

   • Мокко
   • assert
   • @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 раздела:

    Jest

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

    Мокко

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

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

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

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 с двумя разными файлами модульного теста.

    

    Примечание.

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

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

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

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

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

Примечание.

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

Примечание.

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