Jest-configuratie en foutopsporing Op grap gebaseerde tests

jest configuration debugging jest based tests

Meer informatie over Jest Config, debuggen en het vergelijken van Jest met andere JavaScript-testframeworks, met name Jest vs Mocha & Jest vs Jasmine:

spionage-app voor mobiele telefoons voor Android

In deze Informatieve Jest-serie , hebben we er alles over onderzocht React Apps, Mocks en Spies testen met Jest in onze laatste tutorial.

In deze zelfstudie leren we meer over Jest Config-bestanden en zien we hoe u Jest-tests daadwerkelijk kunt debuggen voor het oplossen van problemen met een of meer meerdere tests.

We zullen ook enkele van de veelgebruikte opties in het Jest Config-bestand onderzoeken die onafhankelijk in een project kunnen worden ingesteld of die kunnen worden toegevoegd als onderdeel van de package.json-configuratie zelf.

We zullen Visual Studio Code gebruiken voor het schrijven van onze Jest-tests en zouden een extensie of plug-in in VS Code gebruiken om debugging-ondersteuning voor Jest-tests mogelijk te maken.

Daarnaast zullen we de verschillende Javascript test frameworks zoals Mocha en Jasmine met Jest vergelijken en de voor- en nadelen van elkaar begrijpen.

Wat je leert:

• Er is Config
  • # 1) Dekking gerelateerd
  • # 2) Mock-gerelateerd
  • # 3) Gerelateerde tests
  • Video-tutorial over IS-configuratie
• Foutopsporing met behulp van grap
  • # 1) Node's Native Debugger gebruiken
  • # 2) De foutopsporingsconfiguratie van VS Code gebruiken
  • Video-tutorial over IS-foutopsporing
• Er is Mocha Vs Jasmine
• Gevolgtrekking
  • Aanbevolen literatuur

Er is Config

De Jest-configuratie kan op 3 manieren worden gespecificeerd

• Via een sleutel in het bestand package.json.
• Via een jest.config.js-bestand - Configuratiebestand geschreven als een module.
• Via een JSON die kan worden gebruikt met de optie als –config-vlag.

Met alle bovenstaande benaderingen kunt u hetzelfde resultaat bereiken. Laten we eens kijken naar de eerste stap - d.w.z. het toevoegen van de Jest-configuratie via een sleutel in het bestand package.json.

Voeg in het bestaande package.json-bestand een nieuwe sleutel toe met de naam 'jest'. Dit is niets anders dan een set sleutelwaardeparen in JSON-indeling. Alle configuratie-opties met betrekking tot Jest kunnen verder worden toegevoegd aan deze sectie in het bestand package.json.

De meest gebruikte configuratie-opties staan ​​hieronder vermeld.

# 1) Dekking gerelateerd

collectCoverage, coverageThreshold, coverageReporters, coverageDirectory - Dit zijn de meest gebruikte opties. Dekking is een belangrijke statistiek en zorgt ervoor dat de code wordt getest tegen een vooraf ingestelde drempelwaarde.

Een gedetailleerde uitleg van elk van hen is als volgt:

# 1) collectCoverage: Deze optie wordt gebruikt om aan te geven of we willen dat de Jest-testrunner Coverage-informatie verzamelt of niet. Indien ingesteld op true, verzamelt de Jest-runner de dekkingsinformatie. Met deze optie wordt de dekking verzameld en weergegeven op de console aan het einde van de testuitvoering, zoals hieronder weergegeven.

# 2) Dekkingsdrempel: Met deze instelling kunnen we de drempelwaarden voor de dekking in procenten specificeren. Dit is erg handig wanneer de organisatie of het team zich wil houden aan een bepaalde minimumdekkingswaarde, zonder welke geen code kan worden gepusht of samengevoegd naar de hoofdtak.

Laten we eens kijken hoe dit kan worden gebruikt.

De dekking kan worden gespecificeerd op globaal niveau, bestandsniveau of elke andere reguliere expressie. Wanneer gespecificeerd op globaal niveau, moeten alle gespecificeerde drempels overeenkomen voor alle bestanden in het project gecombineerd.

Het specificeren van dekking op bestandsniveau is ook mogelijk door 'globaal' te veranderen in bestandsnaam of regex. De drempelconfiguraties kunnen variëren afhankelijk van de vereiste.

