Kyselyt, tapahtumat ja tarkistukset — lomakkeet ja asynkroninen käyttöliittymä
Käyttäkää getBy-/findBy-kyselyitä, user-eventiä kirjoittamiseen ja napsautuksiin sekä jest-dom-tarkistuksia. Testatkaa lomakkeita ja asynkronisia näkymiä luottavaisin mielin.
Kyselyt, tapahtumat ja tarkistukset — lomakkeet ja asynkroninen käyttöliittymä on ilmainen React Academy-oppitunti CoddyKitissä. Tämä on oppitunti 2/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.
Käyttäjälähtöinen testaus
Tavoite: Testatkaa kuten käyttäjä.
- Haut: getBy*/findBy*
- Tapahtumat: user-event (napsautus, kirjoittaminen)
- Assertiot: jest-dom
Haut: valitkaa oikea
- getBy*: synkroninen; epäonnistuu, jos kohde puuttuu
- findBy*: asynkroninen; odottaa
- queryBy*: palauttaa null-arvon, jos kohde puuttuu
- Suosikaa role/label-hakuja testitunnisteiden sijaan
Esimerkki: saavutettava kirjautumislomake
Lomakkeessa on labelit ja lähetä-painike. Se sopii erinomaisesti getByLabelText- ja getByRole-hakujen sekä käyttäjän kirjoittamisen testaamiseen.
<div id="root"></div>
Esimerkki: asynkroninen luettelo (lataus → kohteet)
Simuloitu asynkroninen haku: näyttää latausilmaisimen ja renderöi sitten kohteet. Testeissä kannattaa käyttää findBy*-hakuja tai waitFor-funktiota.
<div id="root"></div>
Assertiot ja tapahtumat
- toBeInTheDocument, toBeDisabled, toHaveTextContent
- Käyttäkää findBy*-hakuja asynkroniselle käyttöliittymälle
- Suosikaa user-event-kirjastoa fireEventin sijaan
Mallit ja sudenkuopat
Mallit:
- Valmistelkaa → toimikaa (user-event) → tarkistakaa
- Asynkronisuus: await findBy* tai waitFor
- Välttäkää mielivaltaisia aikakatkaisuja ja pitäkää testit nopeina
Asynkronisten assertioiden parhaat käytännöt
Kertaus
Kertaus: Suosikaa rooli- ja label-hakuja, ohjatkaa käyttöliittymää user-eventillä ja tehkää assertiot jest-domilla. Odottakaa asynkronisessa käyttöliittymässä findBy*-hakua tai sijoittakaa tarkistus waitFor-kutsun sisään.
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 ”Kyselyt, tapahtumat ja tarkistukset — lomakkeet ja asynkroninen käyttöliittymä” ilmainen?
Kyllä – oppitunnin ”Kyselyt, tapahtumat ja tarkistukset — lomakkeet ja asynkroninen käyttöliittymä” 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 ”Kyselyt, tapahtumat ja tarkistukset — lomakkeet ja asynkroninen käyttöliittymä”?
Käyttäkää getBy-/findBy-kyselyitä, user-eventiä kirjoittamiseen ja napsautuksiin sekä jest-dom-tarkistuksia. Testatkaa lomakkeita ja asynkronisia näkymiä luottavaisin mielin. 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 2/3.
Kuinka kauan ”Kyselyt, tapahtumat ja tarkistukset — lomakkeet ja asynkroninen käyttöliittymä”-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
- React Testing Library + Vitest/Jestin määritys
- Kyselyt, tapahtumat ja tarkistukset — lomakkeet ja asynkroninen käyttöliittymä
- Fetchin ja ajastinten simulointi