Menu

Jest Tutorial – JavaScript Unit Testing Using Jest Framework

  • Główny
  • Inny
  • Jest Tutorial – JavaScript Unit Testing Using Jest Framework

jest tutorial javascript unit testing using jest framework

Wypróbuj Nasz Instrument Do Eliminowania Problemów

W tym samouczku Jest dowiemy się o różnych funkcjach Jest, Jest Matchers i jak używać struktury Jest do testów jednostkowych JavaScript:

Jest to framework do testowania JavaScript zbudowany przez Facebooka.

Jest przeznaczony głównie dla aplikacji opartych na React (który jest również tworzony przez Facebooka), ale może być używany do pisania scenariuszy automatyzacji dla dowolnych baz kodu opartych na Javascript.

W tym samouczku testowania Jest dowiemy się o różnych funkcjach Jest, jego dopasowujących się elementach i zobaczymy, jak możemy używać Jest z końcowym przykładem. Zbadamy również pokrycie kodu za pomocą Jest.

Jest Tutorial

Lista samouczków w tej serii JEST

Samouczek nr 1: Jest Tutorial – JavaScript Unit testing With Jest Framework
Samouczek nr 2: Jak testować aplikacje React przy użyciu Jest Framework
Samouczek nr 3: Jest Configuration And Debugging Jest Based Tests

Czego się nauczysz:

Pierwsze kroki z Jest Testing

Poniżej przedstawiono niektóre zalety / cechy Jest to:

  1. Wymagana zerowa konfiguracja.
  2. Szybki: Tylko testy są wykonywane równolegle - to z kolei znacznie skraca czas ich wykonania.
  3. Pokrycie wbudowanego kodu: Jest obsługuje pokrycie kodu od razu po wyjęciu z pudełka - jest to bardzo przydatna miara dla wszystkich potoków dostarczania opartych na CI i ogólnej efektywności testów projektu.
  4. Testy izolowane i piaskownicy: Każdy test Jest działa we własnej piaskownicy, co gwarantuje, że żadne dwa testy nie będą sobie wzajemnie przeszkadzać ani wpływać.
  5. Potężne wsparcie dla mockowania: Testy obsługują wszystkie rodzaje mockowania - czy to mockowanie funkcjonalne, mockowanie timera, czy mockowanie poszczególnych wywołań API.
  6. Obsługa testów migawek: Testowanie migawkowe jest istotne z punktu widzenia Reacta. Jest obsługuje przechwytywanie migawki testowanego komponentu reagującego - może to sprawdzić się z rzeczywistym wyjściem komponentu. To bardzo pomaga w sprawdzaniu zachowania komponentu.

Jest Framework dla testów jednostkowych JavaScript

W tej sekcji zobaczymy końcowy przykład pisania testów przy użyciu frameworka JEST dla prostej funkcji JavaScript. Po pierwsze, zobaczmy, jak zainstalować framework JEST w naszym projekcie

JEST Installation

Jest to po prostu pakiet węzłów i można go zainstalować za pomocą dowolnego menedżera pakietów opartego na węzłach. Przykład, npm lub przędza.

Zobaczmy kilka przykładowych poleceń, których można użyć do zainstalowania pakietu Jest.

yarn add --dev jest npm install --save-dev jest

Aby zainstalować moduł Jest globalnie, możesz po prostu użyć flagi „-g” wraz z poleceniem npm. Umożliwi to bezpośrednie użycie poleceń Jest bez konfigurowania pliku pakietu do testów npm.

npm install -g jest

Używanie Jest w projekcie opartym na węzłach

Aby użyć Jest w projekcie opartym na węzłach, po prostu użyj poleceń z powyższej sekcji, aby zainstalować pakiet węzłów dla Jest.

Wykonaj poniższe kroki, aby utworzyć projekt węzła od początku, a następnie zainstaluj w nim Jest.

# 1) Utwórz folder / katalog z nazwą jako nazwą projektu, na przykład , myFirstNodeProject

#dwa) Teraz za pomocą terminala lub wiersza poleceń przejdź do projektu utworzonego w powyższym kroku i wykonaj skrypt inicjujący npm za pomocą poniższego polecenia.

npm init

# 3) Po wykonaniu powyższego polecenia wyświetli się monit o inne pytania / parametry.

