JavaScript és TypeScript tesztelési egység a Visual Studióban

Az egységteszteket a Visual Studióban a népszerűbb JavaScript-keretrendszerek használatával is megírhatja és futtathatja anélkül, hogy parancssorra kellene váltania. A Node.js és ASP.NET Core-projektek egyaránt támogatottak.

A támogatott keretrendszerek a következők:

• Mokka (mochajs.org)
• Jázmin (Jasmine.github.io)
• Tape (github.com/substack/tape)
• Jest (jestjs.io)
• Vitest (vitest.dev)

Egységtesztek írása cli-alapú projekthez (.esproj)

A Visual Studio 2022-ben támogatott CLI-alapú projektek a Test Explorerrel működnek. A Vitest a React- és Vue-projektek (korábban Jest) beépített tesztelési keretrendszere, a Karma és a Jasmine pedig Angular-projektekhez használható. Alapértelmezés szerint futtathatja az egyes keretrendszerek által biztosított alapértelmezett teszteket, valamint az ön által írt további teszteket. Csak nyomja le a Futtatás gombot a Test Explorerben. Ha még nem nyitotta meg a Test Explorert, a menüsávon válassza Test>Test Explorer lehetőséget.

Ha egységteszteket szeretne futtatni a parancssorból, kattintson a jobb gombbal a projektre a Megoldáskezelőben, válassza a Megnyitás a Terminálterületen lehetőséget, és futtassa a teszttípusra vonatkozó parancsot.

Az egységtesztek beállításával kapcsolatos információkért tekintse meg a következőket:

• Tesztelés a Vitesttel
• A React tesztelése a Jesttel
• Angular tesztelés
• tesztelés Vue.js

Itt egy egyszerű példát is bemutatunk. A teljes információkhoz azonban használja az előző hivatkozásokat.

Egységteszt hozzáadása (.esproj)

Az alábbi példa a Visual Studio 2022 17.12-es vagy újabb verziójában elérhető TypeScript React projektsablonon alapul, amely a Különálló TypeScript React Project sablon. A Vue és az Angular esetében a lépések hasonlóak.

1. A Megoldáskezelőben kattintson a jobb gombbal a React projektre, és válassza a Projektfájl szerkesztéselehetőséget.

2. Győződjön meg arról, hogy a következő tulajdonságok szerepelnek a .esproj fájlban a megjelenített értékekkel.

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

   Ez a példa a Vitestet adja meg tesztelési keretrendszerként. Ehelyett megadhatja a Mocha, a Tape, a Jasmine vagy a Jest nevet.

   A JavaScriptTestRoot elem azt határozza meg, hogy az egységtesztek a projektgyökér src mappájában lesznek. Gyakori a teszt mappa megadása is.

3. A Megoldáskezelőben kattintson a jobb gombbal az npm csomópontra, és válassza az Új npm-csomagok telepítéselehetőséget.

   Az npm-csomag telepítési párbeszédpaneljén telepítse a következő npm-csomagokat:

   • vitest

   Ez a csomag hozzáadódik a package.json fájlhoz a függőségek alatt.

   Jegyzet

   Ha jestet használ, a jest-editor-support npm csomagra és a jest csomagra is szükség van.

4. A package.jsonvégén adja hozzá a test szakaszt a scripts szakaszhoz.

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

5. A Megoldáskezelőben kattintson a jobb gombbal az src mappára, és válassza a >Új elem hozzáadásalehetőséget, majd adjon hozzá egy App.test.tsxnevű új fájlt.

   Ezzel hozzáadja az új fájlt az src mappához.

6. Adja hozzá az alábbi kódot App.test.tsx.

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

7. Nyissa meg a Test Explorert (válassza Test>Test Explorer) lehetőséget, és a Visual Studio felderíti és megjeleníti a teszteket. Ha a tesztek kezdetben nem jelennek meg, építse újra a projektet a lista frissítéséhez.

   

   Jegyzet

   TypeScript esetén ne használja a outfiletsconfig.jsonlehetőséget, mert a Test Explorer nem fogja tudni megtalálni az egységteszteket. Használhatja a outdir lehetőséget, de győződjön meg arról, hogy az olyan konfigurációs fájlok, mint a package.json és a tsconfig.json a projekt gyökérkönyvtárában találhatók.

   Fontos

   Ha a Kimenet ablakban a Tesztek kimenete hibát jelez ReadOnlySpan a tesztfelderítés során, használja az alábbi kerülő megoldást egy ismert MSBuild-probléma esetén. A Visual Studio 2022-ben nyissa meg a Program Files\Microsoft Visual Studio\2022\version<\>Common7\IDE\Extensions\TestPlatform mappát, és nevezze át System.Memory.dll másik névre. Ez a javítás lehetővé teszi a tesztfelderítést.

Tesztek futtatása (.esproj)

