Komponententests für JavaScript und TypeScript in Visual Studio

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

Folgende Frameworks werden unterstützt:

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

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.

Hinweis

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

Hinweis

Profilerstellungstests und Codeabdeckung werden derzeit nicht unterstützt.

Schreiben von Komponententests für ASP.NET Core

Um Unterstützung für Komponententests von JavaScript und TypeScript in einem ASP.NET Core-Projekt hinzuzufügen, müssen Sie dem Projekt TypeScript-, Npm- und Komponententests hinzufügen, indem Sie erforderliche 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. Für Unterstützung von Komponententests empfiehlt es sich, mit einer ASP.NET Core-Standardprojektvorlage zu beginnen.

2. Klicken Sie im Projektmappen-Explorer (rechter Bereich) mit der rechten Maustaste auf den 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 sie:

   • Microsoft.TypeScript.MSBuild
   • Npm
   • Microsoft.JavaScript.UnitTest

   Verwenden Sie das NuGet-Paket anstelle des npm-TypeScript-Pakets, um TypeScript-Unterstützung 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 der CSPROJ-Datei im PropertyGroup-Element die folgenden Elemente 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 die Komponententests im Ordner 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 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 anzeigen und dann die Elementvorlage aus.

   Visual Studio fügt die Datei tsconfig.json 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 Test aus dem Abschnitt Ausschließen.

   Im Ordner Skript 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 Skript 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 zur Suche nach der npm-Datei, wählen Sie die npm-Konfigurationsdatei aus, bestätigen Sie den Standardnamen, und klicken Sie auf Hinzufügen.

   Dem Projektstamm wird die Datei package.json 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.

   Hinweis

   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 anzeigen 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, damit der npm-Knoten wieder angezeigt wird. 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 Datei package.json 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 Datei package.json 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.json den test-Abschnitt am Ende des scripts-Abschnitts hinzu:

    Jest

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

    Mocha

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

11. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf den Ordner Test, 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 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). 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. Die folgende Abbildung zeigt das Jest-Beispiel mit zwei verschiedenen Komponententestdateien.

    

    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 (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ü 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 Jest-Beispiel, wobei ein zweiter Komponententest hinzugefügt wurde.

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

Hinweis

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

Hinweis

Profilerstellungstests und Codeabdeckung werden derzeit nicht unterstützt.