Jednotkové testování JavaScriptu a TypeScriptu v sadě Visual Studio

Testy jednotek můžete psát a spouštět v sadě Visual Studio pomocí některých oblíbených architektur JavaScriptu, aniž byste museli přepnout na příkazový řádek. Podporují se projekty Node.js i ASP.NET Core.

Podporované architektury jsou:

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

Napsat jednotkové testy pro projekt založený na rozhraní příkazového řádku (.esproj)

Projekty založené na rozhraní příkazového řádku podporované v sadě Visual Studio 2022, fungují s Průzkumníkem testů. Vitest je integrovaná testovací architektura pro projekty React a Vue (dříve Jest) a Karma a Jasmine se používají pro projekty Angular. Ve výchozím nastavení budete moct spouštět výchozí testy poskytované jednotlivými architekturami a také všechny další testy, které napíšete. V Průzkumníku testů stačí stisknout tlačítko Spustit. Pokud ještě nemáte otevřený Průzkumník testů, najdete ho, když v nabídce vyberete Test>Průzkumník testů.

Pokud chcete spustit testy jednotek z příkazového řádku, klikněte pravým tlačítkem na projekt v Průzkumníku řešení, zvolte Otevřít v terminálua spusťte příkaz specifický pro typ testu.

Informace o nastavení jednotkových testů najdete v následujícím:

• testování pomocí Vitest
• Testování Reactu pomocí Jestu
• Testování v Angularu
• Testování Vue.js

Tady je také uveden jednoduchý příklad. K úplným informacím však použijte předchozí odkazy.

Přidání testu jednotek (.esproj)

Následující příklad vychází ze šablony projektu TypeScript React poskytované v sadě Visual Studio 2022 verze 17.12 nebo novější, což je šablona samostatného projektu TypeScript React. U Vue a Angular jsou kroky podobné.

1. V Průzkumníku řešení klikněte pravým tlačítkem na projekt React a zvolte Upravit soubor projektu.

2. Ujistěte se, že v souboru .esproj jsou k dispozici následující vlastnosti se zobrazenými hodnotami.

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

   Tento příklad určuje Vitest jako testovací architekturu. Místo toho můžete zadat Mocha, Tape, Jasmine nebo Jest.

   Prvek JavaScriptTestRoot určuje, že testy jednotek budou ve složce src kořenového adresáře projektu. Je také běžné zadat složku test.

3. V Průzkumníku řešení klikněte pravým tlačítkem na uzel npm a zvolte Nainstalovat nové balíčky npm.

   Pomocí dialogového okna instalace balíčku npm nainstalujte následující balíčky npm:

   • vitest

   Tento balíček se přidá do souboru package.json v rámci závislostí.

   Poznámka

   Pokud používáte jest, je požadován balíček jest-editor-support npm a také balíček jest.

4. Do package.jsonpřidejte oddíl test na konec oddílu scripts:

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

5. V Průzkumníku řešení klikněte pravým tlačítkem na složku src a vyberte Přidat>Nová položkaa pak přidejte nový soubor s názvem App.test.tsx.

   Tím se nový soubor přidá do složky src.

6. Do app.test.tsxpřidejte následující kód.

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

7. Otevřete Průzkumníka testů (zvolte Test>Průzkumník testů) a Visual Studio vyhledá a zobrazí testy. Pokud se testy nezobrazují na začátku, znovu sestavte projekt a aktualizujte seznam.

   

   Poznámka

   Pro TypeScript nepoužívejte možnost outfile v tsconfig.json, protože Průzkumník testů nebude moci najít jednotkové testy. Můžete použít možnost outdir, ale ujistěte se, že konfigurační soubory, jako jsou package.json a tsconfig.json, jsou v kořenovém adresáři projektu.

Spouštění testů (.esproj)

