Kaip išbandyti „React“ svetaines ir programas

Bandymo reakcija
(Vaizdo kreditas: ateitis)

Jei norite sužinoti, kaip išbandyti „React“, esate tinkamoje vietoje. Ar tikrai žinote, kad jūsų kodas daro tai, ką jis turėtų daryti? Ar išbandėte jį naršyklėje? Ką daryti, jei to nepadarėte arba negalite visko išbandyti, o tai sugenda gamyboje?

Testavimo biblioteka yra grupė paslaugų programų, kurias kūrėjai naudoja rašydami atskirus programos komponentų testus. Kai kurios pagrindinės testo dalys yra:

  • Apibūdinimas: aprašoma, kas yra testas
  • Naudojimas / pateikimas: komponentą naudoja aplinkoje, kur jį galima išbandyti
  • Pasityčiojimas: sukuria apsimestines funkcijas, kad galėtumėte patikrinti savo prielaidas

Per šį straipsnį aš išnagrinėsiu keletą „React Testing Library“ pavyzdžių, kad galėčiau pradėti naudoti šį vertingą būdą, kaip pagerinti kodo išvesties patikimumą ir užtikrinti, kad kodas neišmestų. bet kokie nemalonūs netikėtumai, kai tik jis bus pradėtas gaminti.



Norite daugiau naudingų išteklių? Čia aprašyta geriausių interneto dizaino įrankiai tai padės jums dirbti protingiau. Arba, jei jums reikia naujos mašinos, išbandykite šį „Roundup“ geriausi nešiojamieji kompiuteriai programavimui . Arba, jei kuriate naują svetainę, jums gali prireikti puikios svetainių kūrėjas .

01. Pradėkite naudoti „React“ testavimo biblioteką

Šiai demonstracinei versijai naudosiu „create-react-app“, nes ji jau yra iš anksto sukonfigūruota kartu su testavimo biblioteka. Jei naudojate „Gatsby“ arba pasirinktinę sąranką, gali būti, kad turite atlikti tam tikrą konfigūraciją, prieš pradėdami naudoti bandymų biblioteką.

Norėdami pradėti, sukurkime naują programą. Jei jau turite naujausią „Node.js“ versiją, galite paleisti šią komandą visame pasaulyje neįdiegę nieko:

npx create-react-app netmag-javascript-testing

02. Nuspręskite, ką išbandyti

Įsivaizduokite, kad turime paprastą komponentą, tarkim, mygtuką su kokia nors būsena. Kokius dalykus reikia išbandyti tokiame komponente?

Komponento išvaizda:

Nenorime, kad parašę savo komponentą viskas netikėtai pasikeistų. Taigi mes parašysime momentinių nuotraukų testą, kad užfiksuotume, kaip jis pateikiamas. Tada, jei kas pasikeis, tai greitai pamatysime be rankinio ar vizualinio testo. Tai puikiai tinka komponentams, kuriuos sudaro daugybė mažesnių komponentų: galite greitai pamatyti, kada (ir kur) paveikta jo išvaizda.

Skirtingos šakos, kurios pateikiamos:

Kadangi galėtume turėti du ar daugiau skirtingų išėjimų, turime išbandyti, ar jie teisingai perteikia visus, o ne tik vieną. Taigi turime imituoti paspaudimo įvykį ir atlikti dar vieną momentinių vaizdų testą, kaip jis pateikiamas paleidus šią kodo šaką.

Šios funkcijos vadinamos kaip tikėtasi:

Norime užtikrinti, kad kodas, kurį parašėme norėdami paskambinti kitai funkcijai, veiktų taip, kaip manome, kad jis veiks. Bet kadangi ši funkcija yra išorinė priklausomybė, mes nenorime to čia išbandyti. Mūsų testai turėtų apimti tik tas funkcijas, kurių mes norime.

03. Parašykite savo pirmąjį testą

Bandymo reakcija

(Vaizdas: Benas Readas)

Parašykime savo pirmąjį testą. Sukurkite naują failą pavadinimu „MyComponent.unit.test.js“ tame pačiame aplanke kaip ir komponentas. Pabaigoje pridėjus test.js, jį automatiškai parinks testavimo biblioteka. Šio failo turinys yra žemiau:

