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)

Pisanie testów jednostkowych 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. Jest to wbudowana platforma testowa dla projektów React i Vue, 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 nie masz jeszcze otwartego Eksploratora testów, możesz go znaleźć, wybierając pozycję Eksplorator testów>na pasku menu.

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

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

• Testowanie platformy React za pomocą platformy Jest
• Testowanie angular
• Testowanie pliku Vue.js

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

Dodawanie testu jednostkowego (esproj)

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

1. W Eksplorator rozwiązań kliknij prawym przyciskiem myszy projekt React i wybierz polecenie Edytuj plik projektu.

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

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

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

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

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

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

   • jest
   • jest-editor-support

   Te pakiety są dodawane do pliku package.json w ramach zależności.

4. W pliku package.json dodaj sekcję test na końcu scripts sekcji:

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

5. W Eksplorator rozwiązań kliknij prawym przyciskiem myszy folder src i wybierz polecenie 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 pliku App.test.tsx.

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

7. Otwórz Eksploratora testów (wybierz pozycję 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ę.

   

   Uwaga

   W przypadku języka TypeScript nie używaj outfile opcji w pliku tsconfig.json, ponieważ Eksplorator testów nie będzie mógł odnaleźć testów jednostkowych. Możesz użyć outdir tej opcji, 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 wszystko w Eksploratorze testów. Możesz też uruchomić testy, wybierając jeden lub więcej testów lub grup, klikając prawym przyciskiem myszy i wybierając polecenie 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 polecenie 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.

Uwaga

W większości scenariuszy języka 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 polecenie Debuguj. 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 .

Uwaga

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.

   Przykładowy projekt można znaleźć w temacie 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 Eksplorator 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 Eksplorator rozwiązań kliknij prawym przyciskiem myszy węzeł projektu i wybierz polecenie 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 testy jednostkowe będą znajdować się w folderze testów głównego 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ę platformy Mocha, w tym przykładzie wskażemy katalog główny testu do folderu wyjściowego *wwwroot\js\tests*.

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

6. W Eksplorator rozwiązań kliknij prawym przyciskiem myszy węzeł projektu ASP.NET Core i wybierz polecenie Dodaj > nowy element. Wybierz plik konfiguracji JSON języka TypeScript, a następnie wybierz pozycję 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 kompilatora TypeScript.

7. Otwórz plik 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"
     ]
   }
   

   Jeśli chcesz skompilować testy języka TypeScript do języka JavaScript, usuń folder testów z sekcji wykluczania .

   Folder scripts to miejsce, w którym można umieścić kod TypeScript dla aplikacji. Przykładowy projekt, który dodaje kod, zobacz 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"
     ]
   }
   

   Folder scripts to miejsce, w którym można umieścić kod TypeScript dla aplikacji. Przykładowy projekt, który dodaje kod, zobacz Dodawanie języka TypeScript do istniejącej aplikacji ASP.NET Core.

8. Kliknij prawym przyciskiem myszy projekt w Eksplorator rozwiązań i wybierz polecenie Dodaj>nowy element (lub naciśnij klawisze 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 Eksplorator rozwiązań kliknij prawym przyciskiem myszy węzeł npm w obszarze Zależności i wybierz polecenie Zainstaluj nowe pakiety npm.

   Uwaga

   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 pliku package.json i zainstalować go, 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
   • Assert
   • @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 pliku package.json dodaj sekcję test na końcu scripts sekcji:

    Jest

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

    Mocha

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

11. W Eksplorator rozwiązań kliknij prawym przyciskiem myszy folder testowy i wybierz polecenie Dodaj>nowy element, a następnie dodaj nowy plik o nazwie App.test.tsx.

    Spowoduje to dodanie nowego pliku w folderze testowym.

12. Dodaj następujący kod do pliku 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.

    

    Uwaga

    W przypadku języka TypeScript nie używaj outfile opcji w pliku tsconfig.json, ponieważ Eksplorator testów nie będzie mógł odnaleźć testów jednostkowych. Możesz użyć outdir tej opcji, 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 wszystko w Eksploratorze testów. Możesz też uruchomić testy, wybierając jeden lub więcej testów lub grup, klikając prawym przyciskiem myszy i wybierając polecenie 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 polecenie 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.

Uwaga

W większości scenariuszy języka 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 polecenie Debuguj. 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 .

Uwaga

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