Få din NPM-pakke dækket med Jest og Codecov ☂️

Introduktion

Lad os tale om kodedækning, og hvordan du kan lave dækningsrapporter i Jest og Codecov.

Hvad er kodedækning?

Hvis du er fortrolig med testning. Du kender dets hovedformål:

Tests giver udviklerne frihed til at foretage ændringer og refaktorkode med tillid til, at alt skal fungere fint, så længe alle de automatiske tests vil bestå.

Men hvis enhedstestene ikke dækker alle scenarier, er der stadig en chance for, at dine ændringer kan bryde noget. Derfor har vi kodedækning: målingen for, hvor meget af kodebasen, der er dækket af automatiserede tests.

Uden kodedækningsanalyse har dine tests mistet deres hovedformål.

Dette er vigtigt, når dit projekt vokser, og mange udviklere er involveret.

✅ Vi kan opretholde kvaliteten af ​​vores test, når ny kode tilføjes.

Vi får en dybere forståelse af eksisterende tests.

✅ Giv udviklere tillid til at refaktorkode uden at bekymre sig om at bryde ting.

✅ Vi kan fange uprøvede strømme, før de skaber problemer.

Ok, nu hvor vi ved, hvad kodedækning er, lad os implementere det! ?

Forudsætninger

For at holde denne artikel kort og kortfattet starter jeg her: Trin for trin Bygning og udgivelse og NPM Typescript-pakke.

Hvad er der gjort indtil videre:

✅ Opsæt en grundlæggende NPM-pakke

✅ Tilføj test med Jest

Skriv en grundlæggende test

Hvis du allerede har konfigureret dit projekt med Jest, er du klar til at gå. ? Hvis ikke, anbefaler jeg, at du kloner eller forkaster lageret til denne artikel for at starte fra et grundlæggende NPM-pakkefundament:

git clone [email protected]:caki0915/my-awesome-greeter.git && cd my-awesome-greeter &&git checkout basic-package && npm install

Hvis du er interesseret i, hvordan man bygger NPM-pakker, anbefaler jeg min tidligere artikel her.

Okay, nu når alt er klar, lad os gå!

Opret dækningsrapporter i Jest

Det er nemt at oprette dækningsrapporter i Jest. Bare tilføj denne linje i din jest-konfigurationsfil:

"collectCoverage":true

collectCoverage: Bør indstilles til sand, hvis du vil have, at spøg skal indsamle dækningsoplysninger, mens du kører dine tests. (Testene kører lidt langsommere, så det er falsk som standard.)

Sørg for, at din scriptkommando testi din package.json- fil kører Jest med din konfigurationsfil.

“test”: “jest --config jestconfig.json”

I orden! Løbnpm testi din terminal, og voilà! Du får en ny mappe med kodedækningsfiler genereret til dig.

Glem ikke at tilføje dækningsmappen til .gitignore. Vi ønsker ikke build-filer i vores lager. ?

Lav noget nyttigt af dine rapporter

Okay, det er sejt, vi genererede en mappe med nogle filer, men hvad skal vi gøre med disse oplysninger? ?

Først og fremmest kan du manuelt gennemgå dækningsrapporten på en genereret HTML-side. Åbn /coverage/lcov-report/index.htmli din browser:

Ok, det er rart, men har vi virkelig brug for at manuelt gennemgå rapporterne på hver build ??

Nej, det skal du ikke. Du bør offentliggøre rapporterne online for at gøre noget nyttigt af dem. I denne artikel skal vi bruge et dækningsrapporteringsværktøj kaldet codecov.io.

Codecov er gratis til open source-projekter. Det tager kodedækningsrapporter til det næste niveau. Med Codecov kan vi også automatisk generere badges og køre det på kontinuerlige integrationsbygninger. (Mere om det senere.)

Tilmeld dig //codecov.io/ og følg guiden for at oprette forbindelse til Github og dit lager. Derefter skal du ende med at se en skærm som denne:

Pæn! Indtil videre er denne side tom, da du endnu ikke har uploadet nogen rapporter, så lad os ordne det. Kør i terminalen:

npm install --save-dev codecov

Normalt vil du uploade rapporter i slutningen af ​​en kontinuerlig integrationsbygning, men for denne artikel uploader vi rapporterne fra vores lokale maskine. I terminalkørslen:

(Udskift med dit depot-token fundet i codec ov.io)

./node_modules/.bin/codecov --token=""

Succes! Nu kan du se din rapport online i codecov.io.? ?

//codecov.io/gh///

Føj et badge til din README.md

Badges er vigtige, især for NPM-pakker. Det giver det første indtryk af høj kvalitet, når du ser et smukt kodedækningsbadge i npmjs og Github.

På din README.md tilføj følgende linje:

(Udskift og med dine oplysninger)

[![Codecov Coverage](//img.shields.io/codecov/c/github///
    
     .svg?style=flat-square)](//codecov.io/gh///)
    

I mit tilfælde vil det se sådan ud:

[![Codecov Coverage](//img.shields.io/codecov/c/github/caki0915/my-awesome-greeter/coverage.svg?style=flat-square)](//codecov.io/gh/caki0915/my-awesome-greeter/)

Fantastisk! Nu kan du vise resten af ​​verden, at du bruger enhedstest- og kodedækningsrapporter! ? ?

Resumé

Hvis du bruger tests, er kodedækningsrapportering et must, og den skal køre hver gang du foretager en pull-anmodning eller foretager ændringer i dine filialer.

Du kan finde min NPM-startpakke her på Github.

Det er et uddannelsesmæssigt grundlag for udvikling af bedste praksis NPM-pakke. Kommentarer, gafler og PR'er er velkomne. ?

Hvad er det næste?

Hvis du endnu ikke bruger kontinuerlig integration (CI), er det tid til at konfigurere det.

I min næste artikel skal jeg dække kontinuerlig integration med kodedækning for NPM-pakker.

Hvis du finder denne artikel nyttig, bedes du give den nogle klapper og følge mig for flere artikler om udvikling.

Held og lykke med at bygge din fantastiske pakke! ? ?