Meny

Jest Tutorial - JavaScript Unit Testing ved bruk av Jest Framework

  • Hoved
  • Annen
  • Jest Tutorial - JavaScript Unit Testing ved bruk av Jest Framework

jest tutorial javascript unit testing using jest framework

Prøv Instrumentet Vårt For Å Eliminere Problemer

I denne Jest-opplæringen vil vi lære om forskjellige Jest-funksjoner, Jest Matchers, og hvordan du bruker Jest-rammeverket for JavaScript Unit Testing:

Jest er et Javascript Testing-rammeverk bygget av Facebook.

Den er primært designet for React (som også er bygget av Facebook) -baserte apper, men kan brukes til å skrive automatiseringsscenarier for alle Javascript-baserte kodebaser.

I denne Jest-testveiledningen vil vi lære om forskjellige funksjoner i Jest, dens matchere og se hvordan vi kan bruke Jest med et eksempel fra slutt til slutt. Vi vil også utforske om kodedekning ved hjelp av Jest.

hvordan du åpner en kjørbar jar-fil

Det er en veiledning

Liste over opplæringsprogrammer i denne JEST-serien

Opplæring # 1: Jest Tutorial - JavaScript Unit testing With Jest Framework
Opplæring # 2: Hvordan teste Reager apper ved hjelp av Jest Framework
Opplæring # 3: Jest-konfigurasjon og feilsøking Jest-baserte tester

Hva du vil lære:

Komme i gang med Jest Testing

Noen av fordelene / funksjonene til Jest er gitt nedenfor:

  1. Null konfigurasjon kreves.
  2. Fort: Jest-tester kjøres parallelt - dette reduserer i sin tur testutførelsestiden.
  3. Innebygd kodedekning: Jest støtter kodedekning ut av esken - dette er en veldig nyttig beregning for alle CI-baserte leveringsrørledninger og den generelle testeffektiviteten til et prosjekt.
  4. Isolerte og sandkassetester: Hver Jest-test kjører i sin egen sandkasse, noe som sikrer at ingen tester kan forstyrre eller påvirke hverandre.
  5. Kraftig Mocking-støtte: Jest-tester støtter alle typer mocking - det være seg funksjonell mocking, timer mocking eller mocking individuelle API-samtaler.
  6. Støtte øyeblikksbilde testing: Øyeblikksbilde-testing er relevant fra React-perspektivet. Jest støtter å ta et øyeblikksbilde av reaksjonskomponenten som testes - dette kan validere med komponentens faktiske utgang. Dette hjelper i stor grad med å validere komponentens oppførsel.

Jest Framework For JavaScript Unit Testing

I denne delen vil vi se et eksempel fra slutt til slutt for å skrive tester ved hjelp av JEST-rammeverket for en enkel Javascript-funksjon. For det første, la oss se hvordan du installerer JEST-rammeverket i prosjektet vårt

IS-installasjon

Jest er ganske enkelt en nodepakke og kan installeres ved hjelp av hvilken som helst nodebasert pakkebehandling. Eksempel, npm eller garn.

La oss se noen eksempler på kommandoer som kan brukes til å installere Jest-pakken.

yarn add --dev jest npm install --save-dev jest

For å installere Jest-modulen globalt, kan du bare bruke ‘-g’-flagget sammen med npm-kommandoen. Dette gjør at du kan bruke Jest-kommandoer direkte uten å konfigurere pakkefilen for npm-tester.

npm install -g jest

Bruke Jest i et node-basert prosjekt

For å bruke Jest i et node-basert prosjekt, bruk bare kommandoene fra avsnittet ovenfor for å installere nodepakken for Jest.

Følg trinnene nedenfor for å lage et nodeprosjekt fra start og deretter installere Jest i det.

#1) Lag en mappe / katalog med et navn som prosjektnavnet ditt, for eksempel , myFirstNodeProject