Testy můžete spustit kliknutím na odkaz Spustit vše v Průzkumníku testů. Nebo můžete testy spustit tak, že vyberete jeden nebo více testů nebo skupin, kliknete pravým tlačítkem myši a v místní nabídce vyberete Spustit. Testy běží na pozadí a Průzkumník testů se automaticky aktualizuje a zobrazí výsledky. Kromě toho můžete také ladit vybrané testy tak, že kliknete pravým tlačítkem myši a vyberete Ladění.

Následující obrázek ukazuje příklad s přidaným druhým jednotkovým testem.

U některých architektur testů jednotek se testy jednotek obvykle spouštějí proti vygenerovanému kódu JavaScriptu.

Poznámka

Ve většině scénářů TypeScriptu můžete ladit jednotkový test tak, že nastavíte zarážku v kódu TypeScript, kliknete pravým tlačítkem myši na test v Průzkumníku testů a zvolíte Ladění. Ve složitějších scénářích, například v některých scénářích, které používají zdrojové mapy, může být obtížné narazit na zarážky v kódu TypeScriptu. Jako alternativní řešení zkuste použít klíčové slovo debugger.

Poznámka

V současné době nejsou podporovány testy profilace a pokrytí kódu.

Psaní jednotkových testů pro ASP.NET Core

Pokud chcete přidat podporu pro testování částí JavaScriptu a TypeScriptu v projektu ASP.NET Core, musíte do projektu přidat podporu TypeScriptu, Npm a testování jednotek zahrnutím požadovaných balíčků NuGet.

Přidání jednotkového testu (ASP.NET Core)

Následující příklad je založený na šabloně projektu ASP.NET Core Model-View-Controller a zahrnuje přidání testu jednotek Jest nebo Mocha.

1. Vytvoření ASP.NET základního modelu –View-Controller projektu

   Příklad projektu najdete v tématu Přidání TypeScriptu do existující aplikace ASP.NET Core. Pro podporu testování jednotek doporučujeme začít se standardní šablonou projektu ASP.NET Core.

2. V Průzkumníku řešení (pravé podokno) klikněte pravým tlačítkem na uzel projektu ASP.NET Core a vyberte Spravovat balíčky NuGet pro řešení.

3. Na kartě Procházet vyhledejte následující balíčky a nainstalujte je:

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

   Balíček NuGet použijte k přidání podpory TypeScriptu místo balíčku npm TypeScript.

4. V Průzkumníku řešení klikněte pravým tlačítkem na uzel projektu a zvolte Upravit soubor projektu.

   Soubor .csproj se otevře v aplikaci Visual Studio.

5. Do souboru .csproj v elementu PropertyGroup přidejte následující prvky.

   Tento příklad určuje jako testovací architekturu Jest nebo Mocha. Místo toho můžete specifikovat Tape nebo Jasmine.

   Jest

   Prvek JavaScriptTestRoot určuje, že vaše jednotkové testy budou ve složce testy, která se nachází v kořenovém adresáři projektu.

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

   Mocha

   Prvek JavaScriptTestRoot určuje umístění jednotkových testů. Pro zjednodušení konfigurace pro Mocha v tomto příkladu nasměrujeme kořen testu na výstupní složku *wwwroot\js\tests*.

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

6. V Průzkumníku řešení klikněte pravým tlačítkem na uzel projektu ASP.NET Core a vyberte Přidat > Nová položka. Zvoltekonfigurační soubor JSON TypeScriptu a pak vyberte Přidat.

   Pokud nevidíte všechny šablony položek, vyberte Zobrazit všechny šablonya pak zvolte šablonu položky.

   Visual Studio přidá soubor tsconfig.json do kořenového adresáře projektu. Tento soubor můžete použít k konfiguraci možností pro kompilátor TypeScript.

7. Otevřete tsconfig.json a nahraďte výchozí kód následujícím kódem:

   Je

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

   Pokud chcete v rámci Jest zkompilovat testy TypeScriptu do JavaScriptu, odeberte složku testů z oddílu vyloučení.

   Ve složce můžete umístit kód TypeScriptu pro vaši aplikaci. Příklad projektu, který přidává kód, najdete v tématu Přidání TypeScriptu do existující aplikace ASP.NET Core.

   Mocha

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

   Složka skriptů je místo, kam můžete umístit TypeScriptový kód pro vaši aplikaci. Příklad projektu, který přidává kód, najdete v tématu Přidání TypeScriptu do existující aplikace ASP.NET Core.