A teszteket a Test Explorer Az összes futtatása hivatkozásra kattintva futtathatja. Vagy futtassa a teszteket úgy, hogy kiválaszt egy vagy több tesztet vagy csoportot, jobb gombbal kattint, majd a helyi menüben a Futtatás lehetőséget választja. A tesztek a háttérben futnak, és a Test Explorer automatikusan frissíti és megjeleníti az eredményeket. Emellett a kiválasztott tesztek hibakereséséhez kattintson a jobb gombbal, és válassza Hibakeresésilehetőséget.

Az alábbi ábrán egy második egységteszttel kiegészített példa látható.

Egyes egységtesztelési keretrendszerek esetében az egységtesztek általában a létrehozott JavaScript-kódon futnak.

Jegyzet

A legtöbb TypeScript-forgatókönyvben hibakeresést végezhet egy egységtesztben, ha beállít egy töréspontot a TypeScript-kódban, a tesztre a Jobb gombbal a Test Explorerben kattint, és kiválasztja Hibakeresésilehetőséget. Összetettebb forgatókönyvekben, például forrástérképeket használó forgatókönyvekben előfordulhat, hogy nehézséget okoz a töréspontok elérése a TypeScript-kódban. Kerülő megoldásként próbálja meg használni a debugger kulcsszót.

Jegyzet

A profilkészítési tesztek és a kódlefedettség jelenleg nem támogatott.

Egységtesztek futtatása parancssori-felületű projekt (.esproj) parancssorából

Az egységteszteket közvetlenül az egységtesztelési keretrendszer parancssorából is futtathatja ugyanúgy, mint ha nem a Visual Studiót használná.

Dönthet úgy is, hogy a vstest.console használatával futtatja a teszteket a parancssorból. Előfordulhat például, hogy a vstest.console használatával konzisztenciát szeretne fenntartani a C# egységtesztekkel, vagy az Azure DevOpsban szeretne futni. Használja a következő parancsot, de cserélje le MyProj a projekt nevére.

vstest.console .\MyProj.esproj /TestAdapterPath:"C:\Program Files\Microsoft Visual Studio\18\Enterprise\Common7\IDE\Extensions\Microsoft\JavaScript"

Írjon egységteszteket az ASP.NET Core-hoz

Ha támogatást szeretne adni a JavaScript és a TypeScript egységteszteléséhez egy ASP.NET Core-projektben, hozzá kell adnia a TypeScript, az npm és az egységtesztelés támogatását a projekthez a szükséges NuGet-csomagok hozzáadásával.

Egységteszt hozzáadása (ASP.NET Core)

Az alábbi példa a ASP.NET Core Model-View-Controller projektsablonon alapul, és tartalmaz egy Jest- vagy Mocha-egységtesztet.

1. Hozzon létre egy ASP.NET Core Model-View-Controller projektet.

   Példaprojekt: TypeScript hozzáadása meglévő ASP.NET Core-alkalmazáshoz. Az egységtesztelés támogatásához javasoljuk, hogy egy standard ASP.NET Core-projektsablonnal kezdjen.

2. A Megoldáskezelőben (jobb oldali ablaktáblán) kattintson a jobb gombbal a ASP.NET Core projektcsomópontra, és válassza a Megoldáshoz készült NuGet-csomagok kezeléselehetőséget.

3. A Tallózás lapon keresse meg a következő csomagokat, és telepítse azokat:

   • Microsoft.TypeScript.MSBuild
   • Npm

   A NuGet-csomag használatával adja hozzá a TypeScript-támogatást az npm TypeScript-csomag helyett.

4. A Megoldáskezelőben kattintson a jobb gombbal a projektcsomópontra, és válassza a Projektfájl szerkesztéselehetőséget.

   Megnyílik a .csproj fájl a Visual Studióban.

5. Adja hozzá a következő elemeket a .csproj fájlhoz a PropertyGroup elemben.

   Ez a példa a Jestet vagy a Mochát határozza meg tesztelési keretrendszerként. Ahelyett megadhatja, hogy Tape vagy Jasmine legyen.

   Jest

   A JavaScriptTestRoot elem azt határozza meg, hogy az egységtesztek a projektgyökér tesztek mappájában lesznek.

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

   Mocha

   A JavaScriptTestRoot elem határozza meg az egységtesztek helyét. A Mocha konfigurációjának egyszerűsítése érdekében ebben a példában a tesztgyökerét a kimeneti mappára, a wwwroot\js\tests\-ra mutatjuk.

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

6. A Megoldáskezelőben kattintson a jobb gombbal a ASP.NET Core projektcsomópontra, és válassza > Új elem hozzáadásalehetőséget. Válassza a TypeScript JSON-konfigurációs fájl, majd válassza a Hozzáadáslehetőséget.

   Ha nem látja az összes elemsablont, válassza Az összes sablon megjelenítéselehetőséget, majd válassza ki az elemsablont.

   A Visual Studio hozzáadja a tsconfig.json fájlt a projekt gyökeréhez. Ezzel a fájllal konfigurálhatja a TypeScript-fordítóhoz beállításokat.

