Hvis du vil vide, hvordan du tester reagerer, er du på det rigtige sted. Kender du virkelig din kode gør hvad det skal gøre? Har du testet det i browseren? Hvad hvis du ikke har det, eller du kan ikke teste alt, og det bryder i produktionen?
Et testbibliotek er en gruppe af forsyningsselskaber bruger til at skrive individuelle test på applikationskomponenter. Nogle af de principielle dele af en test er:
Beskrivelse:
beskriver, hvad testen handler om
Brug / render:
bruger komponenten i et miljø, hvor det kan testes
Mocking:
opretter foregive funktioner, så du kan tjekke dine antagelser
I løbet af denne artikel skal jeg udforske nogle eksempler fra reaktionstestbiblioteket for at hjælpe dig med at komme i gang med denne værdifulde måde at forbedre robustheden af din kodeudgang, samt at sikre, at din kode ikke kaster op eventuelle ubehagelige overraskelser, når det går i produktion.
Ønsker du mere nyttige ressourcer? Her er en rundown af de bedste
Web Design Tools.
omkring det hjælper dig med at arbejde smartere. Eller hvis du har brug for en ny maskine, prøv denne runde af
Bedste bærbare computere til programmering
. Eller hvis du bygger et nyt websted, har du måske brug for en stor
Website Builder.
.
01. Kom godt i gang med React Testing Library
Jeg skal bruge Create-React-app til denne demo, fordi den allerede kommer forudkonfigureret med testbiblioteket. Hvis du bruger Gatsby eller en brugerdefineret installation, kan der være en vis konfiguration, du skal køre igennem, før du begynder at bruge testbiblioteket.
For at begynde, lad os oprette en ny app. Hvis du har en nylig version af node.js allerede, kan du køre følgende kommando uden at installere noget andet globalt:
npx create-react-app netmag-javascript-testing
02. Bestem hvad du skal teste
Forestil dig, at vi har en simpel komponent, siger en knap med en vis stat. Hvad er nogle af de ting, der har brug for test i en komponent som denne?
●
Udseendet af komponenten:
Vi ønsker ikke noget at ændre sig uventet, efter at vi har skrevet vores komponent. Så vi skal skrive en snapshot test for at fange, hvordan det gør det. Så hvis noget ændres, vil vi se det hurtigt uden en manuel eller visuel test. Dette er fantastisk til komponenter, der består af mange mindre komponenter: Du kan se hurtigt, når (og hvor) dets udseende er blevet påvirket.
●
De forskellige grene, der gør:
Fordi vi kunne have to eller flere forskellige udgange, skal vi teste det, der gør dem alle korrekt, ikke kun en af dem. Så vi skal simulere et klikhændelse og have en anden snapshot-test for den måde, det gør, efter at denne gren af kode er kørt.
●
De funktioner bliver kaldt som forventet:
Vi ønsker at sikre, at koden vi skrev til at ringe til en anden funktion, fungerer som vi antager, at det vil. Men da den funktion er en ekstern afhængighed, vil vi ikke teste det her. Vores test skal kun indkapslere den funktionalitet, vi vil have dem til.
Lad os skrive vores første test. Opret en ny fil kaldet
Mycomponent.unit.test.js.
i samme mappe som komponent. Ved at tilføje test.js i slutningen, vil det automatisk blive plukket af testbiblioteket. Indholdet af denne fil er nedenfor:
Import reagerer fra 'reagere'
Import {render} fra '@ test-bibliotek / reagere'
importere mycomponent fra './mycomponent'
Beskriv ('The & Lt; MyComponent / & GT;', () = & gt; {
// TESTS GÅ HER
})
Det første, jeg vil henlede opmærksomheden på, er den
beskrive()
Funktion, som tager to argumenter: Den første er en streng, som du kan bruge til bedre at beskrive - som en streng af tekst - hvad din test skal gøre. I vores tilfælde har vi simpelthen sagt, at det skulle gøre. Dette er meget nyttigt, når en anden ser på din kode, eller du skal huske, hvad du gjorde på et senere tidspunkt. At skrive gode beskrive udsagn er en form for kodedokumentation og en anden god grund til at skrive tests.
Det andet argument er dine test. Det
beskrive()
Funktionen vil køre alle disse tests en efter den anden.
04. Brug cleanup funktion
Lad os introducere en hjælperfunktion, der hedder
forudgående ()
. Vi skal bruge dette, fordi vi hver gang vi gør noget med komponenten, ønsker vi en frisk kopi uden de rekvisitter, vi tidligere havde gået til den, der stadig eksisterede i komponenten. Eller vi skal muligvis genskabe komponenten:
forudgående ()
Gør det for os, og vi kan videregive det oprydningsfunktionen.
I dette trin skal vi 'mount' vores komponent (eller gøre det).
Beskriv ('komponenten skal gøre', () = & gt; {
PREADECH (oprydning)
det ('Giver med grundlæggende rekvisitter', () = & gt; {
gøre (& lt myComponent / & gt;)
})
}
Denne render giver os adgang til alle de udførte egenskaber af den kompilerede komponent. Det kan være godt at slippe dette ind i en
console.log ()
Så du kan se tydeligere, hvad det gør.
Hvis du gør det, vil du se, at der er et par nyttige egenskaber, vi kan udnytte her. Jeg vil lave en påstand (foretag en testbar erklæring) og test den ved at udtrække beholderen. Beholderen 'indeholder' DOM-noderne (hele HTML'en), der er forbundet med komponenten.
Nu har vi adgang til beholderen, hvordan fortæller jeg, at det er gjort efter min påstand? Ved at tilføje en snapshot test.
Tænk på et øjebliksbillede som et fotografi. Det tager et øjebliksbillede af vores komponent på et bestemt tidspunkt. Så når vi foretager ændringer til koden, kan vi se, om det stadig matcher det originale øjebliksbillede. Hvis det gør det, kan vi være sikre på, at intet har ændret sig i komponenten. Men hvis det ikke gør det, kan vi have afdækket et problem, der stammer fra en anden komponent, en, som vi måske ikke har set tidligere:
06. Testegenskaber.
Rekvisitter eller egenskaber af en komponent kan også testes med snapshots. Testning af de forskellige rekvisitter, du giver til din komponent, vil give dig større dækning og tillid. Du ved aldrig, hvornår et krav vil betyde, at dine komponents rekvisitter er refactored, og den endelige produktion vil ændre sig.
Vi definerer egenskaberne i et objekt og derefter bruger spred operatøren (tre prikker efterfulgt af objektnavnet:
... letpropertier)
Fordi vi kun kan passere et argument i, når vi gør denne vej. Det er også nyttigt at se, hvilke egenskaber du passerer i isolation:
Forestil dig, at vores komponent har en knap, og du vil sørge for, at der sker noget, når knappen klikkes. Du tror måske, at du vil teste tilstanden af ansøgningen; For eksempel kan du blive fristet til at teste, at staten har opdateret. Det er dog ikke genstanden for disse tests.
Dette introducerer os til et vigtigt koncept i at bruge et testbibliotek: Vi er ikke her for at teste staten eller den måde, vores komponent fungerer på. Vi er her for at teste, hvordan folk skal bruge komponenten, og at det opfylder deres forventninger.
Så hvorvidt staten har opdateret, er uvæsentlig; Det, vi vil teste, er, hvad resultatet af den knap tryk på er.
Lad os forestille os, at vi tester resultatet af en funktion, der ændrer UI fra mørk tilstand til lys tilstand. Her er komponenten:
Har du bemærket, at vi tilføjede den nye egenskab
Data-testID.
til knappen? Sådan kan du teste det. Først importer en ny funktion, brandevent fra testbiblioteket:
Import {oprydning,
brandevent,
render.
} fra '@ test-bibliotek / reagere'
Vi kan bruge den funktion til at teste, der er ændringer i UI, og at disse ændringer er konsekvente:
Dette er fantastisk: vi behøver ikke manuelt gå til webstedet og kigge rundt, og klik derefter på knappen og kigge rundt om en anden gang - hvornår du måske behøver, vil du sandsynligvis glemme eller savne noget! Nu kan vi have tillid til, at vi i betragtning af samme input kan forvente det samme output i vores komponent.
Når det kommer til test ID'er, kan jeg personligt ikke lide at bruge
Data-testID.
at finde noget i dommen. Trods alt er formålet med testene at efterligne, hvad brugeren gør og for at teste, hvad der sker, når de gør det.
Data-testID.
Føles som en smule snyde - selvom data-testider sandsynligvis vil komme til nytte til din QA-ingeniør (se boxout rollen som kvalitetssikringsingeniører).
I stedet kunne vi bruge
getbytext ()
og passere i teksten til vores knap. Denne metode ville være meget mere adfærdsspecifik.
08. Mock og spionér funktionen
Nogle gange skal vi måske teste et opkald til en funktion, men den funktion er uden for testens omfang. For eksempel har jeg et særskilt modul, der indeholder en funktion, der beregner værdien af PI til et bestemt antal decimaler.
Jeg behøver ikke at teste, hvad resultatet af det pågældende modul er. Jeg skal teste, at min funktion gøres som forventet. For mere information om hvorfor dette er, se venligst boksenheden og integrationstestene. I dette tilfælde kunne vi 'mock', der fungerer:
Funktionen
tohavebeencalledtimes ()
er en af de mange hjælperfunktioner i testbiblioteket, der gør det muligt for os
at teste udgangen af funktioner. Dette lader os ikke kun kun omfatte vores test kun til det modul, vi ønsker at teste, men også betyder, at vi kan spionere på eller se, hvad vores funktion gør, når det kalder den funktion.
Skrivningstest kan virke lidt skræmmende at starte med. Jeg håber, at denne tutorial har givet dig lidt mere tillid til at prøve det. Da jeg begyndte at skrive tests for mine applikationer, kan jeg virkelig ikke gå tilbage: Jeg kan hvile lettere, vel vidende, at jeg efterlader en meget bedre arv for dem, der vil bruge mit arbejde i fremtiden.
Husk, hvis du bygger et komplekst websted, vil du gerne have din
Web Hosting.
Service spot på. Og hvis dette websted sandsynligvis vil indeholde mange aktiver, lagre dem i pålidelige
Sky lagring
er afgørende.
Dette indhold opstod oprindeligt i
Net Magazine.
. Læs mere af vores
Webdesign artikler her
.