8. Klikněte pravým tlačítkem na projekt v Průzkumníku řešení a zvolte Přidat>Nová položka (nebo stiskněte Ctrl + SHIFT + A). Pomocí vyhledávacího pole vyhledejte soubor npm, zvolte konfigurační soubor npm, použijte výchozí název a klikněte na Přidat.

   Do kořenového adresáře projektu se přidá soubor package.json.

9. V Průzkumníku řešení klikněte pravým tlačítkem na uzel npm v části Závislosti a zvolte Nainstalovat nové balíčky npm.

   Poznámka

   V některých scénářích nemusí Průzkumník řešení zobrazit uzel npm kvůli známému problému popsanému zde. Pokud potřebujete zobrazit uzel npm, můžete projekt uvolnit (klikněte pravým tlačítkem myši na projekt a zvolte Uvolnit projekt) a pak projekt znovu načtěte, aby se uzel npm znovu zobrazil. Alternativně můžete přidat položky balíčku pro package.json a nainstalovat sestavením projektu.

   Pomocí dialogového okna instalace balíčku npm nainstalujte následující balíčky npm:

   Jest

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

   Tyto balíčky se přidají do souboru package.json v části devDependencies.

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

   Mocha

   • moka
   • tvrdit
   • @types/mocha
   • @types/node

   Tyto balíčky se přidají do souboru package.json v části devDependencies.

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

10. Do package.jsonpřidejte oddíl test na konec oddílu scripts:

    Jest

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

    Mocha

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

11. V Průzkumníku řešení klikněte pravým tlačítkem na složku test a zvolte Přidat>Nová položkaa pak přidejte nový soubor s názvem App.test.tsx.

    Tím se nový soubor přidá do složky test.

12. Do app.test.tsxpřidejte následující kód.

    Je

    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. Otevřete Průzkumníka testů (zvolte Test>Windows>Průzkumník testů) a Visual Studio vyhledá a zobrazí testy. Pokud se testy nezobrazují na začátku, znovu sestavte projekt a aktualizujte seznam. Následující obrázek znázorňuje příklad Jest se dvěma různými soubory testů jednotek.

    

    Poznámka

    Pro TypeScript nepoužívejte možnost outfile v tsconfig.json, protože Průzkumník testů nebude moct najít vaše jednotkové testy. Můžete použít možnost outdir, ale ujistěte se, že konfigurační soubory, jako jsou package.json a tsconfig.json, jsou v kořenovém adresáři projektu.

Spouštění testů (ASP.NET Core)

Testy můžete spustit kliknutím na odkaz Spustit vše v Průzkumníkovi testů. Nebo můžete testy spustit tak, že vyberete jeden nebo více testů nebo skupin, kliknete pravým tlačítkem myši a v místní nabídce vyberete Spustit. Testy běží na pozadí a Průzkumník testů se automaticky aktualizuje a zobrazí výsledky. Kromě toho můžete ladit vybrané testy kliknutím pravým tlačítkem myši a výběrem možnosti Ladění.

Následující obrázek ukazuje příklad Jest s přidaným druhým jednotkovým testem.

U některých architektur testů jednotek se testy jednotek obvykle spouštějí proti vygenerovanému kódu JavaScriptu.

Poznámka

Ve většině scénářů TypeScriptu můžete ladit jednotkový test umístěním zarážky v kódu TypeScript, kliknutím pravým tlačítkem myši na test v Prohlížeči testů a zvolením Ladění. Ve složitějších scénářích, například v některých scénářích, které používají zdrojové mapy, může být obtížné narazit na zarážky v kódu TypeScriptu. Jako alternativní řešení zkuste použít klíčové slovo debugger.

Poznámka

Testy profilace a pokrytí kódu se v současné době nepodporují.