# 3) dekkingReporters: Deze configuratie wordt gebruikt om aan te geven welke reporter u wilt gebruiken om het dekkingsrapport te genereren. Er zijn veel bestaande reporters als NPM-pakketten beschikbaar die kunnen worden gebruikt om een ​​dekkingsrapport te genereren aan het einde van de testuitvoering.

# 4) CoverDirectory: Met deze instelling kan de gebruiker de directory specificeren waar de dekkingsrapporten moeten worden opgeslagen of bewaard nadat ze zijn gemaakt.

Hieronder wordt een gecombineerd voorbeeld gegeven van het gebruik van alle dekkingsgerelateerde configuratie-instellingen.

Hier hebben we 2 dekkingsrapporteurs gebruikt, namelijk lcov en text. Lcov is de lijndekking van Linux en is standaard aanwezig en de 'tekst'-reporter betekent dat de dekkingsoutput ook op de console wordt weergegeven. Het dekkingsrapport wordt gegenereerd op het pad dat is opgegeven in de instelling 'coverageDirectory'.

# 2) Mock-gerelateerd

Mocks worden intensief gebruikt tijdens het testen met Jest. Beide onderstaande configuratie-opties maken een eenvoudige configuratie en het opruimen van spotjes mogelijk.

• autoMocks: Indien ingesteld op true, zal dit standaard alle modules bespotten die in de test worden geïmporteerd.
• clearMocks: Als dit is ingesteld op true, worden alle bespotte instellingen / modules na elke test gewist, zodat elke test met een nieuwe status begint. Dit kan ook worden bereikt met de testCleanup of de 'after' -methode, maar het in de configuratie hebben maakt het nog eenvoudiger.

# 3) Gerelateerde tests

# 1) testTimeout: Deze configuratie wordt gebruikt om een ​​harde time-outinstelling voor tests in milliseconden te bieden. Elke test die meer duurt dan deze geconfigureerde drempel, wordt gemarkeerd als mislukt vanwege een time-outuitzondering.

# 2) Wereldwijd: Deze configuratie wordt gebruikt om globale variabelen in te stellen die bij elke test beschikbaar zouden moeten zijn.

Laten we proberen een globale variabele in de test te gebruiken en kijken of deze werkt zoals verwacht.

Na het uitvoeren van deze test moet de waarde van globalVar worden gelogd.

Controleren hier voor de volledige lijst van alle configuratie-opties.

Video-tutorial over IS-configuratie

Foutopsporing met behulp van grap

In deze sectie zullen we proberen te begrijpen hoe we tests kunnen debuggen die zijn geschreven op basis van Jest.

We zullen 2 verschillende manieren waarop we Jest-tests kunnen debuggen, toepassen en begrijpen.

1. De native debugger van Node en vervolgens Chrome Inspector gebruiken om de tests te debuggen.
2. De foutopsporingsconfiguratie van Visual Studio Code gebruiken om de tests binnen de Visual Studio Code-editor zelf te debuggen. Dit is de meest gebruikte manier om fouten op te sporen, aangezien Visual Studio Code tegenwoordig de standaardeditor is voor de meeste Javascript-ontwikkeling.

Elk van deze benaderingen wordt hieronder in detail uitgelegd.

# 1) Node's Native Debugger gebruiken

Om de native debugger van Node JS te gebruiken, moeten we het trefwoord ‘debugger’ in de test invoegen, waar we het breekpunt willen plaatsen.

Zodra de testuitvoerder het debugger commando, het pauzeert de uitvoering en als we Chrome-foutopsporingshulpmiddelen koppelen, kunnen we de testcode (evenals de te testen functie) debuggen met Chrome-hulpmiddelen.

De Chrome-browser is hier een vereiste om de Native Debugger van Node te gebruiken.

Volg de onderstaande stappen.

# 1) Voeg het foutopsporingszoekwoord toe aan de test, d.w.z. op het punt waar u wilt dat de test het breekpunt bereikt, voegt u de opdracht 'debugger'

#twee) Voer de test uit met de vlag –inspect-brk.

Gebruik de onderstaande opdracht om de test uit te voeren in een breekpuntmodus.

# 3) Koppel de debugger van de Node in Chrome. Ga nu in de Chrome-browser naar chrome: // inspect en maak verbinding met de doelluisteraar die is gemaakt door de bovenstaande stap.

