Menu

Jest Tutorial - JavaScript-enhedstest ved hjælp af Jest Framework

  • Vigtigste
  • Andet
  • Jest Tutorial - JavaScript-enhedstest ved hjælp af Jest Framework

jest tutorial javascript unit testing using jest framework

Prøv Vores Instrument Til At Fjerne Problemer

I denne Jest-vejledning lærer vi om forskellige Jest-funktioner, Jest Matchers, og hvordan man bruger Jest-rammen til JavaScript Unit Testing:

Jest er en Javascript Testing-ramme bygget af Facebook.

Det er primært designet til React (som også er bygget af Facebook) -baserede apps, men kan bruges til at skrive automatiseringsscenarier for alle Javascript-baserede kodebaser.

I denne Jest-testvejledning lærer vi om forskellige funktioner i Jest, dens matchere og ser, hvordan vi kan bruge Jest med et eksempel fra ende til slut. Vi vil også undersøge om kodedækning ved hjælp af Jest.

Der er en tutorial

Liste over vejledninger i denne JEST-serie

Tutorial # 1: Jest Tutorial - JavaScript enhedstest med Jest Framework
Tutorial # 2: Sådan testes reageringsapps ved hjælp af Jest Framework
Tutorial # 3: Jest-konfiguration og fejlfinding Jest-baserede tests

Hvad du vil lære:

Kom godt i gang med Jest Testing

Nogle af fordelene / funktionerne ved Jest er angivet nedenfor:

  1. Nul konfiguration påkrævet.
  2. Hurtig: Jest-tests kører parallelt - dette reducerer igen testudførelsestiden i høj grad.
  3. Indbygget kodedækning: Jest understøtter kodedækning ud af kassen - dette er en meget nyttig måling for alle CI-baserede leveringsrørledninger og den samlede testeffektivitet af et projekt.
  4. Isolerede og sandkassetest: Hver Jest-test kører i sin egen sandkasse, hvilket sikrer, at ingen to tests kan forstyrre eller påvirke hinanden.
  5. Kraftig Mocking-support: Jest-tests understøtter alle typer mocking - det være sig funktionel mocking, timermocking eller mocking af individuelle API-opkald.
  6. Support snapshot test: Snapshot-test er relevant ud fra React-perspektivet. Jest understøtter optagelse af et øjebliksbillede af den reaktorkomponent, der testes - dette kan valideres med komponentens faktiske output. Dette hjælper i høj grad med at validere komponentens adfærd.

Jest Framework til test af JavaScript-enheder

I dette afsnit vil vi se et eksempel på ende til slut til at skrive tests ved hjælp af JEST-rammen til en simpel Javascript-funktion. Lad os først se, hvordan vi installerer JEST-rammen i vores projekt

IS Installation

Jest er simpelthen en node-pakke og kan installeres ved hjælp af enhver node-baseret pakkehåndtering. Eksempel, npm eller garn.

Lad os se nogle eksempler på kommandoer, der kan bruges til at installere Jest-pakken.

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

For at installere Jest-modulet globalt kan du blot bruge '-g'-flag sammen med npm-kommandoen. Dette giver dig mulighed for at bruge Jest-kommandoer direkte uden at konfigurere pakkefilen til npm-tests.

npm install -g jest

Brug af Jest i et node-baseret projekt

For at bruge Jest i et node-baseret projekt skal du blot bruge kommandoerne fra ovenstående afsnit til at installere nodepakken til Jest.

Følg nedenstående trin for at oprette et nodeprojekt fra start og derefter installere Jest i det.

# 1) Opret en mappe / mappe med et navn som dit projektnavn, for eksempel , myFirstNodeProject

#to) Brug nu terminalen eller kommandolinjen til at navigere til projektet oprettet i ovenstående trin og udføre npm init-scriptet ved hjælp af nedenstående kommando.

npm init

# 3) Når ovenstående kommando er udført, vil den bede om forskellige spørgsmål / parametre.

bedste gratis Windows 10 reparationssoftware

