Hvis du vil vite hvordan du skal reagere, er du på rett sted. Vet du virkelig at koden din gjør hva den skal gjøre? Har du testet den i nettleseren? Hva om du ikke har det, eller du ikke kan teste alt, og det går i produksjon?
Et testbibliotek er en gruppe av verktøyutviklere som bruker til å skrive individuelle tester på applikasjonskomponenter. Noen av de prinsippdelene av en test er:
Beskrivelse:
beskriver hva testen handler om
Bruk / gjengivelse:
bruker komponenten i et miljø der det kan testes
Gjøre narr av:
skaper late som funksjoner, slik at du kan sjekke antagelsene dine
I løpet av denne artikkelen skal jeg utforske noen eksempler fra React Testing Library for å hjelpe deg med å komme i gang med denne verdifulle måten å forbedre robustheten til koden din, samt å sikre at koden ikke kaster opp noen ekkel overraskelser når det går i produksjon.
Ønsker du flere nyttige ressurser? Her er en rundown av det beste
Webdesignverktøy
rundt som hjelper deg med å jobbe smartere. Eller hvis du trenger en ny maskin, prøv denne runden av
Beste bærbare datamaskiner for programmering
. Eller hvis du bygger et nytt nettsted, kan det hende du trenger en stor
Nettstedbygger
.
01. Kom i gang med React Testing Library
Jeg skal bruke Create-React-App for denne demoen fordi den allerede kommer forhåndskonfigurert med testbiblioteket. Hvis du bruker Gatsby eller et tilpasset oppsett, kan det være noen konfigurasjon du må løpe gjennom før du begynner å bruke testbiblioteket.
For å begynne, la oss lage en ny app. Hvis du allerede har en nylig versjon av node.js, kan du kjøre følgende kommando uten å installere noe annet globalt:
npx create-react-app netmag-javascript-testing
02. Bestem hva du skal teste
Tenk deg at vi har en enkel komponent, si en knapp med noen stat. Hva er noen av de tingene som trenger testing i en komponent som dette?
●
Utseendet til komponenten:
Vi vil ikke ha noe å endre uventet etter at vi har skrevet vår komponent. Så vi skal skrive en øyeblikksbilde for å fange hvordan det gjør det. Så, hvis noe endres, vil vi se det raskt uten en manuell eller visuell test. Dette er flott for komponenter som består av mange mindre komponenter: Du kan se raskt når (og hvor) utseendet har blitt påvirket.
●
De forskjellige grenene som gjør:
Fordi vi kunne ha to eller flere forskjellige utganger, må vi teste det som gjør dem alle riktig, ikke bare en av dem. Så vi må simulere et klikkhendelse og ha en annen stillbilde test for måten den gjør etter denne grenen av koden er kjørt.
●
At funksjonene blir kalt som forventet:
Vi ønsker å sikre at koden vi skrev for å ringe en annen funksjon, fungerer som vi antar at det vil. Men siden den funksjonen er en ekstern avhengighet, vil vi ikke teste det her. Våre tester bør bare innkapslere funksjonaliteten vi vil ha dem til.
La oss skrive vår første test. Opprett en ny fil kalt
MyComponent.unit.test.js.
i samme mappe som komponenten. Ved å legge til test.js på slutten, blir den automatisk valgt av testbiblioteket. Innholdet i den filen er under:
Importen reagerer fra "React"
Importer {Render} fra '@ Testing-Library / Reaging'
importere min komponent fra './mycomponent'
Beskriv ('The & LT; MyComponent / & GT;', () = & gt; {
// tester går her
})
Det første jeg vil trekke oppmerksomheten på, er
beskrive()
Funksjon, som tar to argumenter: Den første er en streng som du kan bruke til å bedre beskrive - som en tekststreng - hva testen din skal gjøre. I vårt tilfelle har vi bare sagt at det skal gjengi. Dette er veldig nyttig når noen andre ser på koden din, eller du må huske hva du gjorde på et senere tidspunkt. Skrive godt beskriver erklæringer er en form for kodedokumentasjon og en annen god grunn til å skrive tester.
Det andre argumentet er testene dine. De
beskrive()
Funksjonen vil kjøre alle disse testene en etter den andre.
04. Bruk opprydding-funksjonen
La oss introdusere en hjelperfunksjon som heter
peopeach ()
. Vi må bruke dette fordi hver gang vi gjør noe med komponenten, vil vi ha en ny kopi uten rekvisitter vi tidligere hadde gått til den fremdeles eksisterende i komponenten. Eller vi må kanskje re-gjøre komponenten på:
peopeach ()
Gjør det for oss, og vi kan sende den oppryddingfunksjonen.
I dette trinnet skal vi "montere" vår komponent (eller gjøre det).
Beskriv ('Komponenten skal gjengi', () = & gt; {
Trevid (opprydding)
det ("gjør det med grunnleggende rekvisitter", () = & gt; {
Render (& lt; MyComponent / & GT;)
})
}
Denne gjengen gir oss tilgang til alle de gjengitte egenskapene til den kompilerte komponenten. Det kan være fint å slippe dette til en
konsoll.log ()
Så du kan se tydeligere hva det gjør.
Hvis du gjør det, ser du at det er noen nyttige egenskaper vi kan dra nytte av her. Jeg skal gjøre en påstand (gjør en testbar erklæring) og teste den ved å trekke ut beholderen. Beholderen 'inneholder' DOM noder (alle HTML) assosiert med komponenten.
Nå har vi tilgang til beholderen, hvordan forteller jeg at den er gjengitt i henhold til min påstand? Ved å legge til en stillbilde test.
Tenk på et øyeblikksbilde som et fotografi. Det tar et øyeblikksbilde av vår komponent på et bestemt tidspunkt. Så når vi gjør endringer i koden, kan vi se om det fortsatt samsvarer med det opprinnelige stillbildet. Hvis det gjør det, kan vi være sikre på at ingenting har endret seg i komponenten. Men hvis det ikke gjør det, kan vi imidlertid ha avdekket et problem som oppsto i en annen komponent, en som vi kanskje ikke har oppdaget tidligere:
06. Testegenskaper
Rekvisitter, eller egenskaper, av en komponent kan også testes med stillbilder. Testing av de forskjellige rekvisitaene du gir til komponenten din, gir deg større dekning og tillit. Du vet aldri når et krav skal bety at komponentens rekvisitter blir refactored og den endelige produksjonen vil endres.
Vi definerer egenskapene i et objekt og bruker deretter spredningsoperatøren (tre prikker etterfulgt av objektnavnet:
... LightProperties)
Fordi vi bare kan passere ett argument i når vi gjør denne måten. Det er også nyttig å se hvilke egenskaper du passerer i isolasjon:
Tenk deg at komponenten har en knapp, og du vil sørge for at noe skjer når knappen klikkes. Du tror kanskje at du vil teste søknadens tilstand; For eksempel kan du bli fristet til å teste at staten har oppdatert. Men det er ikke gjenstanden for disse testene.
Dette introduserer oss til et viktig konsept i å bruke et testbibliotek: vi er ikke her for å teste staten eller måten vår komponent fungerer. Vi er her for å teste hvordan folk skal bruke komponenten, og at den oppfyller deres forventninger.
Så om staten har oppdatert, er ubetydelig; Det vi ønsker å teste er hva utfallet av den knappen trykker på er.
La oss forestille oss at vi tester utfallet av en funksjon som endrer UI fra mørk modus til lysmodus. Her er komponenten:
La du merke til at vi la til den nye attributtet
data-testid.
til knappen? Slik kan du teste det. Importer først en ny funksjon, FireEvent fra testbiblioteket:
Importer {opprydding,
fireevent,
gjengi
} fra '@ testing-bibliotek / reagere'
Vi kan bruke den funksjonen for å teste at det er endringer i brukergrensesnittet, og at disse endringene er konsistente:
Dette er flott: vi trenger ikke å manuelt gå til nettstedet og se deg rundt, deretter klikk på knappen og se deg rundt en gang til - under hvilken du kanskje innrømmer, vil du sannsynligvis glemme eller savne noe! Nå kan vi ha tillit til at vi, gitt samme inngang, kan vi forvente samme utgang i vår komponent.
Når det gjelder test-IDer, misliker jeg personlig å bruke
data-testid.
å finne noe i dommen. Tross alt er gjenstand for tester å etterligne hva brukeren gjør og for å teste hva som skjer når de gjør det.
data-testid.
Føles som en bit av en juks - selv om datatestids vil trolig komme til nytte for din QA-ingeniør (se boksen av rollen som kvalitetssikringsingeniører).
I stedet kunne vi bruke
GetbyText ()
og pass i teksten til vår knapp. Denne metoden ville være mye mer oppførselsspesifikke.
08. mock og spionere funksjonen
Noen ganger må vi kanskje teste et anrop til en funksjon, men den funksjonen er utenfor testens omfang. For eksempel har jeg en egen modul som inneholder en funksjon som beregner verdien av PI til et visst antall desimaler.
Jeg trenger ikke å teste hva resultatet av den modulen er. Jeg må teste at min funksjon gjør det som forventet. For mer informasjon om hvorfor dette er, vennligst se boksenheten og integreringstestene. I dette tilfellet kunne vi 'mocke' den funksjonen:
Funksjonen
tohavebeencalledtimes ()
er en av de mange hjelperfunksjonene i testbiblioteket som gjør det mulig for oss
for å teste utgangen av funksjoner. Dette lar oss ikke bare omfatte våre tester bare til modulen vi ønsker å teste, men betyr også at vi kan "spionere" på eller se hva vår funksjon gjør når den ringer den funksjonen.
Skrive tester kan virke som en liten skremmende å begynne med. Jeg håper denne opplæringen har gitt deg litt mer tillit til å prøve det. Siden jeg begynte å skrive tester for mine applikasjoner, kan jeg virkelig ikke gå tilbake: Jeg kan hvile lettere, vite at jeg forlater en mye bedre arv for de som vil bruke arbeidet mitt i fremtiden.
Husk at hvis du bygger et komplekst nettsted, vil du få din
Web Hosting.
Service spot on. Og hvis dette nettstedet sannsynligvis vil inneholde mange eiendeler, lagre dem i pålitelig
skylagring
er avgjørende.
Dette innholdet opprinnelig oppstod i
Net Magazine.
. Les mer av vår
Webdesign artikler her
.
I denne opplæringen viser vi deg hvordan du lager en feiltekst effekt. Spesielle effekter og animasjoner kan hjelpe nettsteder skiller seg ut, og skaper en umiddelbar innvirkning på brukere..
Sketching.
er et enkelt, men kraftig verktøy for alle som er involvert i å lage digitale produkter. Penner, papir og whiteboards er lett tilgjengelige i hvert kontor; Det er ikk..
En av mine veiledere sa en gang om at hvis han var låst opp i fengsel for resten av livet, med ingenting annet enn en penn og papir, ville han ikke skrive noe, bortsett fra kanskje "farvel" ..