Na przykład , nazwa projektu, wersja itp. Po prostu naciskaj klawisz Enter (i zaakceptuj wartości domyślne). Po zakończeniu zobaczysz plik package.json utworzony w Twoim projekcie. To jest obowiązkowy plik konfiguracyjny dla każdego projektu opartego na węźle

# 4) Teraz wykonaj polecenie, aby zainstalować pakiet Jest w nowo utworzonym projekcie, używając poniższego polecenia.

npm install --save-dev jest

Spowoduje to zainstalowanie modułu Jest (a także jego zależności).

# 5) Teraz mamy gotowy projekt węzła z powiązaniami Jest. Skonfigurujmy skrypt testowy npm do uruchamiania testów Jest, tj. Po wykonaniu polecenia „npm test” skrypt powinien uruchomić wszystkie testy oparte na strukturze Jest.

Aby to zrobić, zaktualizuj plik package.json i dodaj sekcję skryptu, jak pokazano poniżej.

'scripts': { 'test': 'jest' }

Ostateczny plik package.json będzie wyglądał tak, jak pokazano poniżej.

{ 'name': 'jest-e2e', 'version': '1.0.0', 'description': '', 'main': 'index.js', 'scripts': { 'test': 'jest' }, 'author': '', 'license': 'ISC', 'dependencies': { 'jest': '^25.1.0' } }

Pisanie testów funkcji JavaScript

W tej sekcji utworzymy prosty kod funkcji JavaScript do dodawania, odejmowania i mnożenia 2 liczb i napiszemy dla niego odpowiednie testy oparte na Jest.

Najpierw zobaczmy, jak wygląda kod naszej testowanej aplikacji (lub funkcji).

# 1) W projekcie węzła utworzonym w powyższej sekcji utwórz plik js o nazwie calculator.js z zawartością, jak pokazano poniżej

const mathOperations = { sum: function(a,b) { return a + b; }, diff: function(a,b) { return a - b; }, product: function(a,b) { return a * b } } module.exports = mathOperations

#dwa) Teraz utwórz plik testowy w tym samym folderze dla tych testów o nazwie calculator.test.js - jest to konwencja oczekiwana przez framework Jest do wyszukiwania wszystkich plików zawierających testy oparte na Jest. Zaimportujemy również testowaną funkcję, aby wykonać kod w teście.

Tak wyglądałby plik z samą deklaracją importu / wymagania.

const mathOperations = require('./calculator');

# 3) Teraz napiszmy testy dla różnych metod w pliku głównym, tj. Suma, różnica i iloczyn.

Testy są zgodne z testami w stylu BDD, przy czym każdy zestaw testów ma jeden główny blok opisu i może mieć wiele bloków testowych. Należy również pamiętać, że testy mogą mieć również zagnieżdżone bloki opisu.

Napiszmy test dodawania 2 liczb i sprawdźmy oczekiwane wyniki. Podamy liczby jako 1 i 2 i oczekujemy, że wynik to 3.

describe('Calculator tests', () => { test('adding 1 + 2 should return 3', () => { expect(mathOperations.sum(1, 2)).toBe(3); }); })

Proszę odnieść się do poniższych punktów w.r.t powyższego testu:

do) Blok opisujący jest zewnętrznym opisem zestawu testów, tj. Reprezentuje ogólny kontener dla wszystkich testów, które będziemy pisać dla kalkulatora w tym pliku.

b) Następnie mamy indywidualny blok testowy - reprezentuje on pojedynczy test. Ciąg w cudzysłowie reprezentuje nazwę testu.

do) Odwołaj się do kodu w bloku oczekiwania - „oczekiwanie” to nic innego jak stwierdzenie. Instrukcja wywołuje metodę sum w testowanej funkcji z danymi wejściowymi 1 i 2 i oczekuje, że wynikiem będzie 3.

Możemy również przepisać to w prostszy sposób, aby lepiej to zrozumieć.

Zobacz poniżej, teraz oddzieliliśmy wywołanie funkcji i potwierdzenie jako 2 oddzielne instrukcje, aby było bardziej zwięzłe.

