how test react apps using jest framework
U ovom video tutorialu naučit ćemo stvoriti i testirati React aplikaciju pomoću Jest, Mocking koristeći Jest i Spying funkcije pomoću Jest spyOn naredbe:
DO Cjelovito predstavljanje Jest je dato u našem prethodnom vodiču. U ovom uputstvu vidjet ćemo kako koristiti Jest za testiranje aplikacija temeljenih na Reactu.
Naučit ćemo stvoriti bootstrapped React aplikaciju pomoću jednostavnog iznad razine mora temeljena na naredbi i koristite istu aplikaciju za pisanje testova Jest-reakcije. Također ćemo istražiti koncept testiranja snimke i upoznati kako se možete rugati i špijunirati React komponente pomoću Jest framework-a i Jest spyon naredbe.
Što ćete naučiti:
Reagirajte - početak rada
Jest je stvoren za opsežno testiranje React aplikacija, zajedno s podrškom za sve ostale JavaScript okvire.
Kako ćemo koristiti aplikaciju React za dodavanje Jest okvira i testova, nužno je i zaista preduvjet za osnovno razumijevanje React aplikacija.
Da biste započeli s osnovnom aplikacijom React, slijedite korake u nastavku:
# 1) Da biste stvorili aplikaciju React, možete jednostavno koristiti izvršitelja paketa čvorova (tj. Npx koji također dolazi zajedno s npm) i izvršiti naredbu u nastavku.
npx create-react-app my-app
#dva) Kad se gornja naredba dovrši, otvorite projekt my-app u bilo kojem uređivaču po vašem izboru - preporučuje se Visual Studio Code koji je slobodno dostupan.
# 3) U prozoru terminala / naredbe (unutar uređivača) pokrenite projekt pomoću naredbe u nastavku.
npm start
# 4) Jednom kad se projekt kompilira, otvorit će se nova kartica preglednika s URL-om http: // localhost: 3000
# 5) Također, imajte na umu da se sve ovisnosti povezane s Jestom instaliraju kao dio React projekta stvorenog pomoću gore spomenute npx naredbe.
# 6) Projekt također uključuje React knjižnicu za testiranje imena jest-dom koja ima puno korisnih prilagođenih podudaranja DOM elemenata za Jest. (Ček ovdje za više detalja o React konceptima)
Postoji Snapshot testiranje
Snapshot testiranje vrlo je korisna tehnika za testiranje React snimaka komponenata pomoću Jest biblioteke.
Pokušajmo prvo shvatiti što je to snapshot testiranje u biti znači.
Snapshot nije ništa drugo do predstavljanje bilo čega u vremenskoj točki. Na primjer, snimka zaslona, slika s kamere itd. sve su to snimke koje predstavljaju detalje bilo čega u određenom vremenskom trenutku.
Iz perspektive React-a, Snapshot nije ništa drugo do predstavljanje točke ili izlaz React komponente s isporučenim stanjem i ponašanjem.
To je objašnjeno jednostavnim primjerom pomoću koraka u nastavku.
# 1) Da biste započeli s testiranjem snimke, dodajte npm paket 'reakcija-test-prikazivanje' pomoću naredbe u nastavku.
npm i react-test-renderer
#dva) Ajmo sada stvoriti jednostavnu React komponentu koja će biti naša aplikacija na testiranju. Ova će komponenta imati jednostavno stanje u obliku varijabli klase i svojstava stranice.
Komponenta bi izgledala kao što je prikazano u nastavku. Nazovimo ovu komponentu kao Link (i tako će odgovarajući naziv datoteke reakcijske komponente biti 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} ); } }
U ovom trenutku, ovako će struktura datoteke tražiti projekt React.
# 3) Dodajmo test snimke za ovu komponentu.
do) Za početak testa snimke - preduvjet je paket React-test-renderer Node. Instalirati reagirati-čvor-render pomoću naredbe u nastavku.
npm i react-test-renderer
b) Dodajte novu datoteku za dodavanje testova za ovu novu komponentu. Nazovimo to kao Link.test.js
c) Sada dodajte test snimke. Ovdje ćemo prvo stvoriti snimak generiranjem komponente React.
Test bi izgledao kao što je prikazano u nastavku.
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(); });
Ovdje u testu stvaramo JSON prikaz prikazane komponente. Vrijednost za svojstvo 'stranice' proslijedili smo kao 'www.softwaretestinghelp.com'
d) Kada se pokrene test snimke - stvara se datoteka snimka komponente (s nastavkom .snap ) i spremljeni u direktorij projekta koji se ponovno koristi tijekom sljedećih izvršavanja testa.
U tom bi se slučaju koristila datoteka snimke sa svojstvom stranice onako kako je isporučena tijekom testa. Pogledajmo kako se datoteka snimke generira nakon izvođenja testa pomoću naredbe 'npm test'.
je) Datoteka snimke stvara se u direktoriju nazvanom '__snapshots__' u direktoriju projekta src.
kako koristiti naredbu find u unixu
Slijedi struktura projekta za ovo.
Direktorij '__snapshots__' na gornjoj snimci zaslona stvara se u korijenskom direktoriju projekta kada se test izvrši prvi put.
f) Pogledajmo kako će izgledati datoteka snimke.
Otvori datoteku - Link.test.js.snap
g) Iznad je prikazana snimka koja se pohranjuje za datu komponentu.
h) Sada se, na primjer, mijenja implementacija gore navedene komponente. Na primjer, promijenimo naziv stranice svojstva u mjesto u komponenti i pokušajmo ponovo pokrenuti test.
Na taj se način komponenta mijenja (promijenili smo svojstvo s imenom stranice u novo svojstvo pod nazivom 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} ); } }
Pokušajmo ponovo pokrenuti testove. Budući da snimke već imamo u direktoriju projekta, očekuje se da test neće uspjeti u ovom scenariju - jer se kôd komponente promijenio i staro podudaranje snimke neće uspjeti.
Dolje je dan rezultat koji smo dobili tijekom izvođenja testa:
(i) Pretpostavimo sada da su ove promjene potrebne promjene i da će naši testovi trebati ažurirati staru snimku. U tom slučaju pokrenite testove s naredbom update koja će prebrisati staru snimku i stvoriti novu na temelju novih promjena u samoj komponenti.
Pokreni naredbu
yarn test -u
(j) Uz gornju naredbu i ažuriranu tvrdnju vidjet ćete kako test prolazi.
Stoga je cjelokupno testiranje snimke korisna tehnika za testiranje cijele komponente u odnosu na konačni prikaz i pohranjivanje starog rezultata kao snimke koja osigurava da se ne pojave problemi s regresijom kao rezultat promjena koda ili značajki ili, po tom pitanju, bilo kakvog refaktoriranja na postojeću komponentu.
Video lekcije: Postoji Snapshot testiranje
Ismijavanje koristeći Jest
U ovom ćemo odjeljku vidjeti kako možemo koristiti Jest-ove podsmjehe. Ismijavanja se mogu koristiti na brojne načine, kao što je prikazano u nastavku.
Na primjer,
- Ismijavanje cijele komponente React
- Izrugivanje jednoj ili više funkcija - ovo nije specifično za bilo koji Javascript razvojni okvir. Kako je Jest biblioteka za testiranje javascripta koja nije specifična za bilo koji određeni okvir, čak možemo koristiti Jest za ruganje običnoj staroj Javascript datoteci koja sadrži funkcije.
- Ismijavanje API poziva koji se koriste unutar funkcija ili Javascript koda - Možemo koristiti Jest za izrugivanje odgovora iz integracije treće strane.
Razmotrimo detaljno svaku od ovih rugajućih metoda.
Podrugljive reakcijske komponente
Aplikacija React sastoji se od više komponenata koje ovise jedna o drugoj. Radi jednostavnog razumijevanja, uzmite u obzir React Component kao klasu koja ima prezentaciju i logiku.
Kao i svaki složeni sustav izgrađen pomoću objektno orijentiranog programiranja sastoji se od više klasa, slično tome, React App je zbirka komponenata.
Sada, kada testiramo komponentu, željeli bismo osigurati da ne postoje ovisnosti koje utječu na njezino testiranje, tj. Ako postoje 2 komponente o kojima ovisna komponenta koja se testira, onda ako imamo sredstava za ruganje ovisnim komponentama, tada možemo cjelovito testirati komponentu koja se ispituje.
Pokušajmo to razumjeti uz pomoć donje slike:
Ovdje imamo komponentu1 koja ovisi o komponentama 2 i 3.
Dok jedinstveno testiramo komponentu1, komponentu2 i komponentu3 možemo zamijeniti pomoću Jest Mocksa s njihovim lažnim ili izruganim kolegama.
Pogledajmo kako možemo postaviti ove lažne riječi. Koristit ćemo jednostavne Komponente s HTML tekstom smještenim u div. Prvo ćemo vidjeti kod za ovisne komponente - Komponenta2 i Komponenta3 .
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
Pogledajmo sada kako će izgledati komponenta1 koja ima ovisne komponente. Ovdje možete vidjeti da uvozimo ovisne komponente i koristimo ih kao jednostavnu HTML oznaku poput & odnosno.
import React, { Component} from 'react' import Component2 from './component2' import Component3 from './component3' class Component1 extends Component { render() { return( Hello Component1 ) } } export default Component1
Sada, da vidimo kako možemo napisati testove za ovu komponentu. Da biste stvorili test, stvorite mapu 'testovi' u direktoriju 'src'. Ovo je samo da bi se osiguralo da naš direktorij projekata ostane čist i organiziran.
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() }) })
U gornjoj testnoj datoteci možete vidjeti da smo se rugali komponentama1 i 2 pomoću funkcije je.mock
jest.mock('../components/component2', () => () => Hello Mock Component2 )
Ova postavka jednostavno će zamijeniti sve pozive Komponente2 s ovom lažnom predstavom. Dakle, kada u testu izvedemo Component1, on poziva izrugivanu verziju Component2, što smo također utvrdili provjerom postoje li Mock div elementi u dokumentu.
Ovdje smo koristili podudaranje ‘toBeInTheDocument (). Ovo podudaranje je specifično za React, jer konačni prikaz rezultata React aplikacija nije ništa drugo nego HTML kôd. Dakle, ovo podudaranje traži da zadani HTML element bude prisutan u HTML dokumentu koji je stvorio React.
Video tutorial: Jest - Mock React Components
Ismijavanje funkcija pomoću Jest-a
Sada, pogledajmo kako možemo koristiti Jest-ove podsmjehe za ismijavanje određene funkcije za datu JavaScript datoteku.
Na gornjoj slici možete vidjeti da zamjenjujemo funkciju 2, koja je ovisnost funkcije1, verzijom funkcije 2
Prvo ćemo stvoriti testnu JavaScript datoteku koja će služiti kao aplikacija na testiranju i tamo ćemo se rugati nekim metodama da bismo ilustrirali koncept funkcije ruganja.
function getFullName(firstname, lastname) { return firstname + ' ' + lastname } function greet(firstname, lastname) { return 'Hello! ' + this.getFullName(firstname,lastname) } module.exports = {getFullName, greet}
Ovdje imamo dvije funkcije, tj. Greet () i getFullName (). Funkcija greet () koristi getFullName () za dobivanje punog imena. Vidjet ćemo kako možemo zamijeniti funkciju getFullName () njenom lažnom implementacijom tijekom testiranja metode greet ().
Napišimo jednostavan test za ismijavanje ovog ponašanja pomoću lažne funkcije Jest i vidjet ćemo kako možemo provjeriti je li ismijavana funkcija pozvana ili ne.
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') })
Ovdje smo proglasili Jest lažnu funkciju i postavili povratnu vrijednost kao “ismijano ime” koja će se vratiti kad se funkcija pozove.
const mock = jest.fn().mockReturnValue('mocked name')
Također, da bismo potvrdili da je lažni poziv pozvan, možemo upotrijebiti podudaranje Jest kao što je prikazano u nastavku.
- toHaveBeenCalled () - Provjerava je li lažni poziv pozvan.
- toHaveBeenCalledWith (arg1, arg2) - Provjerava je li podsjetnik pozvan s danim argumentima.
- toHaveBeenCalledTimes (n) - Provjerava koliko je puta Mock bio pozvan.
Postoji još jedna značajka Jest-a koja se zove Špijun.
Pa što su Špijuni i po čemu se razlikuju od lažnih?
Većinu vremena Špijuni dopuštaju stvarni poziv funkcije, ali se može koristiti za provjeru stvari poput argumenata koji su korišteni za pozivanje metode, kao i za utvrđivanje je li se poziv metode dogodio ili nije.
Špijuniranje u Jestu može se obaviti Postoji špijun naredba. Jest spyOn uzima argumente kao objekt i stvarnu funkciju koju treba špijunirati, tj. Zapravo će pozvati funkciju koja se ispituje i djelovati kao posredni presretač.
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') })
Dakle, u gornjem kodu možete primijetiti sljedeće:
(i) Postavili smo špijun za metodu 'getFullName' pomoću naredbe u nastavku.
const getFullNameSpy = jest.spyOn(greeter, 'getFullName')
(ii) U tvrdnjama provjeravamo je li špijun pozvan s očekivanim argumentima.
expect(getFullNameSpy).toHaveBeenCalled() expect(getFullNameSpy).toHaveBeenCalledWith('aman','kumar')
Naredba Jest spyOn također se može koristiti za određivanje lažne implementacije koju treba pozvati umjesto stvarne funkcije pomoću naredbe u nastavku.
const getFullNameSpy = jest.spyOn(greeter, 'getFullName').mockImplementation()
U ovom slučaju, stvarni poziv funkcije zamjenjuje se lažnom implementacijom koja je postavljena sa špijunom.
Video vodič: Funkcije Jest-Mock Api
Ismijavanje vanjskih API poziva pomoću Jest-a
Na donjoj slici možete vidjeti da function1 upućuje pozive vanjskoj API završnoj točki. Na primjer - pozivanje krajnje točke partnera za plaćanje koja daje odgovor na uspjeh ili neuspjeh.
Sada kada pišemo jedinične testove za ovu funkciju, ne možemo očekivati da ćemo pozvati vanjsku krajnju točku svaki put kada se testovi pokrenu.
Postoji nekoliko razloga zbog kojih biste izbjegli pozivanje vanjskih krajnjih točaka u testu.
- To može uključivati troškove.
- Njegov se odgovor ne može kontrolirati. Ne možete uvijek testirati sve očekivane kodove odgovora i pogreške.
- Možda nije uvijek dostupna - ako vanjska krajnja točka nije dostupna, rezultati ispitivanja bit će nestalni.
Iz svih ovih razloga, bilo bi vrlo korisno kada bismo mogli kontrolirati i zaustaviti ponašanje vanjske krajnje točke i stvoriti robusne jedinične testove za našu funkciju.
Pogledajmo kako možemo postići podrugljive API pozive pomoću Jest okvira. Axios je NPM modul koji se može preuzeti / dodati u projekt pomoću naredbe u nastavku.
npm install --save-dev axios
Koristit ćemo modul 'axios' za upućivanje API poziva u našoj testnoj funkciji kao što je prikazano u nastavku.
function getUserData() { axios.get('https://reqres.in/api/users/2') .then(response => console.log(response.data)) .catch(error => console.log(error)); }
Udaramo u lažnu vanjsku krajnju točku koja vraća lažne podatke i uspjeh bilježenja i odgovor na pogrešku.
Sada ćemo u našem jedinstvenom testu ismijavati modul axios i vratiti lažni ili izrugivani odgovor kada funkcija pozove ovu vanjsku krajnju točku.
Test kôd izgledat će kao što je prikazano u nastavku.
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') }) })
Ovdje je važno shvatiti da se ovdje rugamo cijelom modulu 'axios', tj. Svaki poziv koji prijeđe na modul Axios tijekom izvođenja testa preći će na izvrgnutu izvedbu i vratiti odgovor kako je konfiguriran u testu.
Modul se ismijava pomoću naredbe u nastavku.
najbolji youtube u mp4 pretvarač na mreži
const axios = require('axios') jest.mock('axios');
Mock smo konfigurirali pomoću naredbe u nastavku.
axios.get.mockResolvedValue(mockedResponse)
Na taj način možemo se rugati odgovorima iz vanjskih API krajnjih točaka. Ovdje smo koristili krajnju točku ‘GET’, ali isti bi se pristup mogao koristiti i za druge krajnje točke kao što su POST, PUT itd.
Video vodič: Jest - Mock Api krajnje točke
Zaključak
U ovom uputstvu naučili smo kako stvoriti jednostavnu React aplikaciju i vidjeli kako se Jest React može koristiti za provođenje Snapshot testova na React komponentama, kao i za podsmjehivanje React Components u cjelini.
Također smo istraživali ruganje pomoću funkcija Jest i Spying pomoću naredbe Jest spyOn koja poziva stvarnu implementaciju metode i djeluje kao presretač za potvrđivanje stvari poput broja poziva, argumenata s kojima je metoda pozvana itd.
PREV Vodič | SLJEDEĆA Vodič
Preporučena literatura
- Vodič za Jest - JavaScript jedinično testiranje pomoću Jest Framework-a
- Konfiguracija i otklanjanje pogrešaka u Jest testovima
- 25 najboljih okvira za testiranje Java i alata za automatizaciju (3. dio)
- Kako postaviti okvir za testiranje Node.js: Vodič za Node.js
- Uvod u JUnit Framework i njegovu upotrebu u skripti za selenij - Vodič za selen br. 11
- Jasmine Framework Tutorial, uključujući Jasmine Jquery sa primjerima
- Vodič za Java Collections Framework (JCF)