how test react apps using jest framework
V tomto videonávode sa naučíme vytvárať a testovať aplikáciu React pomocou Jest, Mocking pomocou Jest a Spying pomocou príkazu Jest spyOn:
TO Úplné predstavenie žertu bol uvedený v našom predchádzajúcom návode. V tomto návode uvidíme, ako používať Jest na testovanie aplikácií založených na reakciách.
Naučíme sa vytvárať bootstrapovanú aplikáciu React pomocou jednoduchého nad úrovňou mora založený príkaz a používajte tú istú aplikáciu na písanie testov Jest Reagujte. Preskúmame tiež koncepciu testovania snímok a spoznáme, ako môžete zosmiešňovať a špehovať komponenty React pomocou rámca Jest a príkazu Jest spyon.
Čo sa dozviete:
Reagovať - Začíname
Aplikácia Jest bola vyvinutá na rozsiahle testovanie aplikácií React spolu s podporou všetkých ostatných rámcov JavaScriptu.
Pretože budeme používať aplikáciu React na pridanie rámca a testov Jest, je nevyhnutné a nevyhnutným predpokladom základné pochopenie aplikácií React.
Ak chcete začať so základnou aplikáciou React, postupujte podľa nasledujúcich krokov:
# 1) Ak chcete vytvoriť aplikáciu React, môžete jednoducho použiť vykonávateľa balíka uzlov (t. J. Npx, ktorý je tiež dodávaný s npm) a vykonať nasledujúci príkaz.
npx create-react-app my-app#dva) Po dokončení vyššie uvedeného príkazu otvorte projekt mojej aplikácie v ľubovoľnom editore podľa vášho výberu - odporúčaný je kód Visual Studio, ktorý je voľne dostupný.
# 3) V okne terminálu / príkazu (vo vnútri editora) spustite projekt pomocou nasledujúceho príkazu.
npm start# 4) Po zostavení projektu sa otvorí nová karta prehľadávača s adresou URL http: // localhost: 3000
# 5) Upozorňujeme tiež, že všetky závislosti súvisiace s Jest sú nainštalované ako súčasť projektu React vytvoreného pomocou vyššie uvedeného príkazu npx.
# 6) Súčasťou projektu je aj knižnica React testing Library s názvom jest-dom, ktorá má pre Jest veľa užitočných prispôsobovacích prvkov DOM prvkov. (Skontrolujte tu pre viac informácií o konceptoch React)
Existuje testovanie snímok
Testovanie snímok je veľmi užitočná technika na testovanie snímok komponentov React pomocou knižnice Jest.
Najprv sa pokúsime pochopiť, čo je testovanie snímok v podstate znamená.
Momentka nie je nič iné ako časová reprezentácia čohokoľvek. Napríklad, snímka obrazovky, obrázok fotoaparátu atď. sú všetko snímky, ktoré na určitý čas predstavujú podrobnosti čohokoľvek.
Z pohľadu React nie je Snapshot nič iné ako časové znázornenie alebo výstup komponentu React s dodaným stavom a správaním.
To je vysvetlené na jednoduchom príklade pomocou nasledujúcich krokov.
# 1) Ak chcete začať s testovaním snímok, pomocou nasledujúceho príkazu pridajte balík npm „reag-test-vykresľovač“.
npm i react-test-renderer#dva) Teraz si poďme vytvoriť jednoduchý komponent React, ktorý bude našou testovanou aplikáciou. Tento komponent bude mať jednoduchý stav vo forme premenných triedy a vlastností stránky.
Komponent bude vyzerať, ako je uvedené nižšie. Pomenujme tento komponent ako Link (a teda zodpovedajúci názov súboru reagujúceho komponentu bude 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} ); } } V tejto chvíli bude takto vyzerať štruktúra súborov pre projekt React.
# 3) Pridajme test snímok pre tento komponent.
do) Ak chcete začať s testom snímky - Nevyhnutnou podmienkou je balík uzlov React-test-renderer. Inštalácia render-uzol-renderer pomocou nižšie uvedeného príkazu.
npm i react-test-rendererb) Pridajte nový súbor na pridanie testov pre tento nový komponent. Povieme to ako Link.test.js
c) Teraz pridajte test snímok. Tu najskôr vytvoríme snímku vykreslením komponentu React.
Test bude vyzerať tak, ako je uvedené nižšie.
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(); }); Tu v teste vytvárame JSON reprezentáciu vykresleného komponentu. Hodnotu pre vlastnosť „stránka“ sme odovzdali ako „www.softwaretestinghelp.com“.
d) Keď je spustený test snímok - vytvorí sa súbor snímok komponentu (s príponou .čap ) a uložia sa do adresára projektu, ktorý sa znovu použije počas ďalších vykonaní testu.
V takom prípade by sa použil súbor snímok s vlastnosťou stránky dodanou počas testu. Pozrime sa, ako sa súbor snímky generuje po vykonaní testu pomocou príkazu „npm test“.
je) Súbor snímky sa vytvorí v adresári s názvom „__snapshots__“ v adresári projektu src.
rozdiel medzi testovaním čiernej a bielej skrinky
Ďalej je uvedená štruktúra projektu.
Pri prvom spustení testu sa vytvorí adresár „__snapshots__“ na vyššie uvedenej snímke obrazovky v koreňovom adresári projektu.
f) Pozrime sa, ako bude vyzerať súbor snímky.
Otvoriť súbor - Link.test.js.snap
g) Vyššie je znázornená snímka, ktorá sa uloží pre daný komponent.
h) Teraz sa napríklad mení implementácia vyššie uvedeného komponentu. Napríklad, zmeňme názov stránky vlastnosti na web v komponente a skúsme test spustiť znova.
Takto sa zmení komponent (zmenili sme stránku s názvom vlastnosti na novú vlastnosť s názvom web).
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 skúsme znova spustiť testy. Pretože už máme snímky v adresári projektu, očakáva sa, že náš test v tomto scenári zlyhá - pretože sa zmenil kód súčasti a stará zhoda snímok bude zlyhaním.
Výsledok, ktorý dostaneme pri spustení testu, je uvedený nižšie:
i) Teraz predpokladajme, že tieto zmeny sú požadovanými zmenami, a na aktualizáciu starej snímky budeme potrebovať naše testy. V takom prípade spustite testy pomocou príkazu update, ktorý prepíše starú snímku a vytvorí novú na základe nových zmien v samotnom komponente.
Spustiť príkaz
yarn test -uj) Pomocou vyššie uvedeného príkazu a aktualizovaného tvrdenia uvidíte, že test prešiel.
Celkové testovanie snímok je teda užitočnou technikou na testovanie celej súčasti proti konečnému zobrazeniu a uloženie starého výsledku ako snímky, ktorá zaisťuje, že v dôsledku zmien alebo funkcií kódu alebo v dôsledku toho akéhokoľvek refaktoringu nebudú zavedené žiadne problémy s regresiou. k existujúcemu komponentu.
Výukový program s videom: Existuje testovanie snímok
Vysmievanie sa tam
V tejto časti uvidíme, ako môžeme používať posmešky Jest. Falošné pokusy sa dajú použiť mnohými spôsobmi, ako je uvedené nižšie.
Napríklad,
- Vysmievanie celého komponentu React
- Vysmievanie jednej alebo viacerých funkcií - toto nie je špecifické pre žiadny vývojový rámec Javascript. Pretože Jest je knižnica na testovanie javascriptov, ktorá nie je špecifická pre žiadny konkrétny rámec, môžeme pomocou Jestu dokonca vysmievať obyčajný starý súbor Javascript obsahujúci funkcie.
- Mocking API calls used inside functions or Javascript code - Môžeme použiť Jest na zosmiešňovanie odpovedí z integrácie tretích strán.
Pozrime sa podrobne na každú z týchto posmešných metód.
je unix to isté ako linux
Mocking React Components
Aplikácia React sa skladá z viacerých na sebe závislých komponentov. Pre jednoduché pochopenie zvážte React Component ako triedu - s prezentáciou a logikou.
Rovnako ako každý zložitý systém zostavený pomocou objektovo orientovaného programovania je zložený z viacerých tried, podobne je aj React App kolekciou komponentov.
Keď teraz testujeme komponent, chceli by sme sa ubezpečiť, že neexistujú žiadne závislosti, ktoré by ho testovanie ovplyvnili, tj. Ak existujú 2 komponenty, na ktorých je testovaný komponent závislý, potom ak máme prostriedky na zosmiešňovanie závislých komponentov, potom môžeme testovať komponent testovaným komponentom úplnejším spôsobom.
Pokúsme sa to pochopiť pomocou nasledujúceho obrázka:
Máme tu komponent 1, ktorý je závislý od komponentov 2 a 3.
Zatiaľ čo jednotka testuje komponent 1, môžeme nahradiť komponent 2 a komponent 3 pomocou Jest Mocks za ich falošné alebo vysmievané náprotivky.
Pozrime sa, ako môžeme tieto falošné správy nastaviť. Použijeme jednoduché komponenty s Html textom umiestnené vo vnútri div. Najskôr uvidíme kód pre závislé komponenty - Komponent2 a Komponent3 .
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 sa pozrime, ako bude vyzerať komponent 1, ktorý má závislé komponenty. Tu vidíte, že importujeme závislé komponenty a používame ich ako jednoduchú značku HTML, napríklad &.
import React, { Component} from 'react' import Component2 from './component2' import Component3 from './component3' class Component1 extends Component { render() { return( Hello Component1 ) } } export default Component1 Teraz sa pozrime, ako môžeme písať testy pre tento komponent. Ak chcete vytvoriť test, vytvorte priečinok „tests“ v adresári „src“. To len zaisťuje, aby náš adresár projektu zostal čistý a usporiadaný.
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() }) }) Vo vyššie uvedenom testovacom súbore vidíte, že sme sa posmievali komponentom 1 a 2 pomocou tejto funkcie is.mock
jest.mock('../components/component2', () => () => Hello Mock Component2 ) Toto nastavenie jednoducho nahradí všetky vyvolania komponentu2 týmto simulovaným zobrazením. Keď teda v teste vykreslíme komponent 1, volá zosmiešnenú verziu komponentu 2, ktorú sme tiež potvrdili kontrolou toho, či v dokumente existujú prvky Mock div.
Použili sme tu porovnávač ‘toBeInTheDocument (). Tento porovnávač je špecifický pre React, pretože konečný vykreslený výstup aplikácií React nie je nič iné ako HTML kód. Tento matcher teda hľadá, aby daný HTML element bol prítomný v HTML dokumente vytvorenom Reactom.
Výukový program Video: Jest - Súbory s reakciou Mock React
Mocking Functions using Jest
Teraz sa pozrime, ako môžeme použiť posmešky Jest na zosmiešnenie konkrétnej funkcie pre daný súbor JavaScriptu.
Na vyššie uvedenom obrázku vidíte, že nahrádzame funkciu 2, ktorá je závislosťou funkcie 1, za zamotanú / vysmievanú verziu funkcie 2.
Najskôr vytvoríme testovací súbor JavaScriptu, ktorý bude slúžiť ako testovaná aplikácia, a zosmiešňujeme tam niektoré metódy, ktoré ilustrujú koncept posmešnej funkcie.
function getFullName(firstname, lastname) { return firstname + ' ' + lastname } function greet(firstname, lastname) { return 'Hello! ' + this.getFullName(firstname,lastname) } module.exports = {getFullName, greet} Máme tu dve funkcie, t. J. Greet () a getFullName (). Funkcia greet () používa na získanie celého mena funkciu getFullName (). Uvidíme, ako môžeme nahradiť funkciu getFullName () jej simulovanou implementáciou pri testovaní metódy greet ().
Napíšme jednoduchý test na zosmiešnenie tohto správania pomocou simulovanej funkcie Jest a pozrime sa, ako môžeme overiť, či bola vysmievaná funkcia volaná alebo 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') }) Tu sme deklarovali falošnú funkciu Jest a nastavili sme návratovú hodnotu ako „falošný názov“, ktorá sa vráti, keď sa funkcia zavolá.
const mock = jest.fn().mockReturnValue('mocked name')Na overenie toho, že sa vysmievali, tiež môžeme použiť porovnávače Jest, ako je uvedené nižšie.
- toHaveBeenCalled () - Overí, či bol volaný falošný.
- toHaveBeenCalledWith (arg1, arg2) - Overí, či bol s danými argumentmi vyvolaný falošný hovor.
- toHaveBeenCalledTimes (n) - Potvrdzuje počet opakovaní, kedy by sa volalo Mock.
Existuje ešte jedna vlastnosť Jestu, ktorá sa volá Spy.
Čo sú to teda špióni a v čom sa líšia od falošných?
Spies väčšinou umožňuje volanie skutočných funkcií, ale dalo by sa použiť na overenie vecí, ako napríklad toho, aké argumenty sa použili na volanie metódy, a tiež na zistenie, či sa volanie metódy stalo alebo nie.
Špehovanie v Jeste sa dá uskutočniť prostredníctvom Existuje spyOn príkaz. Jest spyOn berie argumenty ako objekt a skutočnú funkciu, ktorá sa má špehovať, t. J. V skutočnosti zavolá testovanú funkciu a bude pôsobiť ako interceptor.
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') }) Vo vyššie uvedenom kóde teda môžete pozorovať, že:
i) Pomocou nasledujúceho príkazu sme nastavili špióna na metódu „getFullName“.
const getFullNameSpy = jest.spyOn(greeter, 'getFullName')ii) V tvrdeniach overujeme, že špión bol zavolaný s očakávanými argumentmi.
expect(getFullNameSpy).toHaveBeenCalled() expect(getFullNameSpy).toHaveBeenCalledWith('aman','kumar') Príkaz Jest spyOn možno tiež použiť na určenie falošnej implementácie, ktorá by sa mala volať namiesto skutočnej funkcie pomocou príkazu uvedeného nižšie.
const getFullNameSpy = jest.spyOn(greeter, 'getFullName').mockImplementation()V takom prípade je volanie skutočnej funkcie nahradené falošnou implementáciou nastavenou pomocou špióna.
Výukový program s videom: Funkcie Jest - Mock Api
Vysmievanie externých hovorov API pomocou žertu
Na nasledujúcom obrázku vidíte, že function1 uskutočňuje hovory na externý koncový bod API. Napríklad - volanie na koncový bod platobného partnera, ktorý dáva odpoveď na úspech alebo neúspech.
Teraz, keď píšeme jednotkové testy pre túto funkciu, nemôžeme očakávať, že zavoláme externý koncový bod zakaždým, keď sú testy spustené.
Existuje niekoľko dôvodov, pre ktoré by ste sa v teste vyhli volaniu externých koncových bodov.
- Môže to zahŕňať náklady.
- Jeho reakcia sa nedá kontrolovať. Nemôžete vždy otestovať všetky očakávané kódy odozvy a chyby.
- Nemusí byť vždy k dispozícii - ak externý koncový bod nie je k dispozícii, výsledky testu budú nepravidelné.
Zo všetkých týchto dôvodov by bolo veľmi užitočné, keby sme mohli riadiť a potlačovať správanie externého koncového bodu a vytvárať robustné jednotkové testy pre našu funkciu.
Pozrime sa, ako môžeme dosiahnuť zosmiešňujúcich hovorov API pomocou rámca Jest. Axios je modul NPM, ktorý je možné stiahnuť / pridať do projektu pomocou nižšie uvedeného príkazu.
npm install --save-dev axiosNa uskutočnenie hovorov API v našej testovacej funkcii budeme používať modul „axios“, ako je uvedené nižšie.
function getUserData() { axios.get('https://reqres.in/api/users/2') .then(response => console.log(response.data)) .catch(error => console.log(error)); } Narážame na fiktívny externý koncový bod, ktorý vracia falošné údaje a zaznamenáva úspech a chybové reakcie.
Teraz v našom teste jednotky ideme vysmievať modulu axios a vrátiť falošnú alebo vysmievanú odpoveď, keď funkcia volá tento externý koncový bod.
Testovací kód bude vyzerať nasledovne.
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') }) }) Tu je dôležité pochopiť, že sa tu vysmievame celému modulu „axios“, t. J. Každé volanie, ktoré počas vykonania testu prejde do modulu Axios, prejde do vysmievanej implementácie a vráti odpoveď tak, ako bola nakonfigurovaná v teste.
Modul sa vysmieva pomocou nižšie uvedeného príkazu.
const axios = require('axios') jest.mock('axios'); Faloš sme nakonfigurovali pomocou nižšie uvedeného príkazu.
axios.get.mockResolvedValue(mockedResponse)Týmto spôsobom môžeme zosmiešňovať odpovede z externých koncových bodov API. Tu sme použili koncový bod „GET“, ale rovnaký prístup by sa mohol použiť aj pre ďalšie koncové body, ako napríklad POST, PUT atď.
Videonávod: Jest - koncové body Mock Api
Záver
V tomto tutoriáli sme sa naučili, ako vytvoriť jednoduchú aplikáciu React, a videli sme, ako je možné Jest React použiť na vykonávanie testov snímok na komponentoch React, ako aj na posmievanie sa React Components ako celku.
Preskúmali sme tiež posmievanie sa pomocou funkcií Jest a Spying pomocou príkazu Jest spyOn, ktorý volá skutočnú implementáciu metódy a slúži ako zachytávač pri presadzovaní vecí, ako je počet vyvolávaní, argumenty, pomocou ktorých bola metóda vyvolaná, atď.
Výukový program PREV | NEXT Tutorial
Odporúčané čítanie
- Výukový program Jest - Testovanie jednotky JavaScript pomocou rámca Jest
- Konfigurácia Jest a ladenie testov Jest
- 25 najlepších rámcov a nástrojov na testovanie Java pre automatizované testovanie (3. časť)
- Ako nastaviť testovací rámec Node.js: Výukový program Node.js
- Úvod do rámca JUnit a jeho použitie v selénovom skripte - selén výučba # 11
- Jasmine Framework Tutorial Vrátane Jasmine Jquery s príkladmi
- Výukový program Java Collections Framework (JCF)