import React from ‘react’ import { render } from ‘@testing-library/react’ import MyComponent from ‘./MyComponent’ describe(‘the ’, () => { // tests go here })

Pirmas dalykas, į kurį noriu atkreipti jūsų dėmesį, yra apibūdinti () funkcija, kuriai reikalingi du argumentai: pirmasis yra eilutė, kurią galite naudoti norėdami geriau apibūdinti savo testą - kaip teksto eilutę. Mūsų atveju mes tiesiog pasakėme, kad tai turėtų pasirodyti. Tai labai naudinga, kai kažkas kitas žiūri į jūsų kodą arba turite prisiminti, ką darėte vėliau. Gerai apibūdinančių teiginių rašymas yra kodo dokumentacijos forma ir dar viena gera priežastis rašyti testus.

Antras argumentas yra jūsų bandymai. apibūdinti () funkcija atliks visus šiuos bandymus vienas po kito.

04. Naudokite valymo funkciją

Pristatysime pagalbininko funkciją, vadinamą prieš kiekvieną () . Turime tai naudoti, nes kiekvieną kartą, kai ką nors darome su komponentu, norime naujos kopijos be rekvizitų, kuriuos anksčiau buvome perdavę, vis dar esančius komponente. Arba mums gali reikėti iš naujo pateikti komponentą: prieš kiekvieną () tai daro už mus ir mes galime perduoti jai valymo funkciją.

import { render, cleanup } from ‘@testing-library/react’ ... describe(‘the component should render’, () => { beforeEach(cleanup) }

05. Parašykite momentinių nuotraukų testą

Bandymo reakcija

(Vaizdas: Benas Readas)

Šiame žingsnyje mes ketiname „prijungti“ savo komponentą (arba jį perteikti).

describe(‘the component should render’, () => { beforeEach(cleanup) it(‘renders with basic props’, () => { render() }) }

Šis atvaizdavimas suteikia mums prieigą prie visų kompiliuoto komponento atvaizduotų savybių. Gali būti gerai, jei tai numestumėte į console.log () kad galėtumėte aiškiau pamatyti, ką jis daro.
Jei tai padarysite, pamatysite, kad yra keletas naudingų savybių, kuriomis galime pasinaudoti čia. Aš ketinu pateikti tvirtinimą (pateikti patikrinamą deklaraciją) ir išbandyti jį ištraukdamas konteinerį. Sudėtiniame rodinyje „yra“ DOM mazgai (visi HTML), susieti su komponentu.

it(‘renders with basic props’, () => { const { container } = render() })

Dabar mes turime prieigą prie konteinerio, kaip man pasakyti, kad jis pateiktas pagal mano tvirtinimą? Pridedant momentinių nuotraukų testą.

Pagalvokite apie momentinę nuotrauką kaip apie nuotrauką. Tai daro mūsų komponento momentinę nuotrauką konkrečiu laiko momentu. Tada, kai pakeisime kodą, galime pamatyti, ar jis vis dar atitinka pradinį momentinį vaizdą. Jei taip, galime būti tikri, kad komponentas nieko nepasikeitė. Tačiau jei taip nėra, galbūt aptikome problemą, kilusią iš kito komponento, kurio galbūt anksčiau nepastebėjome:

06. Bandymo savybės

Komponento atramas ar savybes taip pat galima patikrinti naudojant momentines nuotraukas. Išbandžius įvairias jūsų komponentui suteiktas rekvizitus, gausite daugiau aprėpties ir pasitikėjimo savimi. Niekada negali žinoti, kada reikalavimas reiškia, kad tavo komponentų rekvizitai bus pertvarkyti ir galutinis rezultatas pasikeis.

Prie failo viršaus pridėkite šį objektą:

geriausias taškas ir filmavimas 2014 m. vaizdo įrašui
const lightProperties = { backgroundColour: ‘white’, textColour: ‘darkblue’ }

Apibrėžiame objekto ypatybes ir tada naudojame sklaidos operatorių (trys taškai po objekto pavadinimo: ... šviesos savybės) nes taip pateikdami galime pateikti tik vieną argumentą. Taip pat naudinga pamatyti, kokias savybes perduodate atskirai:

it(‘renders with basic props’, () => { const { container } = render( ) expect(container).toMatchSnapshot() }) it(‘renders with the light version props’, () => { const { container } = render( ) expect(container).toMatchSnapshot() })

07. Patikrinkite vartotojo sąsajos pokyčius

Įsivaizduokite, kad mūsų komponentas turi mygtuką ir norite įsitikinti, kad spustelėjus mygtuką kažkas atsitiks. Galite pagalvoti, kad norite patikrinti programos būseną; pavyzdžiui, galite susigundyti patikrinti, ar būsena atnaujinta. Tačiau tai nėra šių bandymų objektas.

Tai supažindina mus su svarbia bandymų bibliotekos naudojimo koncepcija: mes čia ne tam, kad išbandytume būseną ar mūsų komponento veikimą. Mes norime išbandyti, kaip žmonės ketina naudoti komponentą ir ar jis atitinka jų lūkesčius.

Taigi nesvarbu, ar valstybė atnaujino, ar ne; ką norime išbandyti, yra to mygtuko paspaudimo rezultatas.

Įsivaizduokime, kad mes išbandome funkcijos, pakeičiančios vartotojo sąsają iš tamsaus režimo į šviesų, rezultatus. Štai komponentas:

const modeToggle = () => { const [mode, setMode] = useState[‘light’] const toggleTheme = () => { if (theme === ‘light’) { setTheme(‘dark’) } else { setTheme(‘light’) } } return ( Toggle mode ) }

Pirma, mes turėtume pridėti bandymo ID ant mygtuko, kad galėtume jį rasti pateikimo etape:

return ( Toggle mode

Ar pastebėjote, kad pridėjome naują atributą duomenų testai prie mygtuko? Štai kaip galite tai išbandyti. Pirmiausia iš bandymų bibliotekos importuokite naują funkciją „fireEvent“:

import { cleanup, fireEvent, render } from ‘@testing-library/react’

Tą funkciją galime naudoti norėdami patikrinti, ar yra vartotojo sąsajos pokyčių ir ar šie pakeitimai yra nuoseklūs:

it(‘renders with basic props’, () => { const { container } = render( ) expect(container).toMatchSnapshot() }) it(‘renders the light UI on click’, () => { const { container, getByTestId } = render() fireEvent.click(getByTestId(‘mode-toggle’)) expect(container).toMatchSnapshot() })

Tai puiku: mums nereikia rankiniu būdu eiti į svetainę ir apsižvalgyti, tada spustelėkite mygtuką ir antrą kartą apsižvalgykite - per tą laiką, jūs galite pripažinti, greičiausiai ką nors pamiršite arba praleidote! Dabar galime būti tikri, kad, turėdami tą patį indėlį, galime tikėtis to paties rezultato savo komponente.

Kalbant apie bandomuosius dokumentus, man asmeniškai nepatinka naudoti duomenų testai ką nors rasti DOM. Galų gale, bandymų tikslas yra imituoti tai, ką daro vartotojas, ir išbandyti, kas atsitinka, kai jis daro. duomenų testai jaučiasi šiek tiek apgauti - nors duomenų testai greičiausiai pravers jūsų kokybės užtikrinimo inžinieriui (žr. „Kokybės užtikrinimo inžinierių vaidmuo“).

Vietoj to mes galėtume naudoti getByText () ir perduokite mūsų mygtuko tekstą. Šis metodas būtų daug specifiškesnis elgesiui.

08. Pajuok ir šnipėk funkciją

Kartais mums gali tekti išbandyti iškvietimą funkcijai, tačiau ši funkcija nepatenka į testo taikymo sritį. Pavyzdžiui, turiu atskirą modulį, kuriame yra funkcija, apskaičiuojanti pi vertę iki tam tikro skaičiaus dešimtainių skaičių.

Man nereikia tikrinti, koks yra to modulio rezultatas. Turiu patikrinti, ar mano funkcija veikia taip, kaip tikėtasi. Norėdami gauti daugiau informacijos, kodėl taip yra, žr. Langelį „Vieneto ir integracijos testai“. Tokiu atveju galėtume „pasityčioti“ iš šios funkcijos:

const getPiValue = jest.fn() it(‘calls the function on click’, () => { const { container, getByTestId } = render() fireEvent.click(getByTestId(‘mode-toggle’)) expect(getPiValue).toHaveBeenCalledTimes(1) ) })

Funkcija toHaveBeenCalledTimes () yra viena iš daugelio pagalbinių funkcijų testavimo bibliotekoje, kuri mums leidžia

išbandyti funkcijų išvestį. Tai leidžia mums ne tik pritaikyti testus tik moduliui, kurį norime išbandyti, bet ir tai, kad galime „šnipinėti“ ar pamatyti, ką veikia mūsų funkcija, kai ji iškviečia šią funkciją.

09. Pradėkite testuoti „React“ programas

Bandymo reakcija

(Paveikslėlis: React Testing Library)

Testų rašymas gali atrodyti šiek tiek bauginantis. Tikiuosi, kad ši pamoka suteikė jums šiek tiek daugiau pasitikėjimo išbandyti. Kadangi pradėjau rašyti savo paraiškų testus, tikrai negaliu grįžti: galiu lengviau pailsėti, žinodamas, kad palieku daug geresnį palikimą tiems, kurie ateityje naudosis mano darbu.

Norėdami gauti daugiau idėjų, kaip išbandyti komponentus, apsilankykite Reagavimo testavimo biblioteka arba Reaguokite į bandymų pavyzdžius . Jei ieškote kursų, kurie padėtų jums pradėti, tas, kurį pateikė Kentas C Doddsas (kuris parašė ir prižiūri React Testing Library) yra populiarus. Man taip pat patiko šis yra „Level Up Tutorials“ tai mane privertė rašyti savo kodo testus.

Atminkite, kad jei kuriate sudėtingą svetainę, norėsite ją įsigyti interneto priegloba paslaugų vietoje. Ir jei toje svetainėje greičiausiai yra daug turto, saugokite juos patikimai debesies saugykla yra labai svarbus.

Šis turinys iš pradžių pasirodė tinklinis žurnalas . Skaitykite daugiau mūsų straipsniai apie interneto dizainą čia .

Skaityti daugiau: