Komponententests von JavaScript und TypeScript in Visual Studio

Sie können Komponententests in Visual Studio schreiben und ausführen, indem Sie einige der gängigeren JavaScript-Frameworks verwenden, ohne zu einer Eingabeaufforderung wechseln zu müssen. Sowohl Node.js als auch ASP.NET Core-Projekte werden unterstützt.

Die unterstützten Frameworks sind:

• Mocha (mochajs.org)
• Jasmine (Jasmine.github.io)
• Tape (github.com/substack/tape)
• Jest (jestjs.io)
• Vitest (vitest.dev)

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

Die in Visual Studio 2022 unterstützten CLI-basierten Projekte funktionieren mit dem Test-Explorer. Vitest ist das integrierte Testframework für React- und Vue-Projekte (zuvor Jest), und Karma und Jasmine werden für Angular-Projekte verwendet. Standardmäßig können Sie die von jedem Framework 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 der Test-Explorer noch nicht geöffnet ist, können Sie ihn finden, indem Sie Test->Test-Explorer in der Menüleiste auswählen.

Um Komponententests über die Befehlszeile auszuführen, klicken Sie im Lösungs-Explorer mit der rechten Maustaste auf das Projekt, wählen Sie In Terminalöffnen aus, und führen Sie den für den Testtyp spezifischen Befehl aus.

Informationen zum Einrichten von Komponententests finden Sie hier:

• Testen mit Vitest
• Testen von React mit Jest
• Testen von Angular
• Testen von Vue.js

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

Hinzufügen eines Komponententests (.esproj)

Das folgende Beispiel basiert auf der TypeScript React-Projektvorlage, die in Visual Studio 2022, Version 17.12 oder höher, bereitgestellt wird. Dabei handelt es sich um die Vorlage Eigenständiges TypeScript React-Projekt. 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>Vitest</JavaScriptTestFramework>
   </PropertyGroup> 
   

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

   Das JavaScriptTestRoot-Element gibt an, dass sich die Komponententests im src Ordner des Projektstamms befinden. Es ist außerdem üblich, den Ordner test anzugeben.

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:

   • vitest

   Dieses Paket wird der Datei package.json unter „Abhängigkeiten“ hinzugefügt.

   Anmerkung

   Wenn Sie Jest verwenden, sind sowohl das jest-editor-support-NPM-Paket als auch das Jest-Paket erforderlich.

4. Fügen Sie in package.jsonden Abschnitt test am Ende des Abschnitts scripts hinzu.

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

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 unter dem Ordner "src" hinzugefügt.

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

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

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

   

   Anmerkung

   Verwenden Sie für TypeScript in der Datei tsconfig.json nicht die Option outfile, da der Test-Explorer Ihre Komponententests nicht finden kann. Sie können die Option outdir verwenden, stellen Sie jedoch sicher, 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ü Ausführen auswählen. Tests werden im Hintergrund ausgeführt, und Der Test-Explorer aktualisiert automatisch und zeigt die Ergebnisse an. Darüber hinaus können Sie ausgewählte Tests auch debuggen, indem Sie mit der rechten Maustaste klicken und Debug-auswählen.

Die folgende Abbildung veranschaulicht das Beispiel mit einem hinzugefügten zweiten Komponententest.

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

Anmerkung

In den meisten TypeScript-Szenarios können Sie einen Komponententest debuggen, indem Sie einen Haltepunkt im TypeScript-Code festlegen, im Test-Explorer mit der rechten Maustaste auf einen Test klicken und Debuggen auswählen. In komplexeren Szenarios, wenn z. B. Quellzuordnungen verwendet werden, kann es schwierig sein, Haltepunkte im TypeScript-Code zu erreichen. Versuchen Sie als Problemumgehung, das Schlüsselwort debugger zu verwenden.

Anmerkung

Profiling-Tests und Code Coverage werden derzeit nicht unterstützt.

Schreiben Sie Unittests für ASP.NET Core

Um Unterstützung für Unit-Tests von JavaScript und TypeScript in einem ASP.NET Core-Projekt hinzuzufügen, müssen Sie dem Projekt Unterstützung für TypeScript, Npm und Unit-Tests hinzufügen, indem Sie die erforderlichen NuGet-Pakete einschließen.