describe('Calculator tests', () => { test('adding 1 + 2 should return 3', () => { // arrange and act var result = mathOperations.sum(1,2) // assert expect(result).toBe(3); }); })

re) Aby uruchomić ten test, po prostu uruchom polecenie „ npm test ”W terminalu lub wierszu poleceń w lokalizacji projektu.

Zobaczysz dane wyjściowe, jak pokazano poniżej.

Uruchom komendę „npm test” w terminalu - Wyjście

# 4) Spróbujmy więcej testów.

do) Najpierw napisz test zakończony niepowodzeniem i zobacz, jakie dane wyjściowe otrzymamy. Po prostu zmieńmy wynik na jakąś niepoprawną wartość w tym samym teście, który napisaliśmy w poprzedniej sekcji. Zobacz, jak wygląda test.

describe('Calculator tests', () => { test('adding 1 + 2 should return 10', () => { // arrange and act var result = mathOperations.sum(1,2) // assert expect(result).toBe(10); }); })

Oczekujemy, że suma 1 i 2 zwróci 10, co jest niepoprawne.

Spróbujmy to wykonać i zobaczmy, co otrzymamy.

szczegółowe dane wyjściowe w przypadku niepowodzenia testu

Możesz zobaczyć szczegółowe dane wyjściowe, gdy test się nie powiódł, tj. Co faktycznie zostało zwrócone i czego się spodziewano oraz która linia spowodowała błąd w testowanej funkcji itp.

b) Napiszmy więcej testów dla innych funkcji, tj. Różnicy i iloczynu.

Plik testowy ze wszystkimi testami będzie wyglądał tak, jak pokazano poniżej.

const mathOperations = require('./calculator'); describe('Calculator tests', () => { test('adding 1 + 2 should return 3', () => { // arrange and act var result = mathOperations.sum(1,2) // assert expect(result).toBe(3); }); test('subtracting 2 from 10 should return 8', () => { // arrange and act var result = mathOperations.diff(10,2) // assert expect(result).toBe(8); }); test('multiplying 2 and 8 should return 16', () => { // arrange and act var result = mathOperations.product(2,8) // assert expect(result).toBe(16); }); })

Po wykonaniu powyższych testów dane wyjściowe podane poniżej zostaną wygenerowane.

Testuje dane wyjściowe dla funkcji - różnica i iloczyn

Samouczek wideo: Co to jest

Jest Matchers

Tylko asercje używają dopasowań do stwierdzenia warunku. Jest używa dopasowań z oczekiwanego interfejsu API. Można odwołać się do oczekiwanego dokumentu API tutaj.

Przejdźmy przez niektóre z najczęściej używanych dopasowań wraz z testami Jest.

1) Równość

Są to najczęściej używane dopasowania. Są używane do sprawdzania równości lub nierówności i są najczęściej używane do operacji arytmetycznych.

Zobaczmy kilka przykładów poniżej:

testowanie aplikacji mobilnych pytania i odpowiedzi na rozmowę kwalifikacyjną

Tutaj napisaliśmy 2 dopasowania przy użyciu toBe i not.toBe, które są analogiczne do równych i nie równych.

test('equality matchers', () => { expect(2*2).toBe(4); expect(4-2).not.toBe(1); })

# 2) Prawda

Tutaj zobaczymy, dopasowujące wartości null, falsy i true, tj. Wartości fałszywe i prawdziwe. Należy zauważyć, że wszystko, co nie jest logicznie prawdziwe, jest fałszem.

Na przykład, liczba 0, null, pusty ciąg, NaN to przykłady fałszywego JavaScript w.r.t.

test('truthy operators', () => { var name='Software testing help' var n = null expect(n).toBeNull() expect(name).not.toBeNull // name has a valid value expect(name).toBeTruthy() //fail - as null is non success expect(n).toBeTruthy() // pass - null treated as false or negative expect(n).toBeFalsy() // 0 - treated as false expect(0).toBeFalsy() })

# 3) Dopasowywanie liczb

Te dopasowania mogą być używane do ogólnych operacji arytmetycznych.

Na przykład, GreaterThan, lessThan, GreaterThanOrEqual itp.

Sprawdź poniższe przykłady, aby uzyskać więcej informacji

test('numeric operators', () => { var num1 = 100; var num2 = -20; var num3 = 0; // greater than expect(num1).toBeGreaterThan(10) // less than or equal expect(num2).toBeLessThanOrEqual(0) // greater than or equal expect(num3).toBeGreaterThanOrEqual(0) })

# 4) Dopasowywanie ciągów

Często potrzebujemy ciągów znaków, aby dopasować wyrażenie regularne jako potwierdzenie w teście jednostkowym. Jest zapewnia dopasowywanie łańcuchów do dopasowania do wyrażenia regularnego.

test('string matchers',() => { var string1 = 'software testing help - a great resource for testers' // test for success match expect(string1).toMatch(/test/); // test for failure match expect(string1).not.toMatch(/abc/) })

Video Tutorial: Jest Matchers

Jest Hooks - konfiguracja i rozebranie

Podobnie jak wszystkie inne frameworki testów jednostkowych oparte na xUnit, struktura Jest również zapewnia punkty zaczepienia dla metod konfiguracji i czyszczenia. Te metody przechwytujące są wykonywane przed i po każdym teście w zestawie testów lub przed i po wykonaniu testu testSuite.

W sumie dostępne są 4 haczyki.

  • beforeEach i afterEach: Te punkty zaczepienia są wykonywane przed i po każdym teście w zestawie testów.
  • beforeAll i afterAll: Te punkty zaczepienia są wykonywane tylko raz dla każdego zestawu testów. tj. jeśli zestaw testów ma 10 testów, wtedy te punkty zaczepienia będą wykonywane tylko raz dla każdego wykonania testu.

Zobaczmy przykład: Dodamy te haki do tego samego przykładu testowego dodawania 2 liczb.

Dla ilustracji ustawimy wejścia beforeEach. Plik testowy wyglądałby z zaczepami testowymi, jak pokazano poniżej.

describe('Calculator tests', () => { var input1 = 0 var input2 = 0 beforeAll(() => { console.log('beforeAll called'); }); afterAll(() => { console.log('afterAll called'); }); beforeEach(() => { console.log('beforeEach called'); input1 = 1; input2 = 2; }); afterEach(() => { console.log('afterEach called'); }); test('adding 1 + 2 should return 3', () => { // arrange and act var result = mathOperations.sum(input1,input2) // assert expect(result).toBe(3); }); })

Porady & Triki

# 1) Raporty wiersza poleceń są dobre, ale niezbyt czytelne. Dostępne są biblioteki / moduły do ​​generowania raportów z testów w formacie HTML dla testów Jest. Można to osiągnąć, jak pokazano poniżej.

  • Dodaj pakiet węzłów dla jest-html-reporter za pomocą poniższego polecenia.
npm install --save-dev jest-html-reporter
  • Teraz dodaj konfigurację Jest dla reportera w pliku package.json projektu węzła.
'jest': { 'reporters': ( 'default', ( './node_modules/jest-html-reporter', { 'pageTitle': 'Test Report' } ) ) }
  • Po skonfigurowaniu teraz wykonaj testy przy użyciu opcji „ npm test ' Komenda.
  • Jeśli instalacja się powiedzie, w katalogu projektu powinien być widoczny raport oparty na języku HTML.

Sprawozdanie z badań

# 2) Tworzenie raportu pokrycia kodu: Pokrycie kodu jest jedną z najważniejszych metryk z punktu widzenia testów jednostkowych. Zasadniczo mierzy, jaki procent wyciągów / oddziałów obejmuje testowana aplikacja.

Jest po wyjęciu z pudełka wsparcie dla pokrycia kodu. Aby uzyskać raport pokrycia Jest, Jest configuration należy dodać w package.json plik.

Dodaj konfigurację, jak pokazano poniżej:

'jest': { 'collectCoverage':true }

Po zakończeniu konfiguracji spróbuj uruchomić testy za pomocą polecenia “npm test” i możesz zobacz szczegóły pokrycia kodu tuż pod wynikami wykonania testu, jak pokazano poniżej.

szczegóły pokrycia kodu

Samouczek wideo: Jest Pokrycie i generowanie raportów HTML

Wniosek

W tym samouczku Jest omówiliśmy podstawy frameworka Jest. Dowiedzieliśmy się, jak zainstalować framework Jest i zobaczyliśmy, jak można go używać do testowania prostych plików Javascript.

Zbadaliśmy również różne typy dopasowań obsługiwanych przez Jest, a także omówiliśmy reporterzy HTML i raporty pokrycia kodu.

NEXT Tutorial

rekomendowane lektury

^