jest configuration debugging jest based tests
Lär dig mer om Jest Config, felsöka och jämföra Jest med andra JavaScript-ramverk, särskilt Jest vs Mocha & Jest vs Jasmine:
I denna Informativ Jest-serien , vi utforskade allt om Testa React Apps, Mocks and Spies med Jest i vår senaste handledning.
I den här handledningen lär vi oss mer om Jest Config-filer och ser hur du faktiskt kan felsöka Jest-tester för felsökning av en eller flera flera tester.
Vi kommer också att utforska några av de vanliga alternativen i Jest Config-filen som kan ställas in oberoende i ett projekt eller de som kan läggas till som en del av själva package.json-konfigurationen.
dubbelt länkad c ++ kod
Vi använder Visual Studio-kod för att skriva våra Jest-tester och skulle använda ett tillägg eller plugin i VS-kod för att möjliggöra felsökningsstöd för Jest-tester.
Dessutom kommer vi att jämföra de olika Javascript-testramarna som Mocha och Jasmine med Jest och förstå varandras fördelar och nackdelar.
Vad du kommer att lära dig:
Det finns Config
Jest-konfiguration kan anges på 3 sätt
- Genom en nyckel i package.json-filen.
- Genom en jest.config.js-fil - Konfigurationsfil skriven som en modul.
- Genom en JSON som kan användas med alternativet som -config-flagga.
Med alla ovanstående tillvägagångssätt kan du uppnå samma resultat. Låt oss se det första steget - dvs. lägga till Jest-konfiguration genom en nyckel i package.json-filen.
I den befintliga package.json-filen lägger du till en ny nyckel med namnet “jest”. Detta är inget annat än en uppsättning nyckel-värdepar i JSON-format. Alla konfigurationsalternativ relaterade till Jest kan läggas till i det här avsnittet i filen package.json.
De mest använda konfigurationsalternativen listas nedan.
# 1) Täckningsrelaterat
samlaTäckning, täckningTröskel, täckningRapporter, täckningKatalog - Det här är de mest använda alternativen. Täckning är ett viktigt mått och det säkerställer att koden testas mot en förinställd tröskel.
En detaljerad förklaring av var och en av dem är som följer:
# 1) collectCoverage: Detta alternativ används för att ange om vi vill att Jest-testlöparen ska samla in täckningsinformation eller inte. När Jest-löparen är inställd på sant samlar den informationen om täckning. Med detta alternativ kommer täckningen att samlas in och visas på konsolen i slutet av testkörningen som visas nedan.
# 2) täckningTröskel: Med den här inställningen kan vi ange tröskelvärdena för täckning i procent. Detta är till stor hjälp när organisationen eller teamet vill följa ett visst minimivärde för täckning utan vilken ingen kod kan tryckas eller slås samman till huvudgrenen.
Låt oss se hur detta kan användas.
Täckning kan anges på global nivå, filnivå eller någon annan regex. När det anges på global nivå bör alla angivna tröskelvärden matcha för de kombinerade alla filerna i projektet.
'coverageThreshold': { 'global': { 'branches':95, 'functions':100, 'lines':70, 'statements':-2 } } Att specificera täckning på filnivå är också möjligt genom att ändra “global” till filnamn eller regex. Tröskelkonfigurationerna kan variera beroende på kravet.
'coverageThreshold': { './src/calculator.js': { 'branches':100, 'functions':100, 'lines':100, 'statements':-10 } } # 3) täckning Rapporter: Denna konfiguration används för att ange vilken reporter du vill använda för att generera täckningsrapporten. Det finns många existerande reportrar som NPM-paket tillgängliga som kan användas för att generera en täckningsrapport i slutet av testkörningen.
# 4) täckningskatalog: Med den här inställningen kan användaren ange katalogen där täckningsrapporterna ska sparas eller bestå efter att de skapats.
Nedan ges ett kombinerat exempel på att använda alla täckningsrelaterade konfigurationsinställningar.
'jest':{ 'collectCoverage':true, 'coverageThreshold': { 'global': { 'branches':95, 'functions':100, 'lines':70, 'statements':-2 }, './src/calculator.js': { 'branches':100, 'functions':100, 'lines':100, 'statements':-10 } }, 'coverageReporters': ( 'lcov','text' ), 'coverageDirectory': './output/code-coverage/' } Här har vi använt två täckningsreporter, dvs lcov och text. Lcov är Linuxs linjetäckning och finns som standard och 'text' -reporteren innebär att täckningsutmatningen också kommer att visas på konsolen. Täckningsrapporten genereras på den väg som anges i inställningen 'täckningskatalog'.
# 2) Mock relaterad
Mocks används kraftigt vid test med Jest. Båda nedanstående konfigurationsalternativ möjliggör enkel konfiguration och rensning av mocks.
- autoMocks: När det är satt till sant kommer detta att håna alla moduler som importeras i testet som standard.
- clearMocks: När den är inställd på true kommer detta att rensa alla hånade inställningar / moduler efter varje test, så att varje test börjar med ett nytt tillstånd. Detta kan också uppnås med testCleanup eller 'efter' -metoden, men att ha det i konfiguration gör det ännu enklare.
# 3) Test relaterade
# 1) testTimeout: Denna konfiguration används för att ge en hård timeout-inställning för tester i millisekunder. Alla test som tar mer än det här konfigurerade tröskelvärdet kommer att markeras misslyckades på grund av timeout-undantag.
'jest' { 'testTimeout': 100 } # 2) Globalt: Den här konfigurationen används för att ställa in globala variabler som ska vara tillgängliga för varje test.
'jest' { 'globals': { 'globalVar': 'test global variable!' } } Låt oss försöka använda en global variabel i testet och se om den fungerar som förväntat.
describe('Calculator tests', () => { test('add 2 numbers', () => { // arrange & act const val = mathOps.sum(3,4) console.log(globalVar) // assert expect(val).toBe(7) }) Efter att ha utfört detta test ska värdet på globalVar loggas.
Kolla upp här för en fullständig lista över alla konfigurationsalternativ.
Videohandledning om IS-konfiguration
Felsökning med Jest
I det här avsnittet kommer vi att försöka förstå hur vi kan felsöka tester skrivna baserat på Jest.
Vi kommer att tillämpa och förstå två olika sätt på vilka vi kan felsöka Jest-tester.
- Nodes inbyggda felsökare och sedan använda Chrome Inspector för att felsöka testerna.
- Använda Visual Studio Code: s felsökningskonfiguration för att felsöka testerna i själva Visual Studio Code-redigeraren. Detta är det vanligaste sättet att felsöka eftersom Visual Studio Code är standardredigeraren för det mesta av Javascript-utvecklingen idag.
Var och en av dessa tillvägagångssätt förklaras i detalj nedan.
c ++ bredd första sökning
# 1) Använda Node's Native Debugger
För att använda Node JS native debugger måste vi infoga sökordet 'debugger' i testet, där vi vill placera brytpunkten.
När testutföraren stöter på felsökare kommandot pausar det körningen och om vi bifogar chrome-felsökningsverktyg kan vi felsöka testkoden (liksom funktionen under test) med Chrome-verktyg.
Chrome-webbläsaren är en förutsättning här för att kunna använda Node's Native Debugger.
Följ stegen nedan.
# 1) Lägg till sökord för felsökare i testet, dvs vid den punkt där du vill att testet ska träffa brytpunkten, sätt in kommandot “debugger”
#två) Utför testet med flaggan –inspect-brk.
Använd kommandot nedan för att utföra testet i ett brytpunktsläge.
/usr/local/bin/node --inspect-brk ./node_modules/jest/bin/jest.js --runInBand# 3) Bifoga Node-felsökaren i Chrome. Nu i Chrome-webbläsaren navigerar du till chrome: // inspekterar och ansluter till mållyssnaren som skapats av ovanstående steg.
# 4) Fortsätt körningen så ser du att brytpunkten träffar i chrome-felsökningsinspektören och du kan felsöka samtalsstacken och objekttillståndet i själva chrome-felsökaren.
Detta tillvägagångssätt för felsökning av Jest-tester är okej men inte särskilt användarvänligt eftersom du måste fortsätta växla från kodredigeraren till Chrome och vice versa som orsakar mycket friktion. I det kommande avsnittet kommer vi att se sätten att konfigurera felsökaren i själva Visual Studio-kodredigeraren.
# 2) Använda VS-kodens felsökningskonfiguration
# 1) Välj avsnittet Felsökning / körning av Visual Studio-koden från den vänstra panelen.
bästa gratis pc snabbare programvara
#två) Nu kommer vi att uppdatera felsökningskonfigurationen för jest-tester. För att göra det, lägg till en ny konfiguration genom att välja menyalternativet.
# 3) När alternativet Lägg till konfiguration har valts öppnar filen `launch.json` med standardinnehållet i redigeringsfönstret. Ta bort standardinnehållet och kopiera innehållet nedan för att skapa en felsökningskonfiguration för Jest-testerna.
{ 'version': '0.2.0', 'configurations': ( { 'name': 'Debug Jest Tests', 'type': 'node', 'request': 'launch', 'runtimeArgs': ( '--inspect-brk', '${workspaceRoot}/node_modules/jest/bin/jest.js', '--runInBand' ), 'console': 'integratedTerminal', 'internalConsoleOptions': 'neverOpen', 'port': 9229 } ) } # 4) Spara den nyligen tillagda innehållskonfigurationen som skulle användas för att felsöka Jest-testerna. Om du läser igenom konfigurationen noga, liknar den vad vi gjorde när vi försökte ansluta till Node-felsökaren i Chrome Developer-verktygen via kommandot.
--inspect-brk ./node_modules/jest/bin/jest.js --runInBandFördelen med att konfigurera här är att testerna körs / debugged som en del av själva redigeraren (i det här fallet är det VSCode) och vi behöver inte ansluta till någon extern applikation.
# 5) När felsökningskonfigurationen har skapats kan du nu lägga till brytpunkter i testerna och köra med den här RUN-konfigurationen. Detta kommer att säkerställa att testet stannar vid brytpunkterna och att du kan felsöka värdena, objekttillståndet vid brytpunkten i den faktiska testfilen.
Brytpunkter kan läggas till genom att klicka nära radnumren i kodfilerna.
# 6) När brytpunkten har lagts till kan vi välja den körkonfiguration som vi lade till i steg # 3 för att utföra / felsöka testet.
# 7) När du väljer / klickar på Kör-knappen bör du kunna se att körningen träffar brytpunkten som placerades och du kan få mer information som miljö / variabla värden, stackspårning etc. vid brytpunkten.
Brytpunkt / kodflödeskontrollknapparna kan användas för att gå till nästa brytpunkt eller flytta inuti funktionen för mer information.
Videohandledning Han ÄRFelsökning
Det finns Mocha mot Jasmine
I avsnittet nedan kommer vi att jämföra Jest vs Mocha och Jest vs Jasmine på olika parametrar och funktionsjämförelser som ögonblicksbildtestning, enkel konfiguration och möjligheter i olika ramar.
| Parameter | Är | Mocka | Jasmin |
|---|---|---|---|
| Testtyper som stöds | Används mest för enhetstestning. | Enhetstestning | Enhetstestning och E2E-testning. |
| Snapshot-testning | Fullt stöd - Jest stöder att ta ögonblicksbilder av en komponent och använda den för att jämföra testutgången mot den sparade komponentstrukturen. Ögonblicksbilder är ett utmärkt sätt att säkerställa att användargränssnittet inte ändras oväntat. | Inget stöd | Inget stöd |
| Påståenden och matchare | Använd expect.js-biblioteket för matchare. | Stöd för Node's inbyggda påståendemodul och kan även inkludera andra påståendebibliotek. | Inbyggda påståenden |
| Hånfull | Fullt inbyggt stöd för Mocks and Stubs i Jest. | Inget inbyggt stöd för hån eller stubbning. Kan användas med andra bibliotek som Sinon för att stödja Mocking. | Inbyggt begränsat stöd med spyOn. Kan integreras med andra bibliotek. |
| Körningshastighet | 4x Skämtest är isolerade i sin egen sandlåda. Således körs Jest-tester i huvudsak parallellt på grund av vilka de ger avsevärd förbättring av exekveringstiderna. | x Stöder inte parallellt utförande av tester. | x Stöder inte parallellt utförande av tester. |
| Konfiguration och inställning | Mycket enkelt - ingen konfiguration krävs. | ||
| Sätt för testutförande | Huvudlös | Huvudlös | Huvudlös |
| Testa output och sammanhang | Genererar rikt kontext efter körning - Jest tillhandahåller detaljerad testkontext för att gräva djupt i vad som har orsakat ett fel och därigenom säkerställa enkel felsökning. | Testutdata är inte särskilt läsbara och gör felsökning lite utmanande. | |
| Felsökning | Stöd för inbyggda nodfelsökare kan också användas för att felsöka inom redaktörer som Visual Studio Code genom en separat startkonfiguration. | Stöder inbyggd nodfelsökare. | Kan använda karma testlöpare för att starta tester i Chrome och felsöka. |
| Kodtäckning | Jest har inbyggt stöd för kodtäckning. Täckningskonfiguration kan specificeras i Jest-konfiguration och rapporterna kan genereras med varje testkörning. | Inget inbyggt stöd. Ger stöd för externa bibliotek för att generera täckningsrapporter. | Samma som mocka |
| Teststil | BDD Alla tre ramverk stöder tester som ska skrivas som en uppsättning specifikationer eller specifikationer som gör dem mer läsbara. | BDD | BDD |
Slutsats
I den här handledningen lärde vi oss om de olika sätten på vilka du kan felsöka dina Jest-tester inom Visual Studio-kod eller i Chrome-inspektören med hjälp av nodens inbyggda felsökare.
Vi undersökte också de vanliga konfigurationsalternativen i Jest-konfigurationsfilen. Jest-konfiguration hjälper till att uppnå många saker som kodtäckning, HTML-rapporter, ställa in mock-beteenden, ställa in globala variabler etc.
PREV-handledning | FÖRSTA självstudier
Rekommenderad läsning
- Jest Tutorial - JavaScript-enhetstestning med Jest Framework
- Hur man testar reagera appar med Jest Framework
- Jasmine Framework Tutorial Inklusive Jasmine Jquery med exempel
- Distribuerade byggnader: Jenkins Master Slave Configuration
- Felsökningstekniker i selen: brytpunkter, felsökningsläge och mer
- Konfigurationstesthandledning med exempel
- Så här ställer du in Node.js Testing Framework: Node.js Tutorial
- 25 bästa Java-testramar och verktyg för automatiseringstestning (del 3)