Hinzufügen eines Komponententests (ASP.NET Core)

Das folgende Beispiel basiert auf der Projektvorlage „ASP.NET Core Model View Controller“ und beinhaltet das Hinzufügen eines Jest- oder Mocha-Komponententests.

1. Erstellen Sie ein ASP.NET Core Model-View-Controller-Projekt.

   Ein Beispielprojekt finden Sie unter Hinzufügen von TypeScript zu einer vorhandenen ASP.NET Core-App. Zur Unterstützung von Komponententests empfehlen wir, mit einer Standardprojektvorlage ASP.NET Core zu beginnen.

2. Klicken Sie im Projektmappen-Explorer (rechter Bereich) mit der rechten Maustaste auf den ASP.NET Core-Projektknoten, und wählen Sie NuGet-Pakete für Projektmappen verwalten aus.

3. Suchen Sie auf der Registerkarte Durchsuchen nach den folgenden Paketen, und installieren Sie diese:

   • Microsoft.TypeScript.MSBuild
   • npm
   • Microsoft.JavaScript.UnitTest

   Verwenden Sie das NuGet-Paket, um die TypeScript-Unterstützung anstelle des npm TypeScript-Pakets hinzuzufügen.

4. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf den Projektknoten, und wählen Sie Projektdatei bearbeiten aus.

   Die .csproj--Datei wird in Visual Studio geöffnet.

5. Fügen Sie die folgenden Elemente zur .csproj--Datei im PropertyGroup-Element hinzu.

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

   Jest

   Das JavaScriptTestRoot-Element gibt an, dass sich Ihre Unittests im Verzeichnis Tests des Projektstamms befinden.

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

   Mocha

   Das JavaScriptTestRoot-Element gibt die Position für die Komponententests an. Um die Konfiguration für Mocha zu vereinfachen, verweisen wir in diesem Beispiel auf den Teststamm auf den Ausgabeordner „*wwwroot\js\tests*“.

   <PropertyGroup>
      ...
      <JavaScriptTestRoot>wwwroot\js\tests\</JavaScriptTestRoot>
      <JavaScriptTestFramework>Mocha</JavaScriptTestFramework>
      <GenerateProgramFile>false</GenerateProgramFile>
   </PropertyGroup>
   

6. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf den ASP.NET Core-Projektknoten, und wählen Sie dann Hinzufügen > Neues Element aus. Wählen Sie die TypeScript JSON-Konfigurationsdatei aus, und wählen Sie dann Hinzufügen aus.

   Wenn nicht alle Elementvorlagen angezeigt werden, wählen Sie Alle Vorlagen anzeigenaus, und wählen Sie dann die Elementvorlage aus.

   Visual Studio fügt die tsconfig.json Datei zum Projektstamm hinzu. Sie können mit dieser Datei für den TypeScript-Compiler Optionen konfigurieren.

7. Öffnen Sie tsconfig.json, und ersetzen Sie den Standardcode durch den folgenden Code:

   Jest

   {
     "compileOnSave": true,
     "compilerOptions": {
        "noImplicitAny": false,
        "noEmitOnError": true,
        "removeComments": false,
        "sourceMap": true,
        "target": "es5",
        "outDir": "wwwroot/js"
     },
     "include": [
       "scripts/**/*"
     ],
     "exclude": [
      "node_modules",
      "tests"
     ]
   }
   

   Wenn Sie TypeScript-Tests in JavaScript kompilieren möchten, entfernen Sie für Jest den Ordner tests aus dem Abschnitt Ausschließen.

   Im Skripts Ordner können Sie den TypeScript-Code für Ihre App einfügen. Ein Beispielprojekt, das Code hinzufügt, finden Sie unter Hinzufügen von TypeScript zu einer vorhandenen ASP.NET Core-App.

   Mocha

   {
     "compileOnSave": true,
     "compilerOptions": {
        "noImplicitAny": false,
        "noEmitOnError": true,
        "removeComments": false,
        "sourceMap": true,
        "target": "es5",
        "outDir": "wwwroot/js"
     },
     "include": [
        "scripts/**/*",
        "tests/**/*"
     ],
     "exclude": [
        "node_modules"
     ]
   }
   

   Im Ordner scripts können Sie den TypeScript-Code für Ihre App einfügen. Ein Beispielprojekt, das Code hinzufügt, finden Sie unter Hinzufügen von TypeScript zu einer vorhandenen ASP.NET Core-App.

8. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf das Projekt, und wählen Sie Hinzufügen>Neues Element aus, oder drücken Sie STRG + UMSCHALTTASTE + A. Verwenden Sie das Suchfeld, um die npm-Datei zu finden, wählen Sie die npm-Konfigurationsdateiaus, verwenden Sie den Standardnamen, und klicken Sie auf Hinzufügen.

   Dem Projektstamm wird eine package.json Datei hinzugefügt.

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

   Anmerkung

   In einigen Szenarien zeigt der Projektmappen-Explorer den npm-Knoten aufgrund eines bekannten Problems, das hier beschrieben wird, möglicherweise nicht an. Wenn Sie den npm-Knoten sehen müssen, können Sie das Projekt entladen (klicken Sie mit der rechten Maustaste auf das Projekt, und wählen Sie Projekt entladen) aus, und laden Sie das Projekt dann erneut, um den npm-Knoten erneut anzuzeigen. Alternativ können Sie die Paketeinträge zu package.json hinzufügen und installieren, indem Sie das Projekt erstellen.

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

   Jest

   • jest
   • jest-editor-support
   • @types/jest

   Diese Pakete werden der package.json Datei unter devDependencies hinzugefügt.

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

   Mocha

   • mocha
   • assert
   • @types/mocha
   • @types/node

   Diese Pakete werden der package.json Datei unter devDependencies hinzugefügt.

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

10. Fügen Sie in package.jsonden Abschnitt test am Ende des Abschnitts scripts hinzu.

    Jest

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

    Mocha

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

11. Klicken Sie im Lösungs-Explorer mit der rechten Maustaste auf den Ordner Test und wählen Sie Neues Element hinzufügen>. Fügen Sie dann eine neue Datei namens App.test.tsxhinzu.

    Dadurch wird die neue Datei im Ordner test hinzugefügt.

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

    Jest

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

    Mocha

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

13. Öffnen Sie den Test-Explorer (wählen Sie Test>Windows>Test Explorer) aus, und Visual Studio erkennt und zeigt Tests an. Wenn zunächst keine Tests angezeigt werden, erstellen Sie das Projekt neu, um die Liste zu aktualisieren. Die folgende Abbildung zeigt das Jest-Beispiel mit zwei verschiedenen Komponententestdateien.

    

    Anmerkung

    Verwenden Sie für TypeScript in der Datei tsconfig.json nicht die Option outfile, da der Test-Explorer Ihre Komponententests nicht finden kann. Sie können die Option outdir verwenden, stellen Sie jedoch sicher, dass sich Konfigurationsdateien wie package.json und tsconfig.json im Projektstamm befinden.

Ausführen von Tests (ASP.NET Core)

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ü Ausführen auswählen. Tests werden im Hintergrund ausgeführt, und Der Test-Explorer aktualisiert automatisch und zeigt die Ergebnisse an. Darüber hinaus können Sie ausgewählte Tests auch debuggen, indem Sie mit der rechten Maustaste klicken und Debug-auswählen.

Die folgende Abbildung zeigt das Jest-Beispiel mit einem hinzugefügten zweiten Komponententest.

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

Anmerkung

In den meisten TypeScript-Szenarios können Sie einen Komponententest debuggen, indem Sie einen Haltepunkt im TypeScript-Code festlegen, im Test-Explorer mit der rechten Maustaste auf einen Test klicken und Debuggen auswählen. In komplexeren Szenarios, wenn z. B. Quellzuordnungen verwendet werden, kann es schwierig sein, Haltepunkte im TypeScript-Code zu erreichen. Versuchen Sie als Problemumgehung, das Schlüsselwort debugger zu verwenden.

Anmerkung

Profilerstellungstests und Code Coverage werden derzeit nicht unterstützt.