Jednotkové testování JavaScriptu a TypeScriptu v rámci 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)

Zapište 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. Stačí v Průzkumníku testů stisknout tlačítko Spustit. Pokud ještě nemáte otevřený Průzkumník testů, najdete ho tak, že v řádku nabídek 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.

Pro informace o nastavení jednotkových testů viz následující:

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

Přidejte jednotkový test (.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é.

V Průzkumníku řešení klikněte pravým tlačítkem na projekt React a zvolte Upravit soubor projektu.
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 .
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 vyžadován balíček jest-editor-support npm stejně jako balíček jest.
Do package.jsonpřidejte oddíl test na konec oddílu scripts:
```
"scripts": {
   ...
   "test": "vitest"
},
```
V Průzkumníku řešení klikněte pravým tlačítkem na složku src a zvolte Přidat>Nová položka, poté přidejte nový soubor jménem App.test.tsx.

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

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);
   });
});

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

Poznámka

Pro TypeScript nepoužívejte outfile možnost v tsconfig.json, protože Průzkumník testů nebude moct 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.

Důležitý

Pokud výstup testů v okně Výstup zobrazuje ReadOnlySpan chybu při zjišťování testů, použijte následující alternativní řešení známého problému nástroje MSBuild. Pro Visual Studio 2022 otevřete složku Program Files\Microsoft Visual Studio\2022\<version>\Common7\IDE\Extensions\TestPlatform a přejmenujte System.Memory.dll na jiný název. Tato oprava umožňuje zjišťování testů.

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, pravým tlačítkem myši kliknete 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.

Snímek obrazovky výsledků Průzkumníka testů (.esproj).

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 nastavením zarážky v TypeScriptovém kódu, kliknutím pravým tlačítkem myši na test v Test Exploreru 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í.

Spuštění testů jednotek z příkazového řádku pro projekt založený na rozhraní příkazového řádku (.esproj)

Testy jednotek můžete spouštět přímo z příkazového řádku pro architekturu testování jednotek stejným způsobem jako v případě, že nepoužíváte Visual Studio.

Můžete se také rozhodnout spustit testy z příkazového řádku pomocí vstest.console. Můžete například chtít použít vstest.console k zachování konzistence s testy jednotek jazyka C# nebo ke spuštění v Azure DevOps. Použijte následující příkaz, ale nahraďte MyProj názvem projektu.

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

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

Psát jednotkové testy pro ASP.NET Core

Pokud chcete do projektu ASP.NET Core přidat podporu testování částí JavaScriptu a TypeScriptu, 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.

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.
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í.
Na kartě Procházet vyhledejte následující balíčky a nainstalujte je:
- Microsoft.TypeScript.MSBuild
- Npm
Balíček NuGet použijte k přidání podpory TypeScriptu místo balíčku npm TypeScript.
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 prostředí Visual Studio.
Do souboru .csproj v elementu PropertyGroup přidejte následující prvky.

Tento příklad určuje jako testovací architekturu Jest nebo Mocha. Můžete místo toho specifikovat pásku nebo Jasmine.
- Jest
- Mocha
Prvek JavaScriptTestRoot určuje, že jednotkové testy budou ve složce testy v kořenovém adresáři projektu.
```
<PropertyGroup>
   ...
   <JavaScriptTestRoot>tests\</JavaScriptTestRoot>
   <JavaScriptTestFramework>Jest</JavaScriptTestFramework>
   <GenerateProgramFile>false</GenerateProgramFile>
</PropertyGroup>
```
Prvek JavaScriptTestRoot určuje umístění pro vaše jednotkové testy. 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>
```
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. Zvolte konfigurační soubor JSONTypeScriptu 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.

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

Jest
Mocha

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

Pro Jest, pokud chcete zkompilovat testy TypeScriptu do JavaScriptu, odeberte složku testy z oddílu vyloučit.

Ve složce skriptů je místo, kam 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.

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

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.
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
- Mocha
- žertovat
- Podpora pro jest editor
- @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"
```
- 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"
```

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

Jest
Mocha

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

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

V Průzkumníku řešení klikněte pravým tlačítkem na složku test a zvolte Přidat>Nová položka, a poté přidejte nový soubor nazvaný App.test.tsx.

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

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

Jest
Mocha

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

var assert = require('assert');

describe('testAsuite', function () {
   it('testA1', function () {
      assert.equal(1, 1);
   })
})

Otevřete Průzkumníka testů (zvolte Test>Windows>Průzkumník testů) a Visual Studio vyhledá a zobrazí testy. Pokud se testy nezobrazují zpočá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 tsconfig.json, protože Průzkumník testů nebude moct 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.

Důležitý

Pokud výstup testů v okně Výstup zobrazuje ReadOnlySpan chybu při zjišťování testů, použijte následující alternativní řešení známého problému nástroje MSBuild. V sadě Visual Studio 2022 otevřete složku Program Files\Microsoft Visual Studio\2022\<version>\Common7\IDE\Extensions\TestPlatform a přejmenujte System.Memory.dll na jiný název. Tato oprava umožňuje zjišťování testů.

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

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

snímek obrazovky s výsledky Průzkumníka testů (ASP.NET Core).

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

Poznámka

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

Váš názor

Byla tato stránka užitečná?

Last updated on 2025-12-12

Sdílet prostřednictvím

Jednotkové testování JavaScriptu a TypeScriptu v rámci Visual Studio

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

Přidejte jednotkový test (.esproj)

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

Spuštění testů jednotek z příkazového řádku pro projekt založený na rozhraní příkazového řádku (.esproj)

Psát jednotkové testy pro ASP.NET Core

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

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

Váš názor

Další materiály