Testowanie jednostkowe języka JavaScript i języka TypeScript w programie Visual Studio

Testy jednostkowe można pisać i uruchamiać w programie Visual Studio przy użyciu niektórych bardziej popularnych struktur języka JavaScript bez konieczności przełączania się do wiersza polecenia. Obsługiwane są zarówno projekty Node.js, jak i ASP.NET Core.

Obsługiwane platformy to:

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

Napisz testy jednostkowe dla projektu opartego na interfejsie wiersza polecenia (.esproj)

Projekty oparte na interfejsie wiersza polecenia obsługiwane w programie Visual Studio 2022 współpracują z Eksploratorem testów. Vitest to wbudowana platforma testowa dla projektów React i Vue (wcześniej Jest), a Karma i Jasmine są używane w projektach Angular. Domyślnie będzie można uruchamiać domyślne testy udostępniane przez każdą platformę, a także wszelkie dodatkowe testy, które piszesz. Wystarczy nacisnąć przycisk Uruchom w Eksploratorze Testów. Jeśli eksplorator testów nie jest jeszcze otwarty, możesz go znaleźć, wybierając pozycję Test>Eksplorator testów na pasku menu.

Aby uruchomić testy jednostkowe z poziomu wiersza polecenia, kliknij prawym przyciskiem myszy projekt w Eksploratorze rozwiązań, wybierz Otwórz w terminalui uruchom polecenie specyficzne dla typu testu.

Aby uzyskać informacje na temat konfigurowania testów jednostkowych, zobacz następujące tematy:

• testowanie za pomocą Vitest
• Testowanie React za pomocą Jest
• Testowanie Angulara
• Testowanie Vue.js

W tym miejscu przedstawiono również prosty przykład. Użyj jednak powyższych linków, aby uzyskać pełne informacje.

Dodaj test jednostkowy (.esproj)

Poniższy przykład jest oparty na szablonie projektu React TypeScript udostępnionym w programie Visual Studio 2022 w wersji 17.12 lub nowszej, który jest szablonem Standalone TypeScript React Project. W przypadku programu Vue i platformy Angular kroki są podobne.

1. W Eksploratorze rozwiązań kliknij prawym przyciskiem myszy projekt React i wybierz pozycję Edytuj plik projektu.

2. Upewnij się, że następujące właściwości znajdują się w pliku .esproj z podanymi wartościami.

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

   W tym przykładzie określono platformę Vitest jako platformę testową. Zamiast tego można określić Mocha, Tape, Jasmine lub Jest.

   Element JavaScriptTestRoot określa, że testy jednostkowe będą znajdować się w folderze src katalogu głównego projektu. Często określa się również folder testowy.

3. W Eksploratorze rozwiązań kliknij prawym przyciskiem myszy węzeł npm i wybierz pozycję Zainstaluj nowe pakiety npm.

   Użyj okna dialogowego instalacji pakietu npm, aby zainstalować następujące pakiety npm:

   • vitest

   Te pakiety są dodawane do pliku package.json jako zależność.

   Notatka

   ** Jeśli używasz narzędzia jest, wymagany jest również pakiet jest-editor-support npm oraz pakiet jest.

4. W package.jsondodaj sekcję test na końcu sekcji scripts:

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

5. W Eksploratorze rozwiązań kliknij prawym przyciskiem myszy folder src i wybierz pozycję Dodaj>nowy element, a następnie dodaj nowy plik o nazwie App.test.tsx.

   Spowoduje to dodanie nowego pliku w folderze src.

6. Dodaj następujący kod do App.test.tsx.

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

7. Otwórz Eksploratora testów (wybierz pozycję Test>Eksplorator testów) i program Visual Studio odnajduje i wyświetla testy. Jeśli testy nie są wyświetlane początkowo, ponownie skompiluj projekt, aby odświeżyć listę.

   

   Notatka

   W przypadku języka TypeScript nie używaj opcji outfile w tsconfig.json, ponieważ Eksplorator testów nie będzie mógł odnaleźć testów jednostkowych. Możesz użyć opcji outdir, ale upewnij się, że pliki konfiguracji, takie jak package.json i tsconfig.json, znajdują się w katalogu głównym projektu.

Uruchamianie testów (esproj)