# 4) Ga door met de uitvoering en u zult zien dat het breekpunt in de Chrome Debugger Inspector terechtkomt en u kunt de call-stack en objectstatus debuggen in de Chrome Debugger zelf.

Deze benadering van het debuggen van Jest-tests is oké, maar niet erg gebruiksvriendelijk, omdat je steeds moet overschakelen van de code-editor naar Chrome en vice versa, wat veel wrijving veroorzaakt. In de volgende sectie zullen we zien hoe de debugger in de Visual Studio Code-editor zelf kan worden geconfigureerd.

# 2) De foutopsporingsconfiguratie van VS Code gebruiken

# 1) Selecteer het gedeelte Debug / Run van de Visual Studio-code in het linkerdeelvenster.

c # versus c ++ versus java

#twee) Nu zullen we de foutopsporingsconfiguratie bijwerken voor grap-tests. Voeg hiervoor een nieuwe configuratie toe door de menuoptie te selecteren.

# 3) Zodra de optie configuratie toevoegen is geselecteerd, wordt het bestand `launch.json` geopend met de standaardinhoud in het editorvenster. Verwijder de standaardinhoud en kopieer de onderstaande inhoud om een ​​foutopsporingsconfiguratie voor de Jest-tests te maken.

# 4) Sla de nieuw toegevoegde inhoudsconfiguratie op die zou worden gebruikt om de Jest-tests te debuggen. Als je de configuratie zorgvuldig doorleest, is deze vergelijkbaar met wat we deden toen we via de opdracht probeerden verbinding te maken met de Node-foutopsporing in de Chrome-ontwikkelaarstools.

Het voordeel van configuratie hier is dat de tests worden uitgevoerd / debuggen als onderdeel van de Editor zelf (in dit geval is het VSCode) en we hoeven geen verbinding te maken met een externe applicatie.

# 5) Nadat de foutopsporingsconfiguratie is gemaakt, kunt u nu breekpunten aan de tests toevoegen en deze uitvoeren met deze RUN-configuratie. Dit zorgt ervoor dat de test stopt bij de breekpunten en dat u de waarden kunt debuggen, de objectstatus op het breekpunt in het daadwerkelijke testbestand.

Breekpunten kunnen worden toegevoegd door in de codebestanden in de buurt van de regelnummers te klikken.

# 6) Zodra het breekpunt is toegevoegd, kunnen we de Run-configuratie selecteren die we in stap 3 hebben toegevoegd om de test uit te voeren / te debuggen.

# 7) Bij het selecteren / klikken op de knop Uitvoeren, zou u moeten kunnen zien dat de uitvoering het breekpunt raakt dat is geplaatst en u kunt meer details krijgen zoals omgevings- / variabelewaarden, stacktracering, enz. Bij het breekpunt.

De breekpunt / codestroombesturingsknoppen kunnen worden gebruikt om naar het volgende breekpunt te gaan of binnen de functie voor meer details.

Video-tutorial Hij ISDebuggen

Er is Mocha Vs Jasmine

In het onderstaande gedeelte zullen we Jest vs Mocha en Jest vs Jasmine vergelijken op verschillende parameters en functie-vergelijkingen zoals Snapshot-testen, configuratiegemak en mogelijkheden van verschillende frameworks.

Gevolgtrekking

In deze zelfstudie hebben we geleerd over de verschillende manieren waarop u fouten in uw Jest-tests kunt uitvoeren in Visual Studio Code of in de Chrome Inspector met behulp van de native debugger van Node.

We hebben ook de veelgebruikte configuratie-opties in het Jest-configuratiebestand onderzocht. Jest-configuratie helpt om veel dingen te bereiken, zoals codedekking, html-rapporten, nepgedrag instellen, algemene variabelen instellen, enz.

PREV-zelfstudie ​ EERSTE Tutorial

Aanbevolen literatuur

• Jest Tutorial - JavaScript-eenheid testen met Jest Framework
• React-apps testen met Jest Framework
• Jasmine Framework-zelfstudie inclusief Jasmine Jquery met voorbeelden
• Gedistribueerde builds: Jenkins Master Slave-configuratie
• Foutopsporingstechnieken in Selenium: breekpunten, foutopsporingsmodus en meer
• Tutorial voor het testen van configuraties met voorbeelden
• Het Node.js-testframework instellen: Node.js-zelfstudie
• 25 beste Java-testkaders en -tools voor automatiseringstests (deel 3)