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

Если ваша любимая платформа не поддерживается, сведения о расширении поддержки см. в разделе Расширение поддержки платформ для модульного тестирования.

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

Расширение поддержки платформ модульного тестирования

Вы можете добавить поддержку дополнительных платформ тестирования, реализовав логику обнаружения и выполнения с помощью JavaScript.

Для этого добавьте папку с именем платформы тестирования в раздел:

<VisualStudioFolder>\Common7\IDE\Extensions\Microsoft\NodeJsTools\TestAdapter\TestFrameworks

Если папка NodeJsTools не отображается в проекте ASP.NET Core, добавьте рабочую нагрузку разработки Node.js с помощью Visual Studio Installer. Эта рабочая нагрузка включает поддержку модульного тестирования JavaScript и TypeScript.

Эта папка должна содержать файл JavaScript с тем же именем, который экспортирует следующие две функции:

• find_tests
• run_tests

Хороший пример реализаций find_tests и run_tests есть в реализации для платформы модульного тестирования Mocha:

<VisualStudioFolder>\Common7\IDE\Extensions\Microsoft\NodeJsTools\TestAdapter\TestFrameworks\mocha\mocha.js

Обнаружение доступных тестовых платформ выполняется при запуске Visual Studio. Если платформа добавляется во время выполнения Visual Studio, перезапустите Visual Studio для обнаружения платформы. Но вам не нужно перезапускать платформу, если вы вносите изменения в реализацию.

Модульные тесты в .NET Framework

Вы можете писать модульные тесты не только в проектах Node.js и ASP.NET Core. Когда вы добавляете свойства TestFramework и TestRoot в проект C# или Visual Basic, эти тесты будут перечислены и вы сможете выполнять их в окне обозревателя тестов.

Чтобы включить эту функцию, щелкните правой кнопкой мыши узел проекта в обозревателе решений, выберите Выгрузить проект, а затем Изменить проект. Затем в файле проекта добавьте следующие два элемента в группу свойств.

<PropertyGroup>
    <JavaScriptTestRoot>tests\</JavaScriptTestRoot>
    <JavaScriptTestFramework>Tape</JavaScriptTestFramework>
</PropertyGroup>

Затем добавьте тесты в указанную папку тестового корня, и они будут доступны для выполнения в окне обозревателя тестов. Если изначально они не отображаются, может потребоваться перестроить проект.

Модульное тестирование в .NET Core и .NET Standard

Помимо предыдущих свойств, описанных для платформа .NET Framework, также необходимо установить пакет NuGet Microsoft.JavaScript.UnitTest и задать свойство:

<PropertyGroup>
    <GenerateProgramFile>false</GenerateProgramFile>
</PropertyGroup>

Для обнаружения тестов некоторые платформы тестирования могут потребоваться дополнительные пакеты npm. Например, для jest требуется пакет npm jest-editor-support. При необходимости ознакомьтесь с документацией по конкретной платформе.

Написание модульных тестов в проекте Node.js (.njsproj)

Прежде чем добавлять модульные тесты в проект Node.js, убедитесь, что выбранная платформа установлена в нем локально. Это легко сделать в окне установки пакета npm.

Чтобы добавлять в проект модульные тесты, рекомендуется создать в проекте папку tests и настроить ее как тестовый корень в свойствах проекта. Также необходимо выбрать желаемую платформу тестирования.

Вы можете добавлять в проект простые пустые тесты в диалоговом окне Добавить новый элемент. В одном проекте поддерживаются JavaScript и TypeScript.

Для модульного теста Mocha используйте следующий код:

var assert = require('assert');

describe('Test Suite 1', function() {
    it('Test 1', function() {
        assert.ok(true, "This shouldn't fail");
    })

    it('Test 2', function() {
        assert.ok(1 === 1, "This shouldn't fail");
        assert.ok(false, "This should fail");
    })
})

Если вы не задали параметры модульного теста в свойствах проекта, необходимо убедиться, что для свойства Платформа тестирования в окне Свойства будет установлена верная платформа тестирования для файлов модульных тестов. Это выполняется автоматически шаблонами файлов модульного теста.

После открытия обозревателя тестов (выберите Тест>Windows>Обозреватель тестов) Visual Studio обнаруживает и отображает тесты. Если тесты не отображаются изначально, перестройте проект, чтобы обновить список.

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

Вы можете выполнять тесты в Visual Studio или из командной строки.

Выполнение тестов в Visual Studio

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

Для TypeScript модульные тесты выполняются в созданном коде JavaScript.

Запуск тестов из командной строки

Вы можете выполнять тесты из командной строки разработчика в Visual Studio, используя следующую команду:

vstest.console.exe <path to project file>\NodejsConsoleApp23.njsproj /TestAdapterPath:<VisualStudioFolder>\Common7\IDE\Extensions\Microsoft\NodeJsTools\TestAdapter

После выполнения команды должен появиться результат, аналогичный приведенному ниже.

Microsoft (R) Test Execution Command Line Tool Version 15.5.0
Copyright (c) Microsoft Corporation.  All rights reserved.

Starting test execution, please wait...
Processing: NodejsConsoleApp23\NodejsConsoleApp23\UnitTest1.js
  Creating TestCase:NodejsConsoleApp23\NodejsConsoleApp23\UnitTest1.js::Test Suite 1 Test 1::mocha
  Creating TestCase:NodejsConsoleApp23\NodejsConsoleApp23\UnitTest1.js::Test Suite 1 Test 2::mocha
Processing finished for framework of Mocha
Passed   Test Suite 1 Test 1
Standard Output Messages:
 Using default Mocha settings
 1..2
 ok 1 Test Suite 1 Test 1

Failed   Test Suite 1 Test 2
Standard Output Messages:
 not ok 1 Test Suite 1 Test 2
   AssertionError [ERR_ASSERTION]: This should fail
       at Context.<anonymous> (NodejsConsoleApp23\NodejsConsoleApp23\UnitTest1.js:10:16)

Total tests: 2. Passed: 1. Failed: 1. Skipped: 0.
Test Run Failed.
Test execution time: 1.5731 Seconds