Testy można uruchomić, klikając link Uruchom wszystkie w Eksploratorze testów. Możesz też uruchamiać testy, wybierając co najmniej jeden test lub kilka grup, klikając prawym przyciskiem myszy i wybierając Uruchom z menu skrótów. Testy są uruchamiane w tle, a Eksplorator testów automatycznie aktualizuje i wyświetla wyniki. Ponadto możesz również debugować wybrane testy, klikając prawym przyciskiem myszy i wybierając pozycję Debuguj.

Poniższa ilustracja przedstawia przykład z dodanym drugim testem jednostkowym.

W przypadku niektórych struktur testów jednostkowych testy jednostkowe są zwykle uruchamiane względem wygenerowanego kodu JavaScript.

Notatka

W większości przypadków użycia TypeScript można debugować test jednostkowy, ustawiając punkt przerwania w kodzie TypeScript, klikając prawym przyciskiem myszy test w Eksploratorze testów i wybierając Debug. W bardziej złożonych scenariuszach, takich jak niektóre scenariusze korzystające z map źródłowych, może wystąpić trudności z trafieniem punktów przerwania w kodzie TypeScript. Aby obejść ten problem, spróbuj użyć słowa kluczowego debugger.

Notatka

Testy profilowania i pokrycie kodu nie są obecnie obsługiwane.

Pisanie testów jednostkowych dla platformy ASP.NET Core

Aby dodać obsługę testowania jednostkowego języków JavaScript i TypeScript w projekcie ASP.NET Core, należy dodać obsługę języków TypeScript, Npm i testów jednostkowych do projektu przez dołączenie wymaganych pakietów NuGet.

Dodawanie testu jednostkowego (ASP.NET Core)

Poniższy przykład jest oparty na szablonie projektu ASP.NET Core Model-View-Controller i obejmuje dodawanie testu jednostkowego Jest lub Mocha.

1. Utwórz projekt ASP.NET Core Model-View-Controller.

   Aby zapoznać się z przykładowym projektem, zobacz Add TypeScript to an existing ASP.NET Core app(Dodawanie języka TypeScript do istniejącej aplikacji ASP.NET Core). W przypadku obsługi testów jednostkowych zalecamy rozpoczęcie od standardowego szablonu projektu ASP.NET Core.

2. W Eksploratorze rozwiązań (okienko po prawej stronie) kliknij prawym przyciskiem myszy węzeł projektu ASP.NET Core i wybierz pozycję Zarządzaj pakietami NuGet dla rozwiązań.

3. Na karcie Przeglądaj wyszukaj następujące pakiety i zainstaluj je:

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

   Użyj pakietu NuGet, aby dodać obsługę języka TypeScript zamiast pakietu npm TypeScript.

4. W Eksploratorze rozwiązań kliknij prawym przyciskiem myszy węzeł projektu i wybierz pozycję Edytuj plik projektu.

   Plik .csproj zostanie otwarty w programie Visual Studio.

5. Dodaj następujące elementy do pliku .csproj w elemecie PropertyGroup.

   W tym przykładzie określono Jest lub Mocha jako platformę testową. Zamiast tego można określić taśmę lub Jasmine.

   Jest

   Element JavaScriptTestRoot określa, że twoje testy jednostkowe będą znajdować się w folderze testów w katalogu głównym projektu.

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

   Mocha

   Element JavaScriptTestRoot określa lokalizację testów jednostkowych. Aby uprościć konfigurację dla Mocha, w tym przykładzie wskażemy katalog testowy do folderu wyjściowego *wwwroot\js\tests*.

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

6. W Eksploratorze rozwiązań kliknij prawym przyciskiem myszy węzeł projektu ASP.NET Core i wybierz pozycję Dodaj > nowy element. Wybierz plik konfiguracji JSON języka TypeScript, a następnie kliknij Dodaj.

   Jeśli nie widzisz wszystkich szablonów elementów, wybierz pozycję Pokaż wszystkie szablony, a następnie wybierz szablon elementu.

   Program Visual Studio dodaje plik tsconfig.json do katalogu głównego projektu. Ten plik służy do konfigurowania opcji dla kompilatora TypeScript.

7. Otwórz tsconfig.json i zastąp domyślny kod następującym kodem:

   Jest

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

   Dla Jest, jeśli chcesz skompilować testy TypeScript do JavaScript, usuń folder testów z sekcji wykluczeń .

   Skrypty folder to miejsce, w którym można umieścić kod TypeScript dla aplikacji. Przykładowy projekt, który dodaje kod, zobacz Add TypeScript to an existing ASP.NET Core app(Dodawanie języka TypeScript do istniejącej aplikacji 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"
     ]
   }
   

   Skrypty folder to miejsce, w którym można umieścić kod TypeScript dla aplikacji. Przykładowy projekt, który dodaje kod, zobacz Add TypeScript to an existing ASP.NET Core app(Dodawanie języka TypeScript do istniejącej aplikacji ASP.NET Core).