7. Nyissa meg tsconfig.json, és cserélje le az alapértelmezett kódot a következő kódra:

   Jest

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

   A Jest esetében, ha TypeScript-teszteket szeretne JavaScriptre fordítani, távolítsa el a teszteket mappát a kizárási szakaszból.

   A szkriptek mappában helyezheti el az alkalmazás TypeScript-kódját. A kódokat felveszõ példaprojektekért lásd: TypeScript hozzáadása meglévő ASP.NET Core-alkalmazáshoz.

   Mocha

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

   A szkriptek mappában helyezheti el az alkalmazás TypeScript-kódját. A kódokat felveszõ példaprojektekért lásd: TypeScript hozzáadása meglévő ASP.NET Core-alkalmazáshoz.

8. Kattintson a jobb gombbal a projektre a Megoldáskezelőben, és válassza a >Új elem hozzáadása (vagy nyomja le Ctrl + SHIFT + A). A keresőmezővel keresse meg az npm-fájlt, válassza ki az npm konfigurációs fájl, használja az alapértelmezett nevet, és kattintson a hozzáadása elemre.

   A program hozzáad egy package.json fájlt a projekt gyökeréhez.

9. A Megoldáskezelőben kattintson a jobb gombbal az npm csomópontra a Függőségek csoportban, és válassza Új npm-csomagok telepítéselehetőséget.

   Jegyzet

   Bizonyos esetekben előfordulhat, hogy a Megoldáskezelő nem jeleníti meg az npm csomópontot az itt ismertetett ismert probléma miatt,. Ha meg kell jelennie az npm csomópontnak, eltávolíthatja a projektet (kattintson a jobb gombbal a projektre, és válassza a Projekt eltávolítása) lehetőséget, majd töltse be újra a projektet az npm csomópont újbóli megjelenítéséhez. Alternatívaként hozzáadhatja a csomagbejegyzéseket a package.json-hez, majd a projekt felépítésével telepítheti.

   Az npm-csomag telepítési párbeszédpaneljén telepítse a következő npm-csomagokat:

   Jest

   • tréfa
   • jest-editor-support
   • @types/jest

   Ezek a csomagok a devDependencies alatti package.json fájlba kerülnek.

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

   Mocha

   • mokka
   • kijelent
   • @types/mocha
   • @types/node

   Ezek a csomagok a devDependencies alatti package.json fájlba kerülnek.

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

10. A package.jsonvégén adja hozzá a test szakaszt a scripts szakaszhoz.

    Jest

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

    Mocha

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

11. A Megoldáskezelőben kattintson a jobb gombbal a teszt mappára, és válassza >Új elem hozzáadásalehetőséget, majd adjon hozzá egy új fájlt App.test.tsx.

    Ezzel hozzáadja az új fájlt a teszt mappához.

12. Adja hozzá az alábbi kódot 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. Nyissa meg a Test Explorert (válassza Tesztelés>Windows>Test Explorer) lehetőséget, és a Visual Studio felderíti és megjeleníti a teszteket. Ha a tesztek kezdetben nem jelennek meg, építse újra a projektet a lista frissítéséhez. Az alábbi ábra a Jest-példát mutatja be két különböző egységtesztfájllal.

    

    Jegyzet

    TypeScript esetén ne használja a outfiletsconfig.jsonlehetőséget, mert a Test Explorer nem fogja tudni megtalálni az egységteszteket. Használhatja a outdir lehetőséget, de győződjön meg arról, hogy az olyan konfigurációs fájlok, mint a package.json és a tsconfig.json a projekt gyökérkönyvtárában találhatók.

Tesztek futtatása (ASP.NET Core)

A teszteket a Test Explorer Az összes futtatása hivatkozásra kattintva futtathatja. Vagy futtassa a teszteket úgy, hogy kiválaszt egy vagy több tesztet vagy csoportot, jobb gombbal kattint, majd a helyi menüben a Futtatás lehetőséget választja. A tesztek a háttérben futnak, és a Test Explorer automatikusan frissíti és megjeleníti az eredményeket. Emellett a kiválasztott tesztek hibakereséséhez kattintson a jobb gombbal, és válassza Hibakeresésilehetőséget.

Az alábbi ábrán a Jest-példa látható egy második egységteszt hozzáadásával.

Egyes egységtesztelési keretrendszerek esetében az egységtesztek általában a létrehozott JavaScript-kódon futnak.

Jegyzet

A legtöbb TypeScript-forgatókönyvben hibakeresést végezhet egy egységtesztben, ha beállít egy töréspontot a TypeScript-kódban, a tesztre a Jobb gombbal a Test Explorerben kattint, és kiválasztja Hibakeresésilehetőséget. Összetettebb forgatókönyvekben, például forrástérképeket használó forgatókönyvekben előfordulhat, hogy nehézséget okoz a töréspontok elérése a TypeScript-kódban. Kerülő megoldásként próbálja meg használni a debugger kulcsszót.

Jegyzet

A profilkészítési tesztek és a kódlefedettség jelenleg nem támogatott.