#to) Bruk nå terminalen eller kommandolinjen, naviger til prosjektet som ble opprettet i trinnet ovenfor, og kjør npm init-skriptet ved hjelp av kommandoen nedenfor.

npm init

# 3) Når kommandoen ovenfor er utført, vil den be om forskjellige spørsmål / parametere.

For eksempel , navnet på prosjektet, versjonen osv. Bare trykk på enter (og godta standardverdiene). Når du er ferdig, vil du se en package.json-fil opprettet i prosjektet ditt. Dette er en obligatorisk konfigurasjonsfil for ethvert nodebasert prosjekt

# 4) Utfør nå kommandoen for å installere Jest-pakken i det nyopprettede prosjektet ved hjelp av kommandoen nedenfor.

npm install --save-dev jest

Dette vil installere Jest-modulen (i tillegg til dens avhengigheter).

# 5) Nå har vi et nodeprosjekt klart med Jest-bindinger. La oss konfigurere npm-testskriptet til å kjøre Jest-testene, dvs. når kommandoen 'npm-test' utføres, skal skriptet kjøre alle Jest-rammebaserte tester.

For å gjøre det må du oppdatere package.json-filen og legge til en skriptseksjon som vist nedenfor.

'scripts': { 'test': 'jest' }

Den endelige package.json-filen vil se ut som vist nedenfor.

{ 'name': 'jest-e2e', 'version': '1.0.0', 'description': '', 'main': 'index.js', 'scripts': { 'test': 'jest' }, 'author': '', 'license': 'ISC', 'dependencies': { 'jest': '^25.1.0' } }

Skrive tester for en Javascript-funksjon

I denne delen vil vi lage en enkel Javascript-funksjonskode for tillegg, subtraksjon og multiplikasjon av 2 tall og skrive de tilsvarende Jest-baserte testene for den.

La oss først se hvordan koden for applikasjonen (eller funksjonen) under test ser ut.

#1) I nodeprosjektet opprettet i avsnittet ovenfor, oppretter du en js-fil med navnet calculator.js med innhold som vist nedenfor

const mathOperations = { sum: function(a,b) { return a + b; }, diff: function(a,b) { return a - b; }, product: function(a,b) { return a * b } } module.exports = mathOperations

#to) Lag nå en testfil i samme mappe for disse testene, med navnet calculator.test.js - dette er konvensjonen som forventes av Jest-rammeverket å lete etter alle filene som inneholder Jest-baserte tester. Vi vil også importere funksjonen under test for å utføre koden i testen.

Slik vil filen se ut med bare importere / kreve erklæring.

const mathOperations = require('./calculator');

# 3) La oss nå skrive tester for forskjellige metoder i hovedfilen, dvs. sum, diff og produkt.

Jest-tester følger BDD-stiltester, hvor hver testsuite har en hovedbeskrivelsesblokk og kan ha flere testblokker. Vær også oppmerksom på at testene også kan ha nestede beskrivelsesblokker.

La oss skrive en test for å legge til 2 tall og validere forventede resultater. Vi leverer tallene som 1 og 2 og forventer at resultatet blir 3.

describe('Calculator tests', () => { test('adding 1 + 2 should return 3', () => { expect(mathOperations.sum(1, 2)).toBe(3); }); })

Vennligst referer til punktene nedenfor med testen ovenfor:

til) Beskriv blokken er en ytre beskrivelse for testpakken, dvs. den representerer en generisk beholder for alle testene vi skal skrive til kalkulatoren i denne filen.

b) Deretter har vi en individuell testblokk - dette representerer en enkelt test. Strengen i anførselstegn representerer navnet på testen.

c) Henvis til koden i forventningsblokken - “forvent” er ikke annet enn en påstand. Uttalelsen kaller summetoden i funksjonen som testes med inngang 1 og 2 og forventer at utgangen skal være 3.

Vi kan også omskrive dette på en enklere måte for å forstå det bedre.

Se nedenfor, nå har vi skilt funksjonsanropet og påstanden som to separate utsagn for å gjøre det mer kortfattet.

