how test react apps using jest framework
W tym samouczku wideo nauczymy się tworzyć i testować aplikację React za pomocą Jest, Mocking za pomocą Jest i funkcji Spying za pomocą polecenia Jest spyOn:
DO Complete Introduction of Jest zostało podane w naszym poprzednim samouczku. W tym samouczku zobaczymy, jak używać Jest do testowania aplikacji opartych na React.
Nauczymy się tworzyć bootstrapowaną aplikację React za pomocą prostego npm oparte na poleceniu i użyj tej samej aplikacji do pisania testów Jest responsywnych. Zbadamy również koncepcję testowania migawek i dowiemy się, jak można wyszydzać i szpiegować komponenty Reacta za pomocą struktury Jest i polecenia Jest spyon.
Czego się nauczysz:
React - Getting Started
Jest to narzędzie przeznaczone do wszechstronnego testowania aplikacji React wraz z obsługą wszystkich innych frameworków JavaScript.
Ponieważ będziemy używać aplikacji React do dodawania frameworka Jest i testów, konieczne jest, a wręcz warunkiem wstępnym, podstawowa znajomość aplikacji React.
Aby rozpocząć korzystanie z podstawowej aplikacji React, wykonaj poniższe czynności:
# 1) Aby stworzyć aplikację w React, możesz po prostu użyć wykonawcy pakietu node (npx, który jest również dostępny z npm) i wykonać poniższe polecenie.
npx create-react-app my-app
#dwa) Po wykonaniu powyższego polecenia otwórz projekt my-app w dowolnym wybranym edytorze - zalecany jest program Visual Studio Code, który jest swobodnie dostępny.
# 3) W oknie terminala / poleceń (w edytorze) uruchom projekt za pomocą poniższego polecenia.
npm start
# 4) Po skompilowaniu projektu otworzy się nowa karta przeglądarki z adresem URL http: // localhost: 3000
# 5) Należy również pamiętać, że wszystkie zależności związane z Jest są instalowane jako część projektu React utworzonego za pomocą wspomnianego powyżej polecenia npx.
# 6) Projekt zawiera również bibliotekę testową React o nazwie jest-dom, która zawiera wiele przydatnych niestandardowych dopasowań elementów DOM dla Jest. (Czek tutaj aby uzyskać więcej informacji na temat koncepcji React)
Jest Snapshot Testing
Testowanie migawek jest bardzo przydatną techniką testowania migawek komponentów React przy użyciu biblioteki Jest.
Najpierw spróbujmy zrozumieć, na czym polega testowanie migawek zasadniczo oznacza.
Migawka to nic innego jak punktowa reprezentacja czegokolwiek. Na przykład, zrzut ekranu, zdjęcie z kamery itp. to migawki przedstawiające szczegóły czegokolwiek w określonym momencie.
Z punktu widzenia Reacta, Snapshot to nic innego jak punkt czasowy reprezentacji lub wyniku komponentu React z dostarczonym stanem i zachowaniem.
Wyjaśnia to prosty przykład, wykonując poniższe czynności.
# 1) Aby rozpocząć testowanie migawek, dodaj pakiet npm „React-test-renderer” za pomocą poniższego polecenia.
npm i react-test-renderer
#dwa) Teraz stwórzmy prosty komponent React, który będzie testowany przez naszą aplikację. Ten komponent będzie miał prosty stan w postaci zmiennych klas i właściwości strony.
Komponent wyglądałby tak, jak pokazano poniżej. Nazwijmy ten komponent jako Link (tak więc nazwa odpowiadającego mu komponentu reagującego będzie miała postać Link.react.js)
import React from 'react'; export default class Link extends React.Component { constructor() { super(); this.state = { class: 'normal', welcomeMessage: 'Hi there!' }; } render() { return ( {this.props.page} {this.state.welcomeMessage} ); } }
W tej chwili tak będzie wyglądać struktura plików w projekcie React.
# 3) Dodajmy test migawki dla tego komponentu.
do) Aby rozpocząć test migawki - pakiet React-test-renderer Node jest warunkiem wstępnym. zainstalować React-node-renderer używając poniższego polecenia.
npm i react-test-renderer
b) Dodaj nowy plik w celu dodania testów dla tego nowego komponentu. Nazwijmy to jako Link.test.js
do) Teraz dodaj test migawki. Tutaj najpierw utworzymy migawkę, renderując komponent React.
Test wyglądałby tak, jak pokazano poniżej.
import React from 'react'; import Link from './Link.react' import renderer from 'react-test-renderer'; it('renders correctly', () => { const tree = renderer .create() .toJSON(); console.log(tree) expect(tree).toMatchSnapshot(); });
Tutaj, w teście, tworzymy reprezentację JSON renderowanego komponentu. Przekazaliśmy wartość właściwości „page” jako „www.softwaretestinghelp.com”
re) Po uruchomieniu testu migawki - tworzony jest plik migawki komponentu (z rozszerzeniem .kłapnięcie ) i zapisywane w katalogu projektu, który jest ponownie używany podczas następnych testów.
W takim przypadku zostanie użyty plik migawki z właściwością strony podaną podczas testu. Zobaczmy, jak plik migawki jest generowany po uruchomieniu testu za pomocą polecenia „npm test”.
jest) Plik migawki zostanie utworzony w katalogu o nazwie „__snapshots__” w katalogu src projektu.
jak napisać wiadomość e-mail do próbki rekrutera
Poniżej podano strukturę projektu.
Katalog „__snapshots__” na powyższym zrzucie ekranu jest tworzony w katalogu głównym projektu, gdy test jest wykonywany po raz pierwszy.
fa) Zobaczmy, jak będzie wyglądał plik migawki.
Otwórz plik - Link.test.js.snap
sol) Powyżej pokazano migawkę zapisywaną dla danego komponentu.
h) Teraz na przykład implementacja powyższego komponentu zmienia się. Na przykład, zmieńmy nazwę strony właściwości na witrynę w komponencie i spróbujmy ponownie uruchomić test.
W ten sposób zmienia się komponent (zmieniliśmy właściwość o nazwie page na nową właściwość o nazwie site).
import React from 'react'; export default class Link extends React.Component { constructor() { super(); this.state = { class: 'normal', welcomeMessage: 'Hi there!' }; } render() { return ( {this.props.site} {this.state.welcomeMessage} ); } }
Teraz spróbujmy ponownie przeprowadzić testy. Ponieważ mamy już migawki w katalogu projektu, oczekuje się, że nasz test zakończy się niepowodzeniem w tym scenariuszu - ponieważ kod komponentu uległ zmianie, a dopasowanie starego migawki zakończy się niepowodzeniem.
Poniżej podany jest wynik, jaki otrzymujemy podczas uruchamiania testu:
(ja) Teraz załóżmy, że te zmiany są zmianami wymaganymi i wymagają od naszych testów zaktualizowania starej migawki. W takim przypadku uruchom testy za pomocą polecenia update, które nadpisze stary obraz stanu i utworzy nowy na podstawie nowych zmian w samym składniku.
Uruchom polecenie
yarn test -u
(jot) Z powyższym poleceniem i zaktualizowanym potwierdzeniem zobaczysz, że test przeszedł pomyślnie.
W związku z tym ogólne testowanie migawek jest przydatną techniką do testowania całego komponentu pod kątem ostatecznego widoku i przechowywania starego wyniku w postaci migawki, co zapewnia, że żadne problemy z regresją nie zostaną wprowadzone w wyniku zmian kodu lub funkcji lub w tym przypadku jakiejkolwiek refaktoryzacji do istniejącego komponentu.
Video Tutorial: Jest Snapshot Testing
Mocking Using Jest
W tej sekcji zobaczymy, jak możemy wykorzystać makiety Jest. Mocków można używać na wiele sposobów, jak pokazano poniżej.
Na przykład,
- Mockowanie całego komponentu React
- Mockowanie jednej lub wielu funkcji - nie jest to specyficzne dla żadnej platformy programistycznej Javascript. Ponieważ Jest to biblioteka testująca javascript, która nie jest specyficzna dla żadnego konkretnego frameworka, możemy nawet użyć Jest do mockowania zwykłego, starego pliku Javascript zawierającego funkcje.
- Mockowanie wywołań API używanych w funkcjach lub w kodzie Javascript - Możemy używać Jest do mockowania odpowiedzi z integracji firm trzecich.
Omówmy szczegółowo każdą z tych kpiarskich metod.
qa pytania do rozmowy kwalifikacyjnej i odpowiedzi dla doświadczonych
Mocking React Components
Aplikacja React składa się z wielu zależnych od siebie komponentów. Aby ułatwić zrozumienie, rozważ React Component jako klasę - mającą prezentację i logikę.
Jak każdy złożony system zbudowany przy użyciu programowania obiektowego składa się z wielu klas, podobnie aplikacja React jest zbiorem komponentów.
Teraz, kiedy testujemy komponent, chcielibyśmy upewnić się, że nie ma żadnych zależności, które wpływają na testowanie, tj. Jeśli istnieją 2 komponenty, od których zależy testowany komponent, to jeśli mamy środki do mockowania komponentów zależnych, następnie możemy przetestować testowany komponent w bardziej kompletny sposób.
Spróbujmy to zrozumieć za pomocą poniższego rysunku:
Tutaj mamy Component1, który jest zależny od Component 2 i 3.
Podczas testów jednostkowych Component1 możemy zastąpić Component2 i Component3 za pomocą Jest Mocks na ich fałszywe lub wyśmiewane odpowiedniki.
Zobaczmy, jak możemy skonfigurować te makiety. Użyjemy prostych komponentów z tekstem HTML umieszczonym wewnątrz elementu div. Najpierw zobaczymy kod dla komponentów zależnych - Component2 i Component3 .
import React, { Component} from 'react' class Component2 extends Component { render() { return( Hello Component2 ) } } export default Component2
import React, { Component} from 'react' class Component3 extends Component { render() { return( Hello Component3 ) } } export default Component3
Teraz zobaczmy, jak będzie wyglądać Komponent1, który ma komponenty zależne. Tutaj widać, że importujemy zależne komponenty i używamy ich jako prostego znacznika HTML, takiego jak odpowiednio &.
import React, { Component} from 'react' import Component2 from './component2' import Component3 from './component3' class Component1 extends Component { render() { return( Hello Component1 ) } } export default Component1
Zobaczmy teraz, jak możemy napisać testy dla tego komponentu. Aby utworzyć test, utwórz folder „testy” w katalogu „src”. Ma to na celu zapewnienie, że nasz katalog projektów pozostanie czysty i uporządkowany.
import React, {Component} from 'react' import {render, container} from '@testing-library/react' import Component1 from '../components/component1' // arrange - mock setup jest.mock('../components/component2', () => () => Hello Mock Component2 ) jest.mock('../components/component3', () => () => Hello Mock Component3 ) describe('mock component tests', () => { test('mocked components in react', () => { // act const {container} = render() // assert console.log(container.outerHTML) const mockComponent2 = container.querySelector('div#mockComponent2') const mockComponent3 = container.querySelector('div#mockComponent3') expect(mockComponent2).toBeInTheDocument() expect(mockComponent3).toBeInTheDocument() }) })
W powyższym pliku testowym widać, że wyśmiewaliśmy komponenty 1 i 2 za pomocą funkcji jest.mock
jest.mock('../components/component2', () => () => Hello Mock Component2 )
Ta konfiguracja po prostu zastąpi wszystkie wywołania Component2 tą pozorowaną reprezentacją. Tak więc, kiedy renderujemy Component1 w teście, wywołuje on symulowaną wersję Component2, co również potwierdziliśmy, sprawdzając, czy elementy DIV Mock istnieją w dokumencie.
Użyliśmy tutaj dopasowania „toBeInTheDocument ()”. To dopasowanie jest specyficzne dla Reacta, ponieważ końcowe renderowane dane wyjściowe aplikacji React to nic innego jak kod HTML. Dlatego ten element dopasowujący szuka danego elementu HTML w dokumencie HTML utworzonym przez React.
Samouczek wideo: Jest - Mock React Components
Mockowanie funkcji za pomocą Jest
Zobaczmy teraz, jak możemy wykorzystać makiety Jest do mockowania określonej funkcji dla danego pliku JavaScript.
Na powyższym rysunku widać, że zastępujemy funkcję 2, która jest zależnością funkcji 1, wersją skróconą / mockowaną funkcji 2
Najpierw utworzymy testowy plik JavaScript, który będzie służył jako testowana aplikacja i będziemy mockować niektóre metody, aby zilustrować koncepcję funkcji mockującej.
function getFullName(firstname, lastname) { return firstname + ' ' + lastname } function greet(firstname, lastname) { return 'Hello! ' + this.getFullName(firstname,lastname) } module.exports = {getFullName, greet}
Mamy tutaj 2 funkcje, tj. Greet () i getFullName (). Funkcja greet () używa getFullName () do uzyskania pełnej nazwy. Zobaczymy, jak możemy zastąpić funkcję getFullName () jej próbną implementacją podczas testowania metody greet ().
Napiszmy prosty test, aby mockować to zachowanie za pomocą funkcji Jest mock i zobaczmy, jak możemy sprawdzić, czy mockowana funkcja została wywołana, czy nie.
test('illustrate mocks', () => { // arrange const mock = jest.fn().mockReturnValue('mocked name') const greeter = require('../app.js') greeter.getFullName = mock // act const result = greeter.greet('aman', 'kumar') // assert expect(result).toBe('Hello! mocked name') expect(mock).toHaveBeenCalled() expect(mock).toHaveBeenCalledTimes(1) expect(mock).toHaveBeenCalledWith('aman','kumar') })
Tutaj zadeklarowaliśmy funkcję makiety Jest i ustawiliśmy wartość zwracaną jako „mocked name”, która zostanie zwrócona po wywołaniu funkcji.
const mock = jest.fn().mockReturnValue('mocked name')
Ponadto, aby sprawdzić, czy makieta została wywołana, możemy użyć dopasowań Jest, jak pokazano poniżej.
- toHaveBeenCalled () - sprawdza, czy została wywołana próba.
- toHaveBeenCalledWith (arg1, arg2) - Sprawdza, czy makieta została wywołana z podanymi argumentami.
- toHaveBeenCalledTimes (n) - sprawdza, ile razy Mock zostałby wywołany.
Jest jeszcze jedna funkcja Jest, która nazywa się Szpieg.
Czym więc są szpiedzy i czym różnią się od kpiny?
W większości przypadków Spies zezwala na prawdziwe wywołanie funkcji, ale może być użyty do sprawdzenia takich rzeczy, jak argumenty użyte do wywołania metody, a także do upewnienia się, czy wywołanie metody nastąpiło, czy nie.
Szpiegowanie w Jest można przeprowadzić Jest spyOn Komenda. Po prostu spyOn przyjmuje argumenty jako obiekt i rzeczywistą funkcję, która ma być szpiegowana, tj. Faktycznie wywoła testowaną funkcję i działa jako pośredni przechwytywacz.
test('illustrate spy', () => { // arrange const greeter = require('../app.js') const getFullNameSpy = jest.spyOn(greeter, 'getFullName') // act const result = greeter.greet('aman', 'kumar') // assert expect(getFullNameSpy).toHaveBeenCalled() expect(result).toBe('Hello! aman kumar') expect(getFullNameSpy).toHaveBeenCalledWith('aman','kumar') })
Zatem w powyższym kodzie można zauważyć, że:
(ja) Skonfigurowaliśmy metodę szpiegowania „getFullName” za pomocą poniższego polecenia.
const getFullNameSpy = jest.spyOn(greeter, 'getFullName')
(ii) W przypadku twierdzeń weryfikujemy, czy szpieg został wezwany z oczekiwanymi argumentami.
expect(getFullNameSpy).toHaveBeenCalled() expect(getFullNameSpy).toHaveBeenCalledWith('aman','kumar')
Polecenie Jest spyOn można również użyć do określenia fałszywej implementacji, która powinna zostać wywołana zamiast rzeczywistej funkcji za pomocą poniższego polecenia.
const getFullNameSpy = jest.spyOn(greeter, 'getFullName').mockImplementation()
W takim przypadku rzeczywiste wywołanie funkcji jest zastępowane przez symulowaną implementację skonfigurowaną ze szpiegiem.
Video Tutorial: Jest- Mock Api Functions
Mockowanie zewnętrznych wywołań API za pomocą Jest
Na poniższym rysunku widać, że function1 wywołuje zewnętrzny punkt końcowy interfejsu API. Na przykład - wywołanie punktu końcowego partnera płatniczego, który daje odpowiedź na sukces lub niepowodzenie.
Teraz, gdy piszemy testy jednostkowe dla tej funkcji, nie możemy oczekiwać wywołania zewnętrznego punktu końcowego za każdym razem, gdy testy są uruchamiane.
Istnieje kilka powodów, dla których należy unikać wywoływania zewnętrznych punktów końcowych w teście.
- Może to wiązać się z kosztami.
- Nie można kontrolować jego odpowiedzi. Nie zawsze można przetestować wszystkie oczekiwane kody odpowiedzi i błędów.
- Może nie zawsze być dostępny - jeśli zewnętrzny punkt końcowy nie jest dostępny, wyniki testu będą niestabilne.
Z tych wszystkich powodów byłoby bardzo przydatne, gdybyśmy mogli kontrolować i blokować zachowanie zewnętrznego punktu końcowego i tworzyć solidne testy jednostkowe dla naszej funkcji.
Zobaczmy, jak możemy osiągnąć fałszywe wywołania API przy użyciu struktury Jest. Axios to moduł NPM, który można pobrać / dodać do projektu za pomocą poniższego polecenia.
npm install --save-dev axios
Będziemy używać modułu „axios” do wykonywania wywołań API w naszej funkcji testowej, jak pokazano poniżej.
function getUserData() { axios.get('https://reqres.in/api/users/2') .then(response => console.log(response.data)) .catch(error => console.log(error)); }
Trafiamy na fałszywy zewnętrzny punkt końcowy, który zwraca fałszywe dane i rejestruje sukces i odpowiedź na błąd.
Teraz, w naszym teście jednostkowym, będziemy kpić z modułu axios i zwracać fałszywą lub pozorowaną odpowiedź, gdy funkcja wywoła ten zewnętrzny punkt końcowy.
Kod testowy będzie wyglądał tak, jak pokazano poniżej.
const axios = require('axios') jest.mock('axios'); describe('mock api calls', () => { test('mocking external endpoint in axios', () => { // arrange const mockedResponse = {data: {username:'test-user', address:'India'}} axios.get.mockResolvedValue(mockedResponse) const app = require('../app.js') // act app.getUserData() // asserts expect(axios.get).toHaveBeenCalled() expect(axios.get).toHaveBeenCalledWith('https://reqres.in/api/users/2') }) })
W tym miejscu ważne jest, aby zrozumieć, że kpimy tutaj z całego modułu „axios”, tj. Każde wywołanie, które trafia do modułu Axios podczas wykonywania testu, przejdzie do symulowanej implementacji i zwróci odpowiedź skonfigurowaną w teście.
Moduł jest mockowany za pomocą poniższego polecenia.
const axios = require('axios') jest.mock('axios');
Skonfigurowaliśmy makietę za pomocą poniższego polecenia.
axios.get.mockResolvedValue(mockedResponse)
W ten sposób możemy mockować odpowiedzi z zewnętrznych punktów końcowych API. W tym przypadku użyliśmy punktu końcowego „GET”, ale to samo podejście można zastosować również do innych punktów końcowych, takich jak POST, PUT itp.
Video Tutorial: Jest – Mock Api Endpoints
Wniosek
W tym samouczku dowiedzieliśmy się, jak stworzyć prostą aplikację React i zobaczyliśmy, jak Jest React może być używany do wykonywania testów Snapshot na komponentach React, a także do mockowania komponentów React jako całości.
Zbadaliśmy również temat Mocking przy użyciu funkcji Jest i Spying za pomocą polecenia Jest spyOn, które wywołuje rzeczywistą implementację metody i działa jako przechwytywacz, aby potwierdzić takie rzeczy, jak liczba wywołań, argumenty, z którymi metoda została wywołana itp.
POPRZEDNIA samouczek | NEXT Tutorial
rekomendowane lektury
- Jest Tutorial - JavaScript Unit Testing Using Jest Framework
- Jest Configuration And Debugging Jest Based Tests
- 25 najlepszych struktur testowania Java i narzędzi do testowania automatycznego (część 3)
- Jak skonfigurować środowisko testowe Node.js: samouczek Node.js.
- Wprowadzenie do JUnit Framework i jego wykorzystanie w skrypcie Selenium - Samouczek Selenium # 11
- Jasmine Framework Tutorial, w tym Jasmine Jquery z przykładami
- Samouczek Java Collections Framework (JCF)