Komponententests für JavaScript und TypeScript in Visual Studio

Wenn Ihr bevorzugtes Framework nicht unterstützt wird, finden Sie unter Add support for a unit test framework (Hinzufügen der Unterstützung für ein Komponententest-Framework) Informationen zum Hinzufügen der Unterstützung.

Schreiben von Komponententests für ein CLI-basiertes Projekt (.esproj)

Die in Visual Studio 2022 unterstützten CLI-basierten Projekte sind mit dem Test-Explorer kompatibel. Jest ist das integrierte Testframework für React- und Vue-Projekte, und Karma und Jasmine werden für Angular-Projekte verwendet. Standardmäßig können Sie die von den einzelnen Frameworks bereitgestellten Standardtests sowie alle zusätzlichen Tests ausführen, die Sie schreiben. Klicken Sie einfach im Test-Explorer auf die Schaltfläche Ausführen. Wenn Sie den Test-Explorer noch nicht geöffnet haben, wählen Sie in der Menüleiste Test>Test-Explorer aus.

Wenn Sie Komponententests über die Befehlszeile ausführen möchten, klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf das Projekt, wählen Sie Im Terminal öffnen aus, und führen Sie den für den Testtyp spezifischen Befehl aus.

Informationen zum Einrichten von Komponententests finden Sie hier:

• Testen von React mit Jest
• Angular-Tests
• Testen von Vue.js

Hier wird auch ein einfaches Beispiel bereitgestellt. Verwenden Sie jedoch die vorherigen Links, um vollständige Informationen zu erhalten.

Hinzufügen eines Komponententests (.esproj)

Das folgende Beispiel basiert auf der TypeScript React-Projektvorlage, die in Visual Studio 2022, Version 17.8 oder höher, bereitgestellt wird; die Eigenständige TypeScript React-Projektvorlage. Für Vue und Angular sind die Schritte ähnlich.

1. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf das React-Projekt, und wählen Sie Projektdatei bearbeiten aus.

2. Stellen Sie sicher, dass die folgenden Eigenschaften in der ESPROJ-Datei mit den angezeigten Werten vorhanden sind.

   <PropertyGroup>
     <JavaScriptTestRoot>src\</JavaScriptTestRoot>
     <JavaScriptTestFramework>Jest</JavaScriptTestFramework>
   </PropertyGroup> 
   

   In diesem Beispiel wird Jest als Testframework angegeben. Sie können stattdessen Mocha, Tape oder Jasmine angeben.

   Das JavaScriptTestRoot-Element gibt an, dass sich die Komponententests im Ordner src des Projektstamms befinden.

3. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf den Knoten „npm“, und wählen Sie Neue npm-Pakete installieren aus.

   Verwenden Sie das npm-Paketinstallationsdialogfeld, um die folgenden npm-Pakete zu installieren:

   • jest
   • jest-editor-support

   Diese Pakete werden der Datei package.json unter „Abhängigkeiten“ hinzugefügt.

4. Fügen Sie in package.json den test-Abschnitt am Ende des scripts-Abschnitts hinzu:

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

5. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf den Ordner „src“, und wählen Sie Hinzufügen>Neues Element aus, und fügen Sie dann eine neue Datei namens App.test.tsx hinzu.

   Dadurch wird die neue Datei im Ordner „src“ hinzugefügt.

6. Fügen Sie den folgenden Code zu App.test.tsx hinzu.

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

7. Öffnen Sie den Test-Explorer (wählen Sie Test>Test-Explorer aus). Visual Studio erkennt Tests und zeigt diese an. Wenn zunächst keine Tests angezeigt werden, erstellen Sie das Projekt neu, um die Liste zu aktualisieren.

   

   Hinweis

   Verwenden Sie für TypeScript nicht die Option outfile in tsconfig.json, da der Test-Explorer Ihre Komponententests nicht finden würde. Sie können die outdir-Option verwenden, müssen aber sicherstellen, dass sich Konfigurationsdateien wie package.json und tsconfig.json im Projektstamm befinden.

Ausführen von Tests (.esproj)

Sie können die Tests durchführen, indem Sie im Test-Explorer auf den Link Alle ausführen klicken. Alternativ können Sie Tests ausführen, indem Sie mindestens einen Test oder eine Gruppe auswählen, mit der rechten Maustaste klicken und im Kontextmenü auf Ausführen klicken. Tests werden im Hintergrund ausgeführt, und der Test-Explorer aktualisiert die Ergebnisse automatisch und zeigt diese an. Darüber hinaus können Sie auch ausgewählte Tests debuggen, indem Sie auf Debuggen klicken.

Die folgende Abbildung zeigt das Beispiel mit hinzugefügtem zweiten Komponententest.

Bei einigen Komponententestframeworks werden Komponententests in der Regel mit dem generierten JavaScript-Code ausgeführt.

Hinzufügen der Unterstützung für ein Komponententest-Framework

Sie können die Unterstützung für weitere Testframeworks hinzufügen, indem Sie die Erkennungs- und Ausführungslogik mit JavaScript implementieren.

Hierzu fügen Sie einen Ordner mit dem Namen des Testframeworks an folgender Stelle hinzu:

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