8. Kliknij prawym przyciskiem myszy projekt w Eksploratorze rozwiązań i wybierz pozycję Dodaj>nowy element (lub naciśnij Ctrl + SHIFT + A). Użyj pola wyszukiwania, aby znaleźć plik npm, wybierz plik konfiguracji npm, użyj nazwy domyślnej, a następnie kliknij przycisk Dodaj.

   Plik package.json jest dodawany do katalogu głównego projektu.

9. W Eksploratorze rozwiązań kliknij prawym przyciskiem myszy węzeł npm w obszarze Zależności i wybierz pozycję Zainstaluj nowe pakiety npm.

   Notatka

   W niektórych scenariuszach Eksplorator rozwiązań może nie wyświetlać węzła npm ze względu na znany problem opisany tutaj. Jeśli chcesz wyświetlić węzeł npm, możesz zwolnić projekt (kliknij projekt prawym przyciskiem myszy i wybierz polecenie Zwolnij projekt), a następnie ponownie załaduj projekt, aby ponownie wyświetlić węzeł npm. Alternatywnie możesz dodać wpisy pakietu do package.json i zainstalować, tworząc projekt.

   Użyj okna dialogowego instalacji pakietu npm, aby zainstalować następujące pakiety npm:

   Jest

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

   Te pakiety są dodawane do pliku package.json w obszarze devDependencies.

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

   Mocha

   • Mocha
   • twierdzić
   • @types/mocha
   • @types/node

   Te pakiety są dodawane do pliku package.json w obszarze devDependencies.

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

10. W package.jsondodaj sekcję test na końcu sekcji scripts:

    Jest

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

    Mocha

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

11. W Eksploratorze rozwiązań, klikając prawym przyciskiem na folder testowy , wybierz Dodaj>nowy element, dodaj następnie nowy plik o nazwie App.test.tsx.

    To dodaje nowy plik do folderu test.

12. Dodaj następujący kod do 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. Otwórz Eksploratora testów (wybierz pozycję Test>Eksplorator testów systemu Windows>) i program Visual Studio odnajduje i wyświetla testy. Jeśli testy nie są wyświetlane początkowo, ponownie skompiluj projekt, aby odświeżyć listę. Na poniższej ilustracji przedstawiono przykład Jest z dwoma różnymi plikami testów jednostkowych.

    

    Notatka

    W przypadku języka TypeScript nie używaj opcji outfile w tsconfig.json, ponieważ Eksplorator testów nie będzie mógł odnaleźć testów jednostkowych. Możesz użyć opcji outdir, ale upewnij się, że pliki konfiguracji, takie jak package.json i tsconfig.json, znajdują się w katalogu głównym projektu.

Uruchamianie testów (ASP.NET Core)

Testy można uruchomić, klikając link Uruchom wszystkie w Eksploratorze testów. Możesz też uruchamiać testy, wybierając co najmniej jeden test lub kilka grup, klikając prawym przyciskiem myszy i wybierając Uruchom z menu skrótów. Testy są uruchamiane w tle, a Eksplorator testów automatycznie aktualizuje i wyświetla wyniki. Ponadto możesz również debugować wybrane testy, klikając prawym przyciskiem myszy i wybierając pozycję Debuguj.

Na poniższej ilustracji przedstawiono przykład Jest z dodanym drugim testem jednostkowym.

W przypadku niektórych struktur testów jednostkowych testy jednostkowe są zwykle uruchamiane względem wygenerowanego kodu JavaScript.

Notatka

W większości przypadków użycia TypeScript można debugować test jednostkowy, ustawiając punkt przerwania w kodzie TypeScript, klikając prawym przyciskiem myszy test w Eksploratorze testów i wybierając Debug. W bardziej złożonych scenariuszach, takich jak niektóre scenariusze korzystające z map źródłowych, może wystąpić trudności z trafieniem punktów przerwania w kodzie TypeScript. Aby obejść ten problem, spróbuj użyć słowa kluczowego debugger.

Notatka

Testy profilowania i pokrycie kodu nie są obecnie obsługiwane.