React Academy · Oppitunti

Mukautettujen hookien testaaminen (esikatselu)

Tutustukaa mukautettujen hookien testaamiseen: rakentakaa pieni testikomponentti, ohjatkaa tilan muutoksia ja tarkistakaa tulokset DOM:n tai lokien avulla.

Oppitunti 3/38 vaihetta

Mukautettujen hookien testaaminen (esikatselu) on ilmainen React Academy-oppitunti CoddyKitissä. Tämä on oppitunti 3/3. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu React Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. React Academy-kurssilla on yhteensä 3 oppituntia.

Hookien testauksen esikatselu

Tavoite: Varmista hookin toiminta pienen harness-komponentin avulla.

  • Ohjaa syötteitä
  • Tarkkaile palautettuja arvoja
  • Tarkista efektit ja siivous

Strategia: harness-komponentti

Strategia:

  • Rakenna pieni komponentti, joka käyttää hookia
  • Tarjoa painikkeet ja syötteet muutosten käynnistämiseen
  • Varmista tulokset näkyvän tekstin tai konsolilokien avulla

Esimerkki: useCounter ja harness

Luomme useCounter-hookin ja pienen harness-komponentin, jossa voidaan napsauttaa ja tarkkailla tuloksia – aivan kuten manuaalisessa testissä.


<div id="root"></div>

Tarkista efektit ja siivous

Kun hook käyttää efektejä (ajastimia tai kuuntelijoita), varmista, että harness-komponentti liitetään ja irrotetaan tai ehtoja vaihdellaan, jotta siivouksen suorittaminen voidaan nähdä (ei ylimääräisiä lokimerkintöjä tai ajastimia).

Esimerkki: useInterval ja siivous

Pieni useInterval-hook kasvattaa laskurin arvoa. Harness-komponentilla voidaan käynnistää ja pysäyttää toiminto siivouksen tarkistamiseksi.


<div id="root"></div>

Esikatselusta varsinaisiin testeihin

Seuraavat vaiheet:

  • Renderöi harness React Testing Librarylla ja tarkista teksti
  • Siirrä aikaa Vitest- tai Jest-ajastimilla intervalli- ja debounce-hookien testaamista varten
  • Pidä hookit puhtaina ja rajapinta suppeana, jotta testaaminen helpottuu

Tarkistus: hookien testauksen esikatselu

Mikä on tässä esikatselussa helppo tapa testata mukautettua hookia ilman testikirjastoja?

Kertaus

Kertaus: Rakenna pieni harness-komponentti hookin käyttämiseen, tarkista sen tulokset ja siivous ja siirry sen jälkeen varsinaisiin testeihin testikirjaston avulla.

Aloita maksutta

Opi React tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit
88
Oppitunnit
324

Usein kysytyt kysymykset

Onko oppitunti ”Mukautettujen hookien testaaminen (esikatselu)” ilmainen?

Kyllä – oppitunnin ”Mukautettujen hookien testaaminen (esikatselu)” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko React Academy-kurssin, päivitä CoddyKit PROhon. React Academy-kurssilla on yhteensä 3 oppituntia.

Mitä opin oppitunnilla ”Mukautettujen hookien testaaminen (esikatselu)”?

Tutustukaa mukautettujen hookien testaamiseen: rakentakaa pieni testikomponentti, ohjatkaa tilan muutoksia ja tarkistakaa tulokset DOM:n tai lokien avulla. Harjoittelet React Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni React Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin React Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 3/3.

Kuinka kauan ”Mukautettujen hookien testaaminen (esikatselu)”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä React Academy-oppitunnilla?

Kyllä. Jokainen React Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

  1. Logiikan eriyttäminen hookeihin: parametrit ja palautusarvot
  2. Nimeäminen, memoizointi ja tehosteiden siisteys
  3. Mukautettujen hookien testaaminen (esikatselu)
← Takaisin: React Academy