For eksempel , navnet på projektet, version osv. Bliv ved med at trykke på enter (og accepter standardværdierne). Når du er færdig, vil du se en package.json-fil oprettet i dit projekt. Dette er en obligatorisk konfigurationsfil til ethvert node-baseret projekt

# 4) Udfør nu kommandoen for at installere Jest-pakken i det nyoprettede projekt ved hjælp af kommandoen nedenfor.

npm install --save-dev jest

Dette installerer Jest-modulet (såvel som dets afhængighed).

# 5) Nu har vi et node-projekt klar med Jest-bindinger. Lad os konfigurere npm-testscriptet til at køre Jest-testene, dvs. når kommandoen 'npm-test' udføres, skal scriptet køre alle Jest-rammebaserede tests.

For at gøre det skal du opdatere filen package.json og tilføje et script-afsnit som vist nedenfor.

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

Den endelige package.json-fil ser ud 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' } }

Skrivningstests til en Javascript-funktion

I dette afsnit opretter vi en simpel Javascript-funktionskode til addition, subtraktion og multiplikation af 2 tal og skriver de tilsvarende Jest-baserede tests for det.

Lad os først se, hvordan koden til vores applikation (eller funktion) under test ser ud.

# 1) I nodeprojektet oprettet i ovenstående afsnit skal du oprette en js-fil med navnet calculator.js med indhold 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) Opret nu en testfil i den samme mappe til disse tests, navngivet calculator.test.js - dette er den konvention, der forventes af Jest-rammen om at lede efter alle de filer, der indeholder Jest-baserede tests. Vi importerer også funktionen under test for at udføre koden i testen.

Sådan ser filen ud med kun import / krævende erklæring.

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

# 3) Lad os nu skrive tests til forskellige metoder i hovedfilen, dvs. sum, diff og produkt.

Jest-tests følger BDD-stiltest, hvor hver testpakke har en hovedbeskrivelsesblok og kan have flere testblokke. Bemærk også, at testene også kan have indlejrede beskrivelsesblokke.

java kodning interview spørgsmål og svar til erfarne

Lad os skrive en test til tilføjelse af 2 tal og validere de forventede resultater. Vi leverer tallene som 1 & 2 og forventer output som 3.

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

Se nedenstående punkter med ovenstående test:

til) Beskriv blokken er en ydre beskrivelse af testpakken, dvs. den repræsenterer en generisk beholder til alle de tests, som vi skal skrive til lommeregneren i denne fil.

b) Dernæst har vi en individuel testblok - dette repræsenterer en enkelt test. Strengen i anførselstegn repræsenterer navnet på testen.

c) Se koden i forventningsblokken - “forvent” er intet andet end en påstand. Erklæringen kalder summetoden i den testede funktion med input 1 & 2 og forventer, at output er 3.

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

Se nedenfor, nu har vi adskilt funktionsopkaldet og påstanden som 2 separate udsagn for at gøre det mere 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 at køre denne test skal du blot køre kommandoen “ test over havets overflade ”I terminalen eller kommandoprompten på projektplaceringen.

Du vil se output som vist nedenfor.

Kør kommandoen

# 4) Lad os prøve nogle flere tests.

til) Skriv først en fejlagtig test og se, hvilken output vi får. Lad os bare ændre resultatet til en forkert værdi i den samme test, som vi skrev i det sidste afsnit. Se hvordan testen ser ud.

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, at et beløb på 1 og 2 returnerer 10, hvilket er forkert.

Lad os prøve at udføre dette og se, hvad vi får.

detaljeret output, når en test mislykkes

Du kan se den detaljerede output, når en test mislykkedes, dvs. hvad der faktisk blev returneret, og hvad der var forventet, og hvilken linje der forårsagede fejlen i den testede funktion osv.

b) Lad os skrive flere tests til de andre funktioner, dvs. forskel og produkt.

Testfilen med alle testene ser ud 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 ovenstående tests udføres, output nedenfor er genereret.

Tester output for funktioner - forskel og produkt

Videovejledning: Hvad er spøg

Der er Matchers

Jest påstande bruger matchere til at hævde på en betingelse. Jest bruger matchere fra den forventede Api. Der kan henvises til det forventede API-dokument her.

