Udostępnij za pomocą

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:

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:

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

    Ten pakiet jest dodawany do pliku package.json w zależnościach.

    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 początkowo nie są wyświetlane, ponownie skompiluj projekt, aby odświeżyć listę.

    Zrzut ekranu przedstawiający odkrywanie testów w Eksploratorze testów (.esproj).

    Notatka

    W przypadku języka TypeScript nie używaj outfile opcji 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.

    Ważny

    Jeśli dane wyjściowe z Testów w oknie danych wyjściowych pokazują ReadOnlySpan błąd podczas odnajdywania testów, użyj następującego obejścia znanego problemu z MSBuild. W programie Visual Studio 2022 otwórz folder Program Files\Microsoft Visual Studio\2022\<version>\Common7\IDE\Extensions\TestPlatform i zmień nazwę System.Memory.dll na inną nazwę. Ta poprawka błędów umożliwia wykrywanie testów.

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.

zrzut ekranu przedstawiający wyniki Eksploratora testów (esproj).

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 testowe nie są obecnie obsługiwane.

Uruchamianie testów jednostkowych z wiersza polecenia dla projektu opartego na CLI (.esproj)

Testy jednostkowe można uruchamiać bezpośrednio z wiersza polecenia dla struktury testów jednostkowych w taki sam sposób, jak gdyby nie używano programu Visual Studio.

Możesz również uruchomić testy z poziomu wiersza polecenia przy użyciu polecenia vstest.console. Na przykład możesz użyć vstest.console, aby zachować spójność z testami jednostkowymi języka C# lub uruchomić w usłudze Azure DevOps. Użyj następującego polecenia, ale zastąp MyProj nazwą swojego 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"

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:

    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.

    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>

  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:

    {
  "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).

  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-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"

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

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

  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.

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

  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 początkowo nie są wyświetlane, ponownie skompiluj projekt, aby odświeżyć listę. Na poniższej ilustracji przedstawiono przykład Jest z dwoma różnymi plikami testów jednostkowych.

    zrzut ekranu przedstawiający odnajdywanie testów w Eksploratorze testów (ASP.NET Core).

    Notatka

    W przypadku języka TypeScript nie używaj outfile opcji 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.

    Ważny

    Jeśli dane wyjściowe z Testów w oknie danych wyjściowych pokazują ReadOnlySpan błąd podczas odnajdywania testów, użyj następującego obejścia znanego problemu z MSBuild. W programie Visual Studio 2022 otwórz folder Program Files\Microsoft Visual Studio\2022\<version>\Common7\IDE\Extensions\TestPlatform i zmień nazwę System.Memory.dll na inną nazwę. Ta poprawka błędów umożliwia wykrywanie testów.

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.

zrzut ekranu przedstawiający wyniki Eksploratora testów (ASP.NET Core).

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 testowe nie są obecnie obsługiwane.

  • Last updated on