how test react apps using jest framework
In deze videozelfstudie leren we een React-app maken en testen met behulp van Jest, Mocking met Jest en Spying-functies met behulp van de Jest spyOn-opdracht:
NAAR Volledige introductie van Jest werd gegeven in onze vorige tutorial. In deze tutorial zullen we zien hoe we Jest kunnen gebruiken voor het testen van React-gebaseerde apps.
We zullen leren om een bootstrapped React-app te maken met behulp van een eenvoudige boven zeeniveau gebaseerd commando en gebruik dezelfde app voor het schrijven van Jest-reactietests. We zullen ook het concept van snapshot-testen onderzoeken en leren hoe u React-componenten kunt bespioneren en bespioneren met behulp van het Jest-framework en het Jest spyon-commando.
Wat je leert:
Reageer - Aan de slag
Jest is gebouwd om React-apps uitgebreid te testen, samen met de ondersteuning voor alle andere JavaScript-frameworks.
Omdat we de React-app zullen gebruiken om Jest-framework en tests toe te voegen, is het absoluut noodzakelijk en zelfs een vereiste om een basiskennis van React-apps te hebben.
Volg de onderstaande stappen om aan de slag te gaan met een eenvoudige React-app:
# 1) Om een React-app te maken, kunt u eenvoudig een uitvoerder van een knooppuntpakket gebruiken (d.w.z. npx dat ook samen met npm wordt geleverd) en de onderstaande opdracht uitvoeren.
#twee) Zodra de bovenstaande opdracht is voltooid, opent u het project my-app in een willekeurige editor van uw keuze - Visual Studio Code die gratis beschikbaar is, wordt aanbevolen.
# 3) Voer het project uit met de onderstaande opdracht in het terminal- / opdrachtvenster (in de editor).
# 4) Zodra het project is gecompileerd, wordt een nieuw browsertabblad geopend met de URL http: // localhost: 3000
# 5) Houd er ook rekening mee dat alle Jest-gerelateerde afhankelijkheden zijn geïnstalleerd als onderdeel van het React-project dat is gemaakt met de bovengenoemde npx-opdracht.
# 6) Het project bevat ook een React-testbibliotheek met de naam jest-dom met veel handige aangepaste DOM-element-matchers voor Jest. (Controleren hier voor meer details over React-concepten)
Er is een snapshot-test
Snapshot-testen is een zeer nuttige techniek om Snapshots van React-componenten te testen met behulp van de Jest-bibliotheek.
Laten we eerst proberen te begrijpen wat snapshot-testen zijn in wezen betekent.
Snapshot is niets anders dan een weergave van een bepaald moment in de tijd. Bijvoorbeeld, een screenshot, een camerabeeld, etc. zijn allemaal snapshots die de details van iets voor een bepaald moment weergeven.
Vanuit het perspectief van React is Snapshot niets anders dan een weergave op een tijdstip of output van een React-component met de geleverde toestand en het geleverde gedrag.
Dit wordt uitgelegd aan de hand van een eenvoudig voorbeeld met behulp van de onderstaande stappen.
# 1) Om te beginnen met het testen van snapshots, voegt u het npm-pakket 'react-test-renderer' toe met behulp van het onderstaande commando.
#twee) Laten we nu een eenvoudige React-component maken die onze te testen applicatie zal zijn. Deze component heeft een eenvoudige status in de vorm van klassevariabelen en pagina-eigenschappen.
De component ziet er uit zoals hieronder weergegeven. Laten we deze component een naam geven als Link (en dus is de bijbehorende bestandsnaam van de reactiecomponent Link.react.js)
Op dit moment is dit hoe de bestandsstructuur eruitziet voor het React-project.
# 3) Laten we een momentopname-test voor deze component toevoegen.
naar) Om aan de slag te gaan met de snapshot-test: het react-test-renderer Node-pakket is een vereiste. Installeren react-node-renderer met behulp van de onderstaande opdracht.
b) Voeg een nieuw bestand toe om tests voor deze nieuwe component toe te voegen. Laten we het zo noemen Link.test.js
c) Voeg nu een snapshot-test toe. Hier maken we eerst een snapshot door de React-component weer te geven.
De test ziet er uit zoals hieronder weergegeven.
Hier in de test maken we een JSON-weergave van de weergegeven component. We hebben de waarde voor de eigenschap 'pagina' doorgegeven als 'www.softwaretestinghelp.com'
d) Wanneer de snapshot-test wordt uitgevoerd, wordt er een snapshot-bestand van de component gemaakt (met de extensie .snap ) en opgeslagen in de projectdirectory die opnieuw wordt gebruikt tijdens de volgende testuitvoeringen.
In dit geval wordt een snapshot-bestand gebruikt met de pagina-eigenschap zoals geleverd tijdens de test. Laten we eens kijken hoe het snapshot-bestand wordt gegenereerd nadat de test is uitgevoerd met het commando 'npm test'.
is) Er wordt een snapshot-bestand gemaakt onder een directory met de naam __snapshots__ in de project src-directory.
wat zijn de beste vr-apps voor Android
Hieronder is de projectstructuur hiervoor gegeven.
De map __snapshots__ in de bovenstaande schermafbeelding wordt aangemaakt in de hoofdmap van het project wanneer de test voor de eerste keer wordt uitgevoerd.
f) Laten we eens kijken hoe het snapshot-bestand eruit zal zien.
Open bestand - Link.test.js.snap
g) Hierboven ziet u de momentopname die wordt opgeslagen voor de gegeven component.
h) Nu verandert bijvoorbeeld de implementatie van de bovenstaande component. Bijvoorbeeld, laten we de naam van de eigenschappenpagina wijzigen in een site in de component en proberen de test opnieuw uit te voeren.
Dit is hoe de component wordt gewijzigd (we hebben de eigenschap met de naam pagina gewijzigd in een nieuwe eigenschap met de naam site).
Laten we nu proberen de tests opnieuw uit te voeren. Aangezien we de snapshots al in de projectdirectory hebben, wordt verwacht dat onze test in dit scenario zal mislukken - aangezien de Component-code is gewijzigd en de oude snapshot-overeenkomst een mislukking zal zijn.
Hieronder staat het resultaat dat we krijgen tijdens het uitvoeren van de test:
(ik) Laten we nu aannemen dat deze wijzigingen de vereiste wijzigingen zijn en dat onze tests nodig zijn om de oude momentopname bij te werken. In dat geval voert u de tests uit met de update-opdracht die de oude momentopname overschrijft en een nieuwe maakt op basis van de nieuwe wijzigingen in de component zelf.
Voer Command uit
(j) Met de bovenstaande opdracht en bijgewerkte bewering, zult u de test zien slagen.
Algehele Snapshot Testing is dus een nuttige techniek om de hele component te testen tegen de uiteindelijke weergave en het oude resultaat op te slaan als een momentopname, wat ervoor zorgt dat er geen regressieproblemen worden geïntroduceerd als gevolg van codewijzigingen of functies of wat dat betreft enige refactoring. aan de bestaande component.
Video-zelfstudie: er is een snapshot-test
Spottend daar gebruik van
In dit gedeelte zullen we zien hoe we grapjes kunnen gebruiken. De spotjes kunnen op verschillende manieren worden gebruikt, zoals hieronder wordt weergegeven.
Bijvoorbeeld,
- De hele React-component bespotten
- Enkele of meerdere functies bespotten - Dit is niet specifiek voor een Javascript-ontwikkelingsraamwerk. Omdat Jest een javascript-testbibliotheek is die niet specifiek is voor een bepaald framework, kunnen we Jest zelfs gebruiken om een gewoon oud Javascript-bestand met functies te bespotten.
- Mocking API-aanroepen die binnen functies of Javascript-code worden gebruikt - We kunnen Jest gebruiken om reacties van externe integratie te bespotten.
Laten we elk van deze spottende methoden in detail bespreken.
Spottende React-componenten
React App is samengesteld uit meerdere componenten die van elkaar afhankelijk zijn. Beschouw React Component als een klasse voor een eenvoudig begrip, met presentatie en logica.
Zoals elk complex systeem dat is gebouwd met Object Oriented Programming, bestaat uit meerdere klassen, zo is React App een verzameling componenten.
Als we nu een component testen, willen we ervoor zorgen dat er geen afhankelijkheden zijn die het testen ervan beïnvloeden, dwz als er 2 componenten zijn waarvan de te testen component afhankelijk is, dan, als we de middelen hebben om de afhankelijke componenten te bespotten, dan kunnen we het te testen onderdeel op een meer complete manier testen.
Laten we dit proberen te begrijpen met behulp van de onderstaande afbeelding:
Hier hebben we Component1, die afhankelijk is van Component 2 & 3.
Terwijl Unit Component1 test, kunnen we de Component2 en Component3 vervangen door Jest Mocks te gebruiken met hun neppe of bespotte tegenhangers.
Laten we eens kijken hoe we deze bespotten kunnen opzetten. We zullen eenvoudige componenten gebruiken met een html-tekst die in een div is geplaatst. Eerst zullen we de code zien voor afhankelijke componenten - Component2 en Component3
Laten we nu eens kijken hoe Component1 met afhankelijke componenten eruit zal zien. Hier kunt u zien dat we de afhankelijke componenten importeren en ze gebruiken als een eenvoudige HTML-tag, zoals respectievelijk.
Laten we nu eens kijken hoe we tests voor dit onderdeel kunnen schrijven. Om een test te maken, maakt u een map 'tests' aan in de directory 'src'. Dit is alleen om ervoor te zorgen dat onze projectdirectory schoon en georganiseerd blijft.
In het bovenstaande testbestand kun je zien dat we Components1 & 2 hebben bespot met behulp van de functie is bespot
Deze opstelling vervangt eenvoudig alle aanroepen van Component2 door deze nep-weergave. Dus wanneer we Component1 in de test renderen, roept het de bespotte versie van Component2 aan, die we ook hebben beweerd door te controleren of de Mock div-elementen in het document bestaan.
We hebben hier ‘toBeInTheDocument () matcher gebruikt. Deze matcher is React-specifiek, aangezien de uiteindelijke weergegeven uitvoer van React-applicaties niets anders is dan HTML-code. Deze matcher zoekt dus naar het gegeven HTML-element dat aanwezig is in het HTML-document dat door React is gemaakt.
Video-tutorial: Jest - Mock React-componenten
Spottende functies met behulp van grap
Laten we nu eens kijken hoe we Jest-spot kunnen gebruiken om een specifieke functie voor een bepaald JavaScript-bestand te bespotten.
In de bovenstaande afbeelding kun je zien dat we functie 2 vervangen, wat de afhankelijkheid is van functie1 door een stompe / bespotte versie van functie 2
We zullen eerst een test JavaScript-bestand maken dat zal dienen als een te testen applicatie en we zullen daar enkele methoden bespotten om het concept van de spotfunctie te illustreren.
We hebben hier 2 functies, namelijk greet () en getFullName (). De functie greet () gebruikt getFullName () om de volledige naam te verkrijgen. We zullen zien hoe we de functie getFullName () kunnen vervangen door zijn nepimplementatie tijdens het testen van de methode greet ().
Laten we een eenvoudige test schrijven om dit gedrag te bespotten met behulp van de Jest-mock-functie en kijken hoe we kunnen valideren of de bespotte functie werd aangeroepen of niet.
Hier hebben we een Jest-mock-functie gedeclareerd en een retourwaarde ingesteld als 'mocked name' die wordt geretourneerd wanneer de functie wordt aangeroepen.
Om te valideren dat de mock werd genoemd, kunnen we de Jest-matchers gebruiken zoals hieronder weergegeven.
- toHaveBeenCalled () - Valideert of de mock werd aangeroepen.
- toHaveBeenCalledWith (arg1, arg2) - Valideert of de mock werd aangeroepen met de opgegeven argumenten.
- toHaveBeenCalledTimes (n) - Valideert het aantal keren dat de Mock zou zijn aangeroepen.
Er is nog een ander kenmerk van Jest dat Spy heet.
Dus wat zijn spionnen en hoe verschillen ze van spot?
Meestal staat Spies de echte functieaanroep toe, maar het kan worden gebruikt om zaken te valideren zoals welke argumenten werden gebruikt om de methode aan te roepen en ook om na te gaan of de methodeaanroep wel of niet heeft plaatsgevonden.
Spionage in Jest kan worden gedaan via Er is spionage opdracht. Jest spyOn neemt argumenten als het object en de feitelijke functie die moeten worden bespioneerd, d.w.z. het zal de te testen functie daadwerkelijk aanroepen en fungeren als een tussenliggende interceptor.
Dus in de bovenstaande code kun je zien dat:
beste mp3-muziekdownloader voor pc
(ik) We hebben een bespioneringsmethode ‘getFullName’ opgezet met behulp van de onderstaande opdracht.
(ii) In beweringen verifiëren we dat de spion is gebeld met de verwachte argumenten.
Het Jest spyOn-commando kan ook worden gebruikt om een nepimplementatie op te geven die moet worden aangeroepen in plaats van de eigenlijke functie met behulp van het onderstaande commando.
In dit geval wordt de echte functieaanroep vervangen door een nepimplementatie die is opgezet met de spion.
Video-zelfstudie: Jest- Mock Api-functies
Externe API-oproepen bespotten met behulp van grap
In de onderstaande afbeelding kunt u zien dat functie1 een extern API-eindpunt aanroept. Bijvoorbeeld - het bellen van een eindpunt van een betalingspartner dat een reactie geeft op succes of mislukking.
Als we nu eenheidstests voor deze functie schrijven, kunnen we niet verwachten dat we elke keer dat de tests worden uitgevoerd, het externe eindpunt aanroepen.
Er zijn een aantal redenen waarom u het aanroepen van externe eindpunten in de test zou vermijden.
- Het kan kosten met zich meebrengen.
- Zijn reactie kan niet worden gecontroleerd. U kunt niet altijd alle verwachte respons- en foutcodes testen.
- Het is misschien niet altijd beschikbaar - als het externe eindpunt niet beschikbaar is, zullen de testresultaten slecht zijn.
Om al deze redenen zou het erg handig zijn als we het gedrag van het externe eindpunt zouden kunnen controleren en stubben en robuuste eenheidstests voor onze functie zouden kunnen maken.
Laten we eens kijken hoe we spottende API-aanroepen kunnen bereiken met behulp van het Jest-framework. Axios is een NPM-module die kan worden gedownload / toegevoegd aan het project met behulp van de onderstaande opdracht.
We zullen de ‘axios’ -module gebruiken om API-aanroepen te doen in onze testfunctie, zoals hieronder weergegeven.
We raken een dummy extern eindpunt dat nepgegevens retourneert en het succes en de foutrespons registreert.
Nu gaan we in onze unit-test de axios-module bespotten en een nep- of bespot antwoord teruggeven wanneer de functie dit externe eindpunt aanroept.
De testcode ziet er uit zoals hieronder weergegeven.
Hier is het belangrijk om te begrijpen dat we hier de hele ‘axios’ -module bespotten, d.w.z. elke oproep die naar de Axios-module gaat tijdens de testuitvoering, gaat naar de bespotte implementatie en retourneert een reactie zoals geconfigureerd in de test.
De module wordt bespot met behulp van de onderstaande opdracht.
We hebben de mock geconfigureerd met behulp van de onderstaande opdracht.
Op deze manier kunnen we reacties van externe API-eindpunten bespotten. Hier hebben we een ‘GET’ -eindpunt gebruikt, maar dezelfde benadering kan ook worden gebruikt voor andere eindpunten zoals POST, PUT, enz.
Videotutorial: Jest - Mock Api-eindpunten
Gevolgtrekking
In deze tutorial hebben we geleerd hoe we een eenvoudige React-app kunnen maken en hebben we gezien hoe Jest React kan worden gebruikt voor het uitvoeren van Snapshot-tests op React-componenten en het bespotten van React-componenten als geheel.
We hebben ook onderzoek gedaan naar Mocking met behulp van Jest- en Spying-functies met behulp van het Jest spyOn-commando dat de echte implementatie van de methode aanroept en fungeert als een interceptor om zaken te doen als het aantal aanroepen, argumenten waarmee de methode werd aangeroepen, enz.
PREV-zelfstudie VOLGENDE zelfstudie
Aanbevolen literatuur
- Jest Tutorial - JavaScript Unit Testing met Jest Framework
- Jest-configuratie en foutopsporing Op grap gebaseerde tests
- 25 beste Java-testkaders en -tools voor automatiseringstests (deel 3)
- Het Node.js-testraamwerk instellen: Node.js-zelfstudie
- Inleiding tot JUnit Framework en het gebruik ervan in Selenium Script - Selenium Tutorial # 11
- Jasmine Framework-zelfstudie inclusief Jasmine Jquery met voorbeelden
- Zelfstudie voor Java Collections Framework (JCF)