jest configuration debugging jest based tests
Dowiedz się o Jest Config, debugowaniu i porównaniu Jest z innymi frameworkami do testowania JavaScript, w szczególności Jest vs Mocha i Jest vs Jasmine:
W tym Informative Jest Series , wszystko zbadaliśmy Testowanie aplikacji React, mocków i szpiegów przy użyciu Jest w naszym ostatnim samouczku.
W tym samouczku dowiemy się więcej o plikach Jest Config i zobaczymy, jak faktycznie można debugować testy Jest w celu rozwiązywania problemów z jednym lub wieloma testami wielokrotnymi.
Zbadamy również niektóre z często używanych opcji w pliku Jest Config, które można skonfigurować niezależnie w projekcie lub te, które można dodać jako część samej konfiguracji package.json.
Będziemy używać Visual Studio Code do pisania naszych testów Jest i będziemy używać rozszerzenia lub wtyczki w VS Code, aby włączyć obsługę debugowania testów Jest.
Ponadto porównamy różne platformy testowe Javascript, takie jak Mocha i Jasmine, z Jest i zrozumiemy ich zalety i wady.
Czego się nauczysz:
Jest Config
Konfigurację IST można określić na 3 sposoby
- Za pomocą klucza w pliku package.json.
- Poprzez plik jest.config.js - plik konfiguracyjny zapisany jako moduł.
- Za pomocą formatu JSON, którego można użyć z opcją as –config.
Przy wszystkich powyższych podejściach możesz osiągnąć ten sam wynik. Zobaczmy pierwszy krok - tj. Dodanie konfiguracji Jest za pomocą klucza w pliku package.json.
W istniejącym pliku package.json dodaj nowy klucz o nazwie „jest”. To nic innego jak zestaw par klucz-wartość w formacie JSON. Wszystkie opcje konfiguracyjne związane z Jest można dalej dodać do tej sekcji w pliku package.json.
Poniżej wymieniono najczęściej używane opcje konfiguracji.
1) Powiązane z zasięgiem
zbierać Pokrycie, pokrycie Próg, pokrycie Raporty, pokrycieKatalog - To są najczęściej używane opcje. Pokrycie jest ważną miarą i zapewnia, że kod jest testowany pod kątem wstępnie ustawionego progu.
Szczegółowe wyjaśnienie każdego z nich jest następujące:
# 1) Zbierz Ta opcja służy do określenia, czy chcemy, aby runner testowy Jest zbierał informacje o pokryciu, czy nie. Po ustawieniu na true runner Jest zbiera informacje o pokryciu. Dzięki tej opcji pokrycie zostanie zebrane i wyświetlone na konsoli pod koniec wykonywania testu, jak pokazano poniżej.
# 2) Pokrycie Próg: To ustawienie pozwala nam określić wartości progowe pokrycia w procentach. Jest to bardzo pomocne, gdy organizacja lub zespół chce zachować pewną minimalną wartość pokrycia, bez której żaden kod nie może zostać przeniesiony lub scalony z główną gałęzią.
Zobaczmy, jak można to wykorzystać.
Pokrycie można określić na poziomie globalnym, poziomie pliku lub dowolnym innym wyrażeniu regularnym. W przypadku określenia na poziomie globalnym wszystkie określone progi powinny być zgodne dla wszystkich połączonych plików w projekcie.
'coverageThreshold': { 'global': { 'branches':95, 'functions':100, 'lines':70, 'statements':-2 } } Możliwe jest również określenie pokrycia na poziomie pliku, zmieniając „globalne” na nazwę pliku lub wyrażenie regularne. Konfiguracje progów mogą się różnić w zależności od wymagań.
'coverageThreshold': { './src/calculator.js': { 'branches':100, 'functions':100, 'lines':100, 'statements':-10 } } # 3) zasięgRaporty: Ta konfiguracja służy do określenia, jakiego reportera chcesz użyć do wygenerowania raportu pokrycia. Istnieje wiele istniejących raportów w postaci pakietów NPM, które można wykorzystać do wygenerowania raportu pokrycia na koniec wykonywania testu.
# 4) zasięg Katalog: To ustawienie umożliwia użytkownikowi określenie katalogu, w którym raporty pokrycia powinny być zapisywane lub utrwalane po utworzeniu.
Poniżej przedstawiono połączony przykład użycia wszystkich ustawień konfiguracyjnych związanych z pokryciem.
'jest':{ 'collectCoverage':true, 'coverageThreshold': { 'global': { 'branches':95, 'functions':100, 'lines':70, 'statements':-2 }, './src/calculator.js': { 'branches':100, 'functions':100, 'lines':100, 'statements':-10 } }, 'coverageReporters': [ 'lcov','text' ], 'coverageDirectory': './output/code-coverage/' } Tutaj użyliśmy 2 raportów pokrycia, tj. Lcov i text.Lcov to pokrycie linii Linuksa i jest obecne domyślnie, a raport „tekst” oznacza, że dane wyjściowe pokrycia będą również wyświetlane na konsoli. Raport pokrycia zostanie wygenerowany na ścieżce określonej w ustawieniu „CoverDirectory”.
# 2) Mock Related
Podczas testów z Jest bardzo często używa się makiet. Obie poniższe opcje konfiguracji pozwalają na łatwą konfigurację i czyszczenie makiet.
- autoMocks: W przypadku ustawienia wartości true spowoduje to kpienie wszystkich modułów, które są domyślnie importowane w teście.
- clearMocks: Ustawienie wartości true spowoduje wyczyszczenie wszystkich fałszywych ustawień / modułów po każdym teście, tak aby każdy test zaczynał się od nowego stanu. Można to również osiągnąć za pomocą metody testCleanup lub metody „after”, ale posiadanie jej w konfiguracji czyni to jeszcze łatwiejszym.
# 3) Powiązane testy
# 1) testTimeout: Ta konfiguracja służy do zapewnienia ustawienia twardego limitu czasu dla testów w milisekundach. Każdy test, który przekroczy ten skonfigurowany próg, zostanie oznaczony jako zakończony niepowodzeniem z powodu przekroczenia limitu czasu.
'jest' { 'testTimeout': 100 } # 2) Globalnie: Ta konfiguracja służy do ustawiania zmiennych globalnych, które powinny być dostępne w każdym teście.
'jest' { 'globals': { 'globalVar': 'test global variable!' } } Spróbujmy użyć w teście zmiennej globalnej i zobaczmy, czy działa zgodnie z oczekiwaniami.
describe('Calculator tests', () => { test('add 2 numbers', () => { // arrange & act const val = mathOps.sum(3,4) console.log(globalVar) // assert expect(val).toBe(7) }) Po wykonaniu tego testu należy zarejestrować wartość globalVar.
Czek tutaj aby zobaczyć wyczerpującą listę wszystkich opcji konfiguracyjnych.
Video Tutorial On JEST Configuration
Debugging Using Jest
W tej sekcji postaramy się zrozumieć, w jaki sposób możemy debugować testy napisane w oparciu o Jest.
Zastosujemy i zrozumiemy 2 różne sposoby debugowania testów Jest.
- Natywny debugger Node, a następnie użyj Chrome Inspector do debugowania testów.
- Używanie konfiguracji debugowania programu Visual Studio Code do debugowania testów w samym edytorze Visual Studio Code. Jest to najczęściej używany sposób debugowania, ponieważ Visual Studio Code jest obecnie domyślnym edytorem dla większości prac rozwojowych w języku JavaScript.
Każde z tych podejść zostało szczegółowo wyjaśnione poniżej.
# 1) Korzystanie z natywnego debugera Node
Aby korzystać z natywnego debuggera Node JS, musimy wstawić słowo kluczowe „debugger” w teście, w którym chcemy umieścić punkt przerwania.
Gdy wykonawca testu napotka plik debugger polecenie, wstrzymuje wykonywanie, a jeśli dołączymy narzędzia chrome debugger, możemy debugować kod testowy (a także testowaną funkcję) za pomocą narzędzi Chrome.
Przeglądarka Chrome jest tutaj warunkiem wstępnym do korzystania z natywnego debugera Node.
Wykonaj poniższe kroki.
# 1) Dodaj słowo kluczowe debugger w teście, tj. W punkcie, w którym chcesz, aby test osiągnął punkt przerwania, wstaw polecenie „debugger”
#dwa) Wykonaj test, używając flagi –inspect-brk.
Użyj poniższego polecenia, aby wykonać test w trybie punktu przerwania.
/usr/local/bin/node --inspect-brk ./node_modules/jest/bin/jest.js --runInBand# 3) Dołącz debugger węzła w Chrome. Teraz w przeglądarce Chrome przejdź do chrome: // inspect i połącz się z odbiornikiem docelowym utworzonym w powyższym kroku.
# 4) Kontynuuj wykonywanie, a zobaczysz, że punkt przerwania trafia w inspektorze debugera chrome i możesz debugować stos wywołań i stan obiektu w samym debugerze chrome.
Takie podejście do debugowania testów Jest jest w porządku, ale niezbyt przyjazne dla użytkownika, ponieważ musisz ciągle przełączać się z edytora kodu na Chrome i odwrotnie, co powoduje wiele tarcia. W następnej sekcji zobaczymy sposoby konfigurowania debugera w samym edytorze Visual Studio Code.
# 2) Korzystanie z konfiguracji debugowania VS Code
# 1) Wybierz sekcję Debug / Run w Visual Studio Code z lewego panelu.
#dwa) Teraz zaktualizujemy konfigurację debugowania dla testów jest. W tym celu dodaj nową konfigurację, wybierając opcję menu.
# 3) Po wybraniu opcji dodawania konfiguracji otworzy się plik `launch.json` z domyślną zawartością w panelu edytora. Usuń zawartość domyślną i skopiuj poniższą zawartość, aby utworzyć konfigurację debugowania dla testów Jest.
{ 'version': '0.2.0', 'configurations': [ { 'name': 'Debug Jest Tests', 'type': 'node', 'request': 'launch', 'runtimeArgs': [ '--inspect-brk', '${workspaceRoot}/node_modules/jest/bin/jest.js', '--runInBand' ], 'console': 'integratedTerminal', 'internalConsoleOptions': 'neverOpen', 'port': 9229 } ] } # 4) Zapisz nowo dodaną konfigurację zawartości, która będzie używana do debugowania testów Jest. Jeśli dokładnie przeczytasz konfigurację, jest ona podobna do tego, co zrobiliśmy, gdy próbowaliśmy połączyć się z debugerem węzła w narzędziach Chrome dla programistów za pomocą polecenia.
--inspect-brk ./node_modules/jest/bin/jest.js --runInBandZaletą posiadania konfiguracji jest to, że testy będą uruchamiane / debugowane jako część samego Edytora (w tym przypadku jest to VSCode) i nie musimy łączyć się z żadną zewnętrzną aplikacją.
# 5) Po utworzeniu konfiguracji debugowania można teraz dodawać punkty przerwania do testów i wykonywać je przy użyciu tej konfiguracji RUN. Zapewni to, że test zatrzyma się w punktach przerwania i będzie można debugować wartości, stan obiektu w punkcie przerwania w rzeczywistym pliku testowym.
Punkty przerwania można dodawać, klikając w pobliżu numerów wierszy w plikach kodu.
# 6) Po dodaniu punktu przerwania możemy wybrać konfigurację Uruchom, którą dodaliśmy w kroku # 3, aby wykonać / debugować test.
# 7) Po wybraniu / kliknięciu przycisku Uruchom, powinieneś być w stanie zobaczyć, że wykonanie trafia w umieszczony punkt przerwania i możesz uzyskać więcej szczegółów, takich jak wartości środowiska / zmiennych, ślad stosu itp. W punkcie przerwania.
Przyciski sterujące punktem przerwania / przepływem kodu mogą służyć do przechodzenia do następnego punktu przerwania lub poruszania się po funkcji, aby uzyskać więcej szczegółów.
Video Tutorial On JESTDebugowanie
Jest Vs Mocha Vs Jasmine
W poniższej sekcji porównamy Jest vs Mocha i Jest vs Jasmine pod kątem różnych parametrów i porównań funkcji, takich jak testowanie migawek, łatwość konfiguracji i możliwości różnych platform.
| Parametr | Jest | Mokka | Jaśmin |
|---|---|---|---|
| Obsługiwane typy testowania | Używany głównie do testów jednostkowych. | Testów jednostkowych | Testy jednostkowe i testy E2E. |
| Testowanie migawkowe | W pełni obsługiwane - specjalnie używane dla komponentów React, Jest obsługuje robienie migawek komponentu i używanie go do porównywania wyników testu z zapisaną strukturą komponentu. Migawki to świetny sposób, aby upewnić się, że interfejs użytkownika nie zmieni się nieoczekiwanie. | Bez wsparcia | Bez wsparcia |
| Asercje i dopasowania | Skorzystaj z biblioteki think.js dla dopasowań. | Obsługa wbudowanego modułu assert Node, a także może obejmować inne biblioteki potwierdzeń. | W zbudowanych asercjach |
| Kpiny | W pełni wbudowane wsparcie dla Mocków i Stubów w Jest. | Brak wbudowanej obsługi kpiny lub korkowania. Może być używany z innymi bibliotekami, takimi jak Sinon, do obsługi Mocking. | Wbudowane ograniczone wsparcie przy użyciu spyOn. Może integrować się z innymi bibliotekami. |
| Szybkość wykonania | 4x Testy są izolowane we własnej piaskownicy. Dlatego testy Jest zasadniczo przebiegają równolegle, dzięki czemu zapewniają znaczną poprawę czasu wykonywania. | x Nie obsługuje równoległego wykonywania testów. | x Nie obsługuje równoległego wykonywania testów. |
| Konfiguracja i instalacja | Bardzo proste - wymagana konfiguracja zerowa. | ||
| Tryb wykonywania testów | Bezgłowy | Bezgłowy | Bezgłowy |
| Testuj dane wyjściowe i kontekst | Generuje bogaty kontekst po wykonaniu - Jest dostarcza szczegółowego kontekstu testu, aby zagłębić się w to, co spowodowało błąd, zapewniając tym samym łatwe debugowanie. | Wyjście testowe nie jest zbyt czytelne i utrudnia debugowanie. | |
| Debugowanie | Obsługa natywnych debugerów węzłów może być również używana do debugowania w edytorach, takich jak Visual Studio Code, za pośrednictwem oddzielnej konfiguracji uruchamiania. | Obsługuje natywny debugger Node. | Może używać narzędzia do uruchamiania testów karmy do uruchamiania testów w przeglądarce Chrome i debugowania. |
| Pokrycie kodu | Jest ma wbudowaną obsługę pokrycia kodu. Konfigurację pokrycia można określić w konfiguracji Jest, a raporty mogą być generowane przy każdym wykonaniu testu. | Brak wbudowanego wsparcia. Zapewnia obsługę bibliotek zewnętrznych do generowania raportów pokrycia. | Tak samo jak Mocha |
| Styl testowania | BDD Wszystkie trzy frameworki obsługują testy, które mają być napisane jako zestaw specyfikacji lub specyfikacji, dzięki czemu są bardziej czytelne. | BDD | BDD |
Wniosek
W tym samouczku poznaliśmy różne sposoby debugowania testów Jest w programie Visual Studio Code lub w Chrome Inspector przy użyciu natywnego debugera węzła.
Zbadaliśmy również często używane opcje konfiguracji w pliku konfiguracyjnym Jest. Konfiguracja właśnie pomaga osiągnąć wiele rzeczy, takich jak pokrycie kodu, raporty HTML, konfigurowanie zachowań pozorowanych, konfigurowanie zmiennych globalnych itp.
POPRZEDNIA samouczek | PIERWSZY samouczek
jak otwierać pliki torrent na komputerze Mac
rekomendowane lektury
- Jest Tutorial - JavaScript Unit Testing Using Jest Framework
- Jak testować aplikacje React przy użyciu Jest Framework
- Jasmine Framework Tutorial, w tym Jasmine Jquery z przykładami
- Rozproszone kompilacje: konfiguracja nadrzędnego urządzenia podrzędnego Jenkins
- Techniki debugowania w selenium: punkty przerwania, tryb debugowania i inne
- Samouczek testowania konfiguracji z przykładami
- Jak skonfigurować środowisko testowe Node.js: samouczek Node.js.
- 25 najlepszych struktur testowania Java i narzędzi do testowania automatycznego (część 3)