describe('Calculator tests', () => { test('adding 1 + 2 should return 3', () => { // arrange and act var result = mathOperations.sum(1,2) // assert expect(result).toBe(3); }); })

d) For å kjøre denne testen, bare kjør kommandoen “ test over havet ”I terminalen eller ledeteksten på prosjektstedet.

Du vil se utdataene som vist nedenfor.

Kjør kommandoen “npm test” i terminalen - Output

# 4) La oss prøve noen flere tester.

til) Skriv først en mislykket test og se hvilken effekt vi får. La oss bare endre resultatet til en feil verdi i den samme testen som vi skrev i forrige avsnitt. Se hvordan testen ser ut.

beste gratis pc øke hastigheten på programvaren
describe('Calculator tests', () => { test('adding 1 + 2 should return 10', () => { // arrange and act var result = mathOperations.sum(1,2) // assert expect(result).toBe(10); }); })

Her forventer vi en sum på 1 og 2 for å returnere 10 som er feil.

La oss prøve å utføre dette og se hva vi får.

detaljert utdata når en test mislykkes

Du kan se detaljert utdata når en test mislykkes, dvs. hva som faktisk ble returnert og hva som var forventet, og hvilken linje som forårsaket feilen i funksjonen under test osv.

b) La oss skrive flere tester for de andre funksjonene, dvs. forskjell og produkt.

Testfilen med alle testene vil se ut som vist nedenfor.

const mathOperations = require('./calculator'); describe('Calculator tests', () => { test('adding 1 + 2 should return 3', () => { // arrange and act var result = mathOperations.sum(1,2) // assert expect(result).toBe(3); }); test('subtracting 2 from 10 should return 8', () => { // arrange and act var result = mathOperations.diff(10,2) // assert expect(result).toBe(8); }); test('multiplying 2 and 8 should return 16', () => { // arrange and act var result = mathOperations.product(2,8) // assert expect(result).toBe(16); }); })

Når testene ovenfor er utført, utdataene nedenfor blir generert.

Tester utdata for funksjoner - forskjell og produkt

Videoopplæring: Hva er spøk

Det er Matchers

Jest-påstander bruker matchere for å hevde om en tilstand. Jest bruker matchere fra den forventede Api. Forvent API-dokumentet kan refereres til her.

La oss gå gjennom noen av de mest brukte matcherne sammen med Jest-tester.

# 1) Likhet

Dette er de mest brukte matcherne. De brukes til å kontrollere likhet eller ulikhet og brukes hovedsakelig til aritmetiske operasjoner.

La oss se noen eksempler nedenfor:

Her har vi skrevet to matchere som bruker toBe og not.toBe som er analoge med like og ikke like.

test('equality matchers', () => { expect(2*2).toBe(4); expect(4-2).not.toBe(1); })

# 2) Sannhet

Her vil vi se, matchere for null, falsk og sannhet, dvs. falske og sannhetsverdier. Det er viktig å merke seg at alt som ikke er logisk, er falske.

For eksempel, nummer 0, null, tom streng, NaN er alle eksempler på falske w.r.t Javascript.

test('truthy operators', () => { var name='Software testing help' var n = null expect(n).toBeNull() expect(name).not.toBeNull // name has a valid value expect(name).toBeTruthy() //fail - as null is non success expect(n).toBeTruthy() // pass - null treated as false or negative expect(n).toBeFalsy() // 0 - treated as false expect(0).toBeFalsy() })

# 3) Antall matchere

Disse matcherne kan brukes til generelle regneoperasjoner.

For eksempel, greaterThan, lessThan, greaterThanOrEqual, etc.

Sjekk eksemplene nedenfor for mer informasjon

test('numeric operators', () => { var num1 = 100; var num2 = -20; var num3 = 0; // greater than expect(num1).toBeGreaterThan(10) // less than or equal expect(num2).toBeLessThanOrEqual(0) // greater than or equal expect(num3).toBeGreaterThanOrEqual(0) })

# 4) String Matchers

Mange ganger trenger vi strenger for å matche et vanlig uttrykk som en påstand i en enhetstest. Jest gir matchere for strenger som skal matches mot et vanlig uttrykk.

test('string matchers',() => { var string1 = 'software testing help - a great resource for testers' // test for success match expect(string1).toMatch(/test/); // test for failure match expect(string1).not.toMatch(/abc/) })

Videoopplæring: Det er matchere

Jest Hooks - Setup And Teardown

Akkurat som alle andre xUnit-baserte enhetstestrammer, gir Jest framework også kroker for oppsett og oppryddingsmetoder. Disse krokmetodene utføres før og etter hver test i testpakken eller før og etter testSuite-utførelse.

Totalt er det 4 kroker som er tilgjengelige å bruke.

  • før hver og etter hver: Disse krokene utføres før og etter hver test i testpakken.
  • beforeAll og afterAll: Disse krokene utføres bare én gang for hver testsuite. dvs. hvis en testpakke har 10 tester, vil disse krokene bare utføres en gang for hver testutførelse.

La oss se et eksempel: Vi legger til disse krokene i det samme testeksemplet for å legge til 2 tall.

Vi vil sette inngangene inn før hver krok for illustrasjon. Testfilen vil se ut med testkroker som vist nedenfor.

describe('Calculator tests', () => { var input1 = 0 var input2 = 0 beforeAll(() => { console.log('beforeAll called'); }); afterAll(() => { console.log('afterAll called'); }); beforeEach(() => { console.log('beforeEach called'); input1 = 1; input2 = 2; }); afterEach(() => { console.log('afterEach called'); }); test('adding 1 + 2 should return 3', () => { // arrange and act var result = mathOperations.sum(input1,input2) // assert expect(result).toBe(3); }); })

Tips og triks

#1) Kommandolinjerapportene er gode, men ikke veldig lesbare. Det er biblioteker / moduler tilgjengelig for å generere HTML-baserte testrapporter for Jest-tester. Det kan oppnås som vist nedenfor.

api testing intervju spørsmål og svar
  • Legg til nodepakke for jest-html-reporter ved hjelp av kommandoen nedenfor.
npm install --save-dev jest-html-reporter
  • Legg nå til Jest-konfigurasjon for reporteren i filen package.json i nodeprosjektet.
'jest': { 'reporters': ( 'default', ( './node_modules/jest-html-reporter', { 'pageTitle': 'Test Report' } ) ) }
  • Når du er konfigurert nå, utfører du testene ved å bruke “ test over havet ”Kommando.
  • Hvis oppsettet er vellykket, bør du kunne se en HTML-basert rapport som blir opprettet i prosjektkatalogen.

Testrapport

# 2) Opprette kodedekningsrapport: Kodedekning er en av de viktigste beregningene fra et enhetstestperspektiv. Den måler i hovedsak hvilken prosentandel av uttalelser / grener som dekkes for søknaden som testes.

Jest gir støtte for kodedekning utenom boksen. For å få Jest-dekningsrapporten, Det er konfigurasjon må legges til i pakke.json fil.

Legg til konfigurasjonen som vist nedenfor:

'jest': { 'collectCoverage':true }

Når denne konfigurasjonen er gjort, kan du prøve å kjøre testene ved hjelp av kommandoen 'Over havnivåtest' , og du kan se kodedekningsdetaljene rett under resultatene for testutførelsen som vist nedenfor.

kode dekningsdetaljer

Videoopplæring: Jest-dekning og generering av HTML-rapporter

Konklusjon

I denne Jest-opplæringen gikk vi gjennom det grunnleggende i Jest-rammeverket. Vi lærte å installere Jest-rammeverket, og så hvordan det kan brukes til å teste enkle Javascript-filer.

Vi utforsket også de forskjellige typene matchere som støttes av Jest, og dekket Html-journalister og kodedekningsrapporter.

NESTE veiledning

Anbefalt lesing

^