Wenn der Ordner NodeJsTools in einem ASP.NET Core-Projekt nicht angezeigt wird, müssen Sie die Node.js-Entwicklungsworkload mithilfe des Visual Studio-Installers hinzufügen. Diese Workload umfasst Unterstützung für Unittests von JavaScript und TypeScript.

Dieser Ordner muss eine JavaScript-Datei mit demselben Namen enthalten, die die folgenden beiden Funktionen exportiert:

• find_tests
• run_tests

Ein gutes Beispiel für die Implementierung von find_tests und run_tests finden Sie in der Implementierung für das Mocha-Komponententestframework unter:

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

Verfügbare Testframeworks werden beim Start von Visual Studio ermittelt. Wenn ein Framework hinzugefügt wird, während Visual Studio ausgeführt wird, muss Visual Studio neu gestartet werden, damit das Framework erkannt wird. Wenn Sie an der Implementierung Änderungen vornehmen, müssen Sie jedoch keinen Neustart durchführen.

Komponententests in .NET Framework

Beim Schreiben von Komponententests sind Sie nicht nur auf Ihre Node.js- und ASP.NET Core-Projekte beschränkt. Wenn Sie die Eigenschaften „TestFramework“ und „TestRoot“ zu einem C#- oder Visual Basic-Projekt hinzufügen, werden die Tests aufgelistet, und Sie können sie über das Fenster „Test-Explorer“ ausführen.

Klicken Sie dazu im Projektmappen-Explorer mit der rechten Maustaste auf den Projektknoten, klicken Sie auf Projekt entladen, und wählen Sie dann Edit Project (Projekt bearbeiten) aus. Fügen Sie anschließend in der Projektdatei die folgenden zwei Elemente zu einer Eigenschaftengruppe hinzu.

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

Als Nächstes fügen Sie die Tests in den Teststammordner ein, den Sie angegeben haben, woraufhin sie im Fenster „Test-Explorer“ ausgeführt werden. Sollten sie anfänglich nicht angezeigt werden, müssen Sie das Projekt möglicherweise neu erstellen.

Komponententests in .NET Core und .NET Standard

Zusätzlich zu den oben beschriebenen Eigenschaften für .NET Framework müssen Sie auch das NuGet-Paket Microsoft.JavaScript.UnitTest installieren und die Eigenschaft festlegen:

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

Einige Testframeworks erfordern möglicherweise zusätzliche npm-Pakete zur Testerkennung. Für „jest“ beispielsweise ist das npm-Paket „jest-editor-support“ erforderlich. Sehen Sie sich ggf. die Dokumentation zum jeweiligen Framework an.

Schreiben von Komponententests in einem Node.js-Projekt (.njsproj)

Stellen Sie in Node.js-Projekten vor dem Hinzufügen von Komponententests sicher, dass das Framework, das Sie verwenden möchten, lokal in Ihrem Projekt installiert ist. Mit dem NPM-Paketinstallationsfenster lässt sich das ganz einfach bewerkstelligen.

Vorzugsweise sollten Sie Komponententests hinzufügen, indem Sie in Ihrem Projekt einen Testordner erstellen und diesen Ordner in den Projekteigenschaften als Teststamm festlegen. Ferner müssen Sie das Testframework auswählen, das Sie verwenden möchten.

Über das Dialogfeld Neues Element hinzufügen können Sie Ihrem Projekt einfache leere Tests hinzufügen. JavaScript und TypeScript werden in einem Projekt unterstützt.

Verwenden Sie für einen Mocha-Komponententest folgenden Code:

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");
    })
})

Wenn Sie die Komponententestoptionen in den Projekteigenschaften nicht festgelegt haben, müssen Sie sicherstellen, dass für die Eigenschaft Testframework im Fenster Eigenschaften das richtige Testframework für Ihre Komponententestdateien festgelegt wurde. Dies geschieht automatisch durch die Vorlagen der Komponententestdatei.

Nach dem Öffnen des Test-Explorers (wählen Sie Test>Windows>Test-Explorer aus), erkennt Visual Studio Tests und zeigt diese an. Wenn zunächst keine Tests angezeigt werden, erstellen Sie das Projekt neu, um die Liste zu aktualisieren.

Ausführen von Tests (Node.js)

Tests können in Visual Studio oder über die Befehlszeile ausgeführt werden.

Ausführen von Tests in Visual Studio

Sie können die Tests durchführen, indem Sie im Test-Explorer auf den Link Alle ausführen klicken. Alternativ können Sie Tests ausführen, indem Sie mindestens einen Test oder eine Gruppe auswählen, mit der rechten Maustaste klicken und im Kontextmenü auf Ausführen klicken. Tests werden im Hintergrund ausgeführt, und der Test-Explorer aktualisiert die Ergebnisse automatisch und zeigt diese an. Darüber hinaus können Sie auch ausgewählte Tests debuggen, indem Sie auf Debuggen klicken.

Für TypeScript werden Komponententests für den generierten JavaScript-Code ausgeführt.

Ausführen von Tests über die Befehlszeile

Sie können die Tests über die Developer-Eingabeaufforderung für Visual Studio mithilfe des folgenden Befehls ausführen:

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

Dieser Befehl erzeugt eine Ausgabe ähnlich der folgenden:

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