Testování částí v 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)

Zápis testů jednotek 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 pracují s Průzkumníkem testů. Jest je integrovaná testovací architektura pro projekty React a Vue 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. Stačí stisknout tlačítko Spustit v Průzkumníku testů. Pokud průzkumníka testů ještě nemáte otevřený, najdete ho tak, že v řádku nabídek vyberete Průzkumníka testů>.

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

Informace o nastavení testů jednotek najdete v následujících tématech:

• Testování Reactu pomocí Jestu
• Angular testing
• 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 je založený na šabloně projektu TypeScript React poskytované v sadě Visual Studio 2022 verze 17.8 nebo novější, což je samostatná šablona projektu TypeScript React. U Vue a Angular jsou kroky podobné.

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

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

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

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

   Element JavaScriptTestRoot určuje, že testy jednotek budou ve složce src kořenového adresáře projektu.

3. V Průzkumník ř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:

   • jest
   • jest-editor-support

   Tyto balíčky se přidají do souboru package.json v rámci závislostí.

4. V souboru package.json přidejte test oddíl na konec oddílu scripts :

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

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

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

6. Do souboru App.test.tsx přidejte následující kód.

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

7. Otevřete Průzkumníka testů (zvolte >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 outfile možnost v souboru tsconfig.json, protože Průzkumník testů nebude moct najít testy jednotek. Tuto možnost můžete použít outdir , ale ujistěte se, že jsou konfigurační soubory, jako package.json jsou 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. Vybrané testy můžete také ladit tak, že kliknete pravým tlačítkem myši a vyberete Ladit.

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

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 test jednotek nastavením zarážky v kódu TypeScriptu, kliknutím pravým tlačítkem myši na test v Průzkumníku testů a zvolením Ladit. 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 debugger klíčové slovo.

Poznámka:

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

Zápis testů jednotek 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í testu jednotek (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řte projekt ASP.NET Core Model-View-Controller.

   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ík ř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ík řešení klikněte pravým tlačítkem myši na uzel projektu a zvolte Upravit soubor projektu.

   Soubor .csproj se otevře v sadě 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 zadat pásku nebo Jasmine.

   Jest

   Prvek JavaScriptTestRoot určuje, že testy jednotek budou ve složce testů kořenového adresáře projektu.

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

   Mocha

   Element JavaScriptTestRoot určuje umístění testů jednotek. 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ík řešení klikněte pravým tlačítkem na uzel projektu ASP.NET Core a vyberte Přidat > novou položku. Zvolte konfigurační soubor JSON TypeScriptu a pak vyberte Přidat.

   Pokud nevidíte všechny šablony položek, vyberte Zobrazit všechny šablony a 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 ke konfiguraci možností kompilátoru TypeScriptu.

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

   Jest

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

   Pokud chcete kompilovat testy TypeScriptu do JavaScriptu, odeberte složku testů z oddílu vyloučení .

   Ve složce skriptů můžete vložit 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"
     ]
   }
   

   Ve složce skriptů můžete vložit 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.

8. Klikněte pravým tlačítkem myši na projekt v Průzkumník řešení a zvolte Přidat>novou položku (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ík ř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 Průzkumník řešení nemusí zobrazit uzel npm kvůli známému problému popsanému tady. 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 do souboru package.json a nainstalovat sestavením projektu.

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

   Jest

   • jest
   • 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

   • Mocha
   • Assert
   • @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. V souboru package.json přidejte test oddíl na konec oddílu scripts :

    Jest

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

    Mocha

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

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

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

12. Do souboru App.test.tsx přidejte následující kód.

    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. Otevřete Průzkumníka testů (zvolte >>Test Windows Test Explorer) 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 outfile možnost v souboru tsconfig.json, protože Průzkumník testů nebude moct najít testy jednotek. Tuto možnost můžete použít outdir , ale ujistěte se, že jsou konfigurační soubory, jako package.json jsou 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í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. Vybrané testy můžete také ladit tak, že kliknete pravým tlačítkem myši a vyberete Ladit.

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

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 test jednotek nastavením zarážky v kódu TypeScriptu, kliknutím pravým tlačítkem myši na test v Průzkumníku testů a zvolením Ladit. 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 debugger klíčové slovo.

Poznámka:

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