Lad os gå gennem nogle af de mest anvendte matchere sammen med Jest-tests.

# 1) Ligestilling

Disse er de mest anvendte matchere. De bruges til at kontrollere lighed eller ulighed og bruges mest til aritmetiske operationer.

Lad os se nogle eksempler nedenfor:

Her har vi skrevet 2 matchere, der bruger toBe og not.toBe, der er analoge med lig og ikke lig.

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

# 2) Sandhed

Her vil vi se, matchere for nul, falsk og sandhed, dvs. falske og sandhedsværdier. Det er vigtigt at bemærke, at alt, hvad der ikke er logisk sandt, 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) Antal matchere

Disse matchere kunne bruges til generelle aritmetiske operationer.

For eksempel, greaterThan, lessThan, greaterThanOrEqual osv.

Se eksemplerne nedenfor for flere detaljer

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 gange har vi brug for strenge for at matche et regulært udtryk som en påstand i en enhedstest. Jest giver matchere til strenge, der skal matches med et regulært udtryk.

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/) })

Videoundervisning: Der er matchere

Jest Hooks - Opsætning og nedrivning

Ligesom alle andre xUnit-baserede enhedstestrammer giver Jest framework også kroge til opsætnings- og oprydningsmetoder. Disse krogmetoder udføres før og efter hver test i testpakken eller før og efter testSuite-udførelse.

I alt er der 4 kroge, der er tilgængelige til brug.

  • før hver og efter hver: Disse kroge udføres før og efter hver test i testpakken.
  • beforeAll og afterAll: Disse kroge udføres kun en gang for hver testpakke. dvs. hvis en testpakke har 10 tests, udføres disse kroge bare en gang for hver testudførelse.

Lad os se et eksempel: Vi tilføjer disse kroge til det samme testeksempel for at tilføje 2 tal.

Vi indstiller indgangene inden hver krog til illustration. Testfilen ser ud med testkroge 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 tricks

# 1) Kommandolinjerapporterne er gode, men ikke særlig læsbare. Der er biblioteker / moduler til rådighed til at generere HTML-baserede testrapporter til Jest-tests. Det kan opnås som vist nedenfor.

hvordan man åbner dat-fil på windows
  • Tilføj knudepakke til jest-html-reporter ved hjælp af kommandoen nedenfor.
npm install --save-dev jest-html-reporter
  • Tilføj nu Jest-konfiguration til reporteren i package.json-filen i node-projektet.
'jest': { 'reporters': ( 'default', ( './node_modules/jest-html-reporter', { 'pageTitle': 'Test Report' } ) ) }
  • Når konfigureret nu, skal du udføre testene ved hjælp af “ test over havets overflade ”Kommando.
  • Hvis opsætningen er vellykket, skal du kunne se en HTML-baseret rapport, der oprettes i projektmappen.

Test rapport

# 2) Oprettelse af kodedækningsrapport: Kodedækning er en af ​​de vigtigste målinger set fra et enhedstestperspektiv. Den måler i det væsentlige, hvor stor en procentdel af udsagn / grene, der er dækket af den test, der er testet.

Jest yder support ud af kassen til kodedækning. For at få Jest-dækningsrapporten, Der er konfiguration skal tilføjes i pakke.json fil.

Tilføj konfigurationen som vist nedenfor:

'jest': { 'collectCoverage':true }

Når denne konfiguration er udført, kan du prøve at køre testene ved hjælp af kommandoen 'Over havniveau test' , og du kan se oplysningerne om kodedækning lige under testudførelsesresultaterne som vist nedenfor.

kode dækning detaljer

Videovejledning: Jest-dækning og generering af HTML-rapporter

Konklusion

I denne Jest-vejledning gik vi gennem det grundlæggende i Jest-rammen. Vi lærte at installere Jest-rammen og så, hvordan den kan bruges til at teste enkle Javascript-filer.

Vi undersøgte også de forskellige typer matchere, der blev understøttet af Jest, og også omfattede Html-journalister og kodedækningsrapporter.

NÆSTE vejledning

Anbefalet læsning

^