Eenheid testen van JavaScript en TypeScript in Visual Studio

U kunt eenheidstests schrijven en uitvoeren in Visual Studio met behulp van een aantal populaire JavaScript-frameworks zonder dat u hoeft over te schakelen naar een opdrachtprompt. Zowel Node.js als ASP.NET Core-projecten worden ondersteund.

De ondersteunde frameworks zijn:

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

Eenheidstests schrijven voor een CLI-project (.esproj)

De CLI-projecten ondersteund in Visual Studio 2022 werken met Test Explorer. Vitest is het ingebouwde testframework voor React- en Vue-projecten (voorheen Jest) en Karma en Jasmine worden gebruikt voor Angular-projecten. Standaard kunt u de standaardtests uitvoeren die door elk framework worden geleverd, evenals eventuele aanvullende tests die u schrijft. Druk op de knop uitvoeren in Test Explorer. Als u Test Explorer nog niet hebt geopend, kunt u deze vinden door Test>Test Explorer te selecteren in de menubalk.

Als u eenheidstests vanaf de opdrachtregel wilt uitvoeren, klikt u met de rechtermuisknop op het project in Solution Explorer, kiest u Openen in Terminalen voert u de opdracht uit die specifiek is voor het testtype.

Zie het volgende voor informatie over het instellen van eenheidstests:

• testen met Vitest-
• React testen met Jest
• Angular testen
• Testen Vue.js

Hier vindt u ook een eenvoudig voorbeeld. Gebruik echter de voorgaande koppelingen voor volledige informatie.

Een eenheidstest toevoegen (.esproj)

Het volgende voorbeeld is gebaseerd op de TypeScript React-projectsjabloon die is opgegeven in Visual Studio 2022 versie 17.12 of hoger. Dit is de sjabloon Standalone TypeScript React Project. Voor Vue en Angular zijn de stappen vergelijkbaar.

1. Klik in Solution Explorer met de rechtermuisknop op het React-project en kies Projectbestand bewerken.

2. Zorg ervoor dat de volgende eigenschappen aanwezig zijn in het bestand .esproj met de weergegeven waarden.

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

   In dit voorbeeld wordt Vitest opgegeven als testframework. U kunt in plaats daarvan Mocha, Tape, Jasmine of Jest opgeven.

   Het element JavaScriptTestRoot geeft aan dat de eenheidstests zich in de map src- van de hoofdmap van het project bevinden. Het is ook gebruikelijk om de test map op te geven.

3. Klik in Solution Explorer met de rechtermuisknop op het knooppunt npm en kies Nieuwe npm-pakketten installeren.

   Gebruik het dialoogvenster voor het installeren van npm-pakketten om de volgende NPM-pakketten te installeren:

   • vitest

   Dit pakket wordt toegevoegd aan het package.json-bestand onder afhankelijkheden.

   Notitie

   Als u jest gebruikt, is het npm-pakket jest-editor-support vereist, evenals het jest-pakket.

4. Voeg in package.jsonde sectie test toe aan het einde van de sectie scripts:

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

5. Klik in Solution Explorer met de rechtermuisknop op de src-map en kies Toevoegen>Nieuw itemen voeg vervolgens een nieuw bestand toe met de naam App.test.tsx.

   Hiermee voegt u het nieuwe bestand toe in de map src.

6. Voeg de volgende code toe aan App.test.tsx.

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

7. Open Test Explorer (kies Test>Test Explorer) en Visual Studio detecteert en geeft tests weer. Als de tests aanvankelijk niet worden weergegeven, bouw het project dan opnieuw om de lijst te verversen.

   

   Notitie

   Gebruik voor TypeScript de optie outfile niet in tsconfig.json, omdat Test Explorer uw eenheidstests niet kan vinden. U kunt de optie outdir gebruiken, maar zorg ervoor dat configuratiebestanden zoals package.json en tsconfig.json zich in de hoofdmap van het project bevinden.

Tests uitvoeren (.esproj)

U kunt de tests uitvoeren door te klikken op de koppeling Alle uitvoeren in Test Explorer. U kunt ook tests uitvoeren door een of meer tests of groepen te selecteren, met de rechtermuisknop te klikken en uitvoeren te selecteren in het snelmenu. Tests worden op de achtergrond uitgevoerd en Test Explorer wordt automatisch bijgewerkt en toont de resultaten. Bovendien kunt u ook fouten opsporen in geselecteerde tests door met de rechtermuisknop te klikken en Foutopsporingte selecteren.

In de volgende afbeelding ziet u het voorbeeld waarin een tweede eenheidstest is toegevoegd.

Voor sommige eenheidstestframeworks worden eenheidstests doorgaans uitgevoerd op basis van de gegenereerde JavaScript-code.

Notitie

In de meeste TypeScript-scenario's kunt u fouten opsporen in een eenheidstest door een onderbrekingspunt in TypeScript-code in te stellen, met de rechtermuisknop op een test in Test Explorer te klikken en Foutopsporingte kiezen. In complexere scenario's, zoals sommige scenario's die gebruikmaken van brontoewijzingen, kan het lastig zijn om onderbrekingspunten in TypeScript-code te bereiken. Probeer als tijdelijke oplossing het trefwoord debugger te gebruiken.

Notitie

Profileringstests en codedekking worden momenteel niet ondersteund.

Eenheidstests schrijven voor ASP.NET Core

Als u ondersteuning wilt toevoegen voor eenheidstests van JavaScript en TypeScript in een ASP.NET Core-project, moet u ondersteuning voor TypeScript-, Npm- en eenheidstests toevoegen aan het project door vereiste NuGet-pakketten op te geven.

Een eenheidstest toevoegen (ASP.NET Core)

Het volgende voorbeeld is gebaseerd op de ASP.NET Core Model-View-Controller projectsjabloon en bevat het toevoegen van een Jest- of Mocha-eenheidstest.

1. Maak een ASP.NET Core Model-View-Controller-project.

   Zie TypeScript toevoegen aan een bestaand ASP.NET Core-appvoor een voorbeeldproject. Voor ondersteuning voor eenheidstests raden we u aan om te beginnen met een standaardsjabloon voor ASP.NET Core-project.

2. Klik in Solution Explorer (rechterdeelvenster) met de rechtermuisknop op het ASP.NET Core-projectknooppunt en selecteer NuGet-pakketten voor oplossingen beheren.

3. Zoek op het tabblad Bladeren naar de volgende pakketten en installeer elk pakket:

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

   Gebruik het NuGet-pakket om TypeScript-ondersteuning toe te voegen in plaats van het npm TypeScript-pakket.

4. Klik in Solution Explorer met de rechtermuisknop op het projectknooppunt en kies Projectbestand bewerken.

   Het bestand .csproj wordt geopend in Visual Studio.

5. Voeg de volgende elementen toe aan het bestand .csproj in het element PropertyGroup.

   In dit voorbeeld wordt Jest of Mocha opgegeven als testframework. U kunt in plaats daarvan Tape of Jasmine opgeven.

   Jest-

   Het JavaScriptTestRoot-element geeft aan dat je unit tests zich in de -tests-map van de projecthoofddirectory bevinden.

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

   Mocha

   Het element JavaScriptTestRoot geeft de locatie voor uw eenheidstests op. Om de configuratie voor Mocha te vereenvoudigen, wijzen we in dit voorbeeld de hoofdmap van de test naar de uitvoermap *wwwroot\js\tests*.

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

6. Klik in Solution Explorer met de rechtermuisknop op het ASP.NET Core-projectknooppunt en selecteer Toevoegen > Nieuw item. Kies het TypeScript JSON-configuratiebestanden selecteer toevoegen.

   Als u niet alle itemsjablonen ziet, selecteert u Alle sjablonen weergevenen kiest u vervolgens de itemsjabloon.

   Visual Studio voegt het tsconfig.json-bestand toe aan de hoofdmap van het project. U kunt dit bestand gebruiken om opties te configureren voor de TypeScript-compiler.

7. Open tsconfig.json en vervang de standaardcode door de volgende code:

   Jest-

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

   Als u TypeScript-tests voor Jest naar JavaScript wilt compileren, verplaatst u de tests map uit de uitsluitingssectie.

   In de -scripts map kunt u de TypeScript-code voor uw app plaatsen. Zie TypeScript toevoegen aan een bestaande ASP.NET Core-appvoor een voorbeeldproject dat code toevoegt.

   Mocha

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

   In de -scripts map kunt u de TypeScript-code voor uw app plaatsen. Zie TypeScript toevoegen aan een bestaande ASP.NET Core-appvoor een voorbeeldproject dat code toevoegt.

8. Klik met de rechtermuisknop op het project in Solution Explorer en kies Add>New Item (of druk op Ctrl + Shift + A). Gebruik het zoekvak om het npm-bestand te zoeken, kies het npm-configuratiebestand, gebruik de standaardnaam en klik op Toevoegen.

   Er wordt een package.json-bestand toegevoegd aan de hoofdmap van het project.

9. Klik in Solution Explorer met de rechtermuisknop op het knooppunt npm onder Afhankelijkheden en kies Nieuwe npm-pakketten installeren.

   Notitie

   In sommige scenario's wordt in Solution Explorer mogelijk het npm-knooppunt niet weergegeven vanwege een bekend probleem dat hier wordt beschreven. Als u het npm-knooppunt wilt zien, kunt u het project verwijderen (klik met de rechtermuisknop op het project en kies Projectverwijderen) en laadt u het project opnieuw om het npm-knooppunt opnieuw te laten verschijnen. U kunt de pakketvermeldingen ook toevoegen aan package.json en installeren door het project te bouwen.

   Gebruik het dialoogvenster voor het installeren van npm-pakketten om de volgende NPM-pakketten te installeren:

   Jest-

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

   Deze pakketten worden toegevoegd aan het package.json-bestand onder devDependencies.

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

   Mocha

   • Mokka
   • beweren
   • @types/mocha
   • @types/node

   Deze pakketten worden toegevoegd aan het package.json-bestand onder devDependencies.

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

10. Voeg in package.jsonde sectie test toe aan het einde van de sectie scripts:

    Jest-

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

    Mocha

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

11. Klik in Solution Explorer met de rechtermuisknop op de map test en kies Add>New Itemen voeg vervolgens een nieuw bestand toe met de naam App.test.tsx.

    Dit voegt het nieuwe bestand toe aan de testmap .

12. Voeg de volgende code toe aan App.test.tsx.

    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. Open Test Explorer (kies Test>Windows>Test Explorer) en Visual Studio detecteert en geeft tests weer. Als de tests aanvankelijk niet worden weergegeven, bouw het project dan opnieuw om de lijst te verversen. In de volgende afbeelding ziet u het Voorbeeld van Jest, met twee verschillende eenheidstestbestanden.

    

    Notitie

    Gebruik voor TypeScript de optie outfile niet in tsconfig.json, omdat Test Explorer uw eenheidstests niet kan vinden. U kunt de optie outdir gebruiken, maar zorg ervoor dat configuratiebestanden zoals package.json en tsconfig.json zich in de hoofdmap van het project bevinden.

Tests uitvoeren (ASP.NET Core)

U kunt de tests uitvoeren door te klikken op de koppeling Alle uitvoeren in Test Explorer. U kunt ook tests uitvoeren door een of meer tests of groepen te selecteren, met de rechtermuisknop te klikken en uitvoeren te selecteren in het snelmenu. Tests worden op de achtergrond uitgevoerd en Test Explorer wordt automatisch bijgewerkt en toont de resultaten. Bovendien kunt u ook fouten opsporen in geselecteerde tests door met de rechtermuisknop te klikken en Foutopsporingte selecteren.

In de volgende afbeelding ziet u het Voorbeeld van Jest, waarbij een tweede eenheidstest is toegevoegd.

Voor sommige eenheidstestframeworks worden eenheidstests doorgaans uitgevoerd op basis van de gegenereerde JavaScript-code.

Notitie

In de meeste TypeScript-scenario's kunt u fouten opsporen in een eenheidstest door een onderbrekingspunt in TypeScript-code in te stellen, met de rechtermuisknop op een test in Test Explorer te klikken en Foutopsporingte kiezen. In complexere scenario's, zoals sommige scenario's die gebruikmaken van brontoewijzingen, kan het lastig zijn om onderbrekingspunten in TypeScript-code te bereiken. Probeer als tijdelijke oplossing het trefwoord debugger te gebruiken.

Notitie

Profileringstests en codedekking worden momenteel niet ondersteund.