React Testing Library + Vitest/Jestin määritys
Asentakaa ja määrittäkää Vitest/Jest React Testing Libraryn kanssa. Käyttäkää jsdomia, renderöikää komponentteja ja kyselkää DOM:ia käyttäjän tavoin.
React Testing Library + Vitest/Jestin määritys on ilmainen React Academy-oppitunti CoddyKitissä. Tämä on oppitunti 1/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.
Miksi tämä työkalupino
Tavoite: Testatkaa komponentteja samalla tavalla kuin käyttäjä käyttää niitä.
- Vitest/Jest-testiajo
- jsdom-ympäristö
- React Testing Library (RTL)
Asennus ja ympäristö
Asennus:
- npm i -D vitest @testing-library/react @testing-library/user-event jsdom
- Asettakaa testausympäristöksi jsdom
- Lisätkää komennot: test, test:watch
Testattava esimerkkikomponentti
Tämä pieni komponentti tarjoaa selkeän roolin, nimen ja tilan, joten testit voivat hakea sen.
<div id="root"></div>
Testitiedoston sisällön esikatselu
Esikatselu RTL:ää ja Vitestiä käyttävästä testistä. Tiedoston sisältö näytetään viitteeksi.
<div id="root"></div>
Konfiguraation perusteet
- Ympäristö: jsdom
- Alustus: lisätkää halutessanne @testing-library/jest-dom
- Komennot: "test", "test:watch"
Hakekaa kuten käyttäjä
Suositellut haut:
- getByRole / findByRole
- getByLabelText
- getByText
Käyttäkää testitunnisteita vain, jos sopivaa saavutettavaa hakua ei ole.
React Testing Libraryn hakusuositusten tarkistus
Kertaus
Kertaus: Asentakaa Vitest/Jest ja RTL, määrittäkää jsdom, renderöikää komponentit ja suosikaa rooli- ja label-hakuja. Lisätkää user-event realistisia vuorovaikutustilanteita varten.
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 ”React Testing Library + Vitest/Jestin määritys” ilmainen?
Kyllä – oppitunnin ”React Testing Library + Vitest/Jestin määritys” 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 ”React Testing Library + Vitest/Jestin määritys”?
Asentakaa ja määrittäkää Vitest/Jest React Testing Libraryn kanssa. Käyttäkää jsdomia, renderöikää komponentteja ja kyselkää DOM:ia käyttäjän tavoin. 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 1/3.
Kuinka kauan ”React Testing Library + Vitest/Jestin määritys”-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