Enhetstestning av JavaScript och TypeScript i Visual Studio

Du kan skriva och köra enhetstester i Visual Studio med hjälp av några av de mer populära JavaScript-ramverken utan att behöva växla till en kommandotolk. Både Node.js- och ASP.NET Core-projekt stöds.

Ramverken som stöds är:

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

Skriva enhetstester för ett CLI-baserat projekt (.esproj)

De CLI-baserade projekt som stöds i Visual Studio 2022 är kompatibla med Test Explorer. Vitest är det inbyggda testramverket för React- och Vue-projekt (tidigare Jest), och Karma och Jasmine används för Angular-projekt. Som standard kan du köra standardtesterna som tillhandahålls av varje ramverk, samt eventuella ytterligare tester som du skriver. Tryck bara på knappen Kör i Test Explorer. Om du inte redan har testutforskaren öppen kan du hitta den genom att välja Test>Test Explorer i menyraden.

Om du vill köra enhetstester från kommandoraden högerklickar du på projektet i Solution Explorer, väljer Öppna i Terminaloch kör kommandot som är specifikt för testtypen.

Information om hur du konfigurerar enhetstester finns i följande:

• Testning med Vitest
• Testing React med Jest
• Angular-testning
• Test Vue.js

Ett enkelt exempel finns också här. Använd dock föregående länkar för fullständig information.

Lägg till ett enhetstest (.esproj)

Följande exempel baseras på projektmallen TypeScript React som tillhandahålls i Visual Studio 2022 version 17.12 eller senare, och som är den fristående TypeScript React Project-mallen med kod . För Vue och Angular är stegen liknande.

1. Högerklicka på React-projektet i Solution Explorer och välj Redigera projektfil.

2. Kontrollera att följande egenskaper finns i filen .esproj med de värden som visas.

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

   Det här exemplet anger Vitest som testramverk. Du kan ange Mocha, Tape, Jasmine eller Jest i stället.

   Elementet JavaScriptTestRoot anger att enhetstesterna ska finnas i mappen src i projektroten. Det är också vanligt att ange mappen test.

3. I Solution Explorer högerklickar du på noden npm och väljer Installera nya npm-paket.

   Använd installationsdialogrutan för npm-paket för att installera följande npm-paket:

   • vitest

   Det här paketet läggs till i package.json-filen under beroenden.

   Notera

   Om du använder jest krävs npm-paketet jest-editor-support samt jest-paketet.

4. I package.jsonlägger du till avsnittet test i slutet av avsnittet scripts:

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

5. Högerklicka på mappen src i Solution Explorer och välj Lägg till>nytt objektoch lägg sedan till en ny fil med namnet App.test.tsx.

   Detta lägger till den nya filen under mappen src.

6. Lägg till följande kod i App.test.tsx.

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

7. Öppna Test Explorer (välj Test>Test Explorer) och Visual Studio identifierar och visar tester. Om testerna inte visas från början ska du återskapa projektet, så att listan uppdateras.

   

   Not

   För TypeScript ska du inte använda alternativet outfile i tsconfig.jsoneftersom Test Explorer inte kan hitta enhetstesterna. Du kan använda alternativet outdir, men se till att konfigurationsfiler som package.json och tsconfig.json finns i projektroten.

Kör tester (.esproj)

Du kan köra testerna genom att klicka på länken Kör alla i Testutforskaren. Du kan också köra tester genom att välja en eller flera tester eller grupper, högerklicka och välja Kör på snabbmenyn. Testerna körs i bakgrunden och Testutforskaren uppdateras automatiskt och visar resultatet. Dessutom kan du felsöka valda tester genom att högerklicka och välja Felsöka.

Följande bild visar exemplet med ett andra enhetstest tillagt.

För vissa enhetstestramverk körs enhetstester vanligtvis mot den genererade JavaScript-koden.

Obs

I de flesta TypeScript-scenarier kan du felsöka ett enhetstest genom att ange en brytpunkt i TypeScript-kod, högerklicka på ett test i Test Explorer och välja Felsöka. I mer komplexa scenarier, till exempel vissa scenarier som använder källkartor, kan det vara svårt att nå brytpunkter i TypeScript-kod. Som en lösning kan du prova att använda nyckelordet debugger.

Obs

Profileringstester och kodtäckning stöds inte för närvarande.

Skriv enhetstester för ASP.NET Core

Om du vill lägga till stöd för enhetstestning av JavaScript och TypeScript i ett ASP.NET Core-projekt måste du lägga till typescript-, Npm- och enhetstestningsstöd i projektet genom att inkludera nödvändiga NuGet-paket.

Lägg till ett enhetstest (ASP.NET Core)

Följande exempel baseras på projektmallen ASP.NET Core Model–View-Controller och innehåller tillägg av ett Jest- eller Mocha-enhetstest.

1. Skapa ett ASP.NET Core Model –View-Controller projekt.

   Ett exempelprojekt finns i Lägg till TypeScript i en befintlig ASP.NET Core-app. För stöd för enhetstestning rekommenderar vi att du börjar med en standardmall för ASP.NET Core-projekt.

2. I Solution Explorer (höger fönster) högerklickar du på projektnoden ASP.NET Core och väljer Hantera NuGet-paket för lösningar.

3. På fliken Bläddra söker du efter följande paket och installerar var och en:

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

   Använd NuGet-paketet för att lägga till TypeScript-stöd i stället för npm TypeScript-paketet.

4. Högerklicka på projektnoden i Solution Explorer och välj Redigera projektfil.

   Filen .csproj öppnas i Visual Studio.

5. Lägg till följande element i filen .csproj i PropertyGroup-elementet.

   I det här exemplet anges Jest eller Mocha som testramverk. Du kan ange Band eller Jasmine i stället.

   Jest

   Elementet JavaScriptTestRoot anger att enhetstesterna ska finnas i tester mapp för projektroten.

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

   Mocha

   Elementet JavaScriptTestRoot anger platsen för enhetstesterna. För att förenkla konfigurationen för Mocha pekar vi testroten i det här exemplet på utdatamappen *wwwroot\js\tests*.

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

6. Högerklicka på projektnoden ASP.NET Core i Solution Explorer och välj Lägg till > nytt objekt. Välj TypeScript JSON-konfigurationsfiloch välj sedan Lägg till.

   Om du inte ser alla objektmallar väljer du Visa alla mallaroch väljer sedan objektmallen.

   Visual Studio lägger till tsconfig.json-filen i projektroten. Du kan använda den här filen för att konfigurera alternativ för TypeScript-kompilatorn.

7. Öppna tsconfig.json och ersätt standardkoden med följande kod:

   Jest

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

   Om du vill kompilera TypeScript-tester till JavaScript för Jest tar du bort mappen tester från exkludera avsnittet.

   I mappen skript kan du placera TypeScript-koden för din app. Ett exempelprojekt som lägger till kod finns i Lägg till TypeScript i en befintlig 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"
     ]
   }
   

   I mappen skript kan du placera TypeScript-koden för din app. Ett exempelprojekt som lägger till kod finns i Lägg till TypeScript i en befintlig ASP.NET Core-app.

8. Högerklicka på projektet i Solution Explorer och välj Lägg till>nytt objekt (eller tryck på Ctrl + SKIFT + A). Använd sökrutan för att hitta npm-filen, välj npm-konfigurationsfilen, använd standardnamnet och klicka på Lägg till.

   En package.json fil läggs till i projektroten.

9. I Solution Explorer högerklickar du på noden npm under Beroenden och väljer Installera nya npm-paket.

   Not

   I vissa scenarier kanske Solution Explorer inte visar npm-noden på grund av ett känt problem som beskrivs här. Om du behöver se npm-noden kan du ta bort projektet (högerklicka på projektet och välja Ta bort projekt) och sedan läsa in projektet igen så att noden npm visas igen. Du kan också lägga till paketposterna i package.json och installera genom att skapa projektet.

   Använd installationsdialogrutan för npm-paket för att installera följande npm-paket:

   Jest

   • skämta
   • jest-editor-support
   • @types/jest

   Dessa paket läggs till i package.json-filen under devDependencies.

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

   Mocha

   • mokka
   • hävda
   • @types/mocha
   • @types/node

   Dessa paket läggs till i package.json-filen under devDependencies.

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

10. I package.jsonlägger du till avsnittet test i slutet av avsnittet scripts:

    Jest

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

    Mocha

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

11. I Solution Explorer högerklickar du på mappen test och väljer Lägg till>nytt objektoch lägger sedan till en ny fil med namnet App.test.tsx.

    Detta lägger till den nya filen under mappen test.

12. Lägg till följande kod i 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. Öppna Test Explorer (välj Test>Windows>Test Explorer) och Visual Studio identifierar och visar tester. Om testerna inte visas från början ska du återskapa projektet för att uppdatera listan. Följande bild visar Jest-exemplet med två olika enhetstestfiler.

    

    Notera

    För TypeScript ska du inte använda alternativet outfile i tsconfig.jsoneftersom Test Explorer inte kan hitta enhetstesterna. Du kan använda alternativet outdir, men se till att konfigurationsfiler som package.json och tsconfig.json finns i projektroten.

Köra tester (ASP.NET Core)

Du kan köra testerna genom att klicka på länken Kör alla i Testutforskaren. Du kan också köra tester genom att välja en eller flera tester eller grupper, högerklicka och välja Kör på snabbmenyn. Testerna körs i bakgrunden och Testutforskaren uppdateras automatiskt och visar resultatet. Dessutom kan du felsöka valda tester genom att högerklicka och välja Felsöka.

Följande bild visar Jest-exemplet, med ett andra enhetstest tillagt.

För vissa enhetstestramverk körs enhetstester vanligtvis mot den genererade JavaScript-koden.

Obs

I de flesta TypeScript-scenarier kan du felsöka ett enhetstest genom att ange en brytpunkt i TypeScript-kod, högerklicka på ett test i Test Explorer och välja Felsöka. I mer komplexa scenarier, till exempel vissa scenarier som använder källkartor, kan det vara svårt att nå brytpunkter i TypeScript-kod. Som en lösning kan du prova att använda nyckelordet debugger.

Not

Profileringstester och kodtäckning stöds inte för närvarande.