Sveltejs Academy · Oppitunti

@testing-library/svelte: render ja fireEvent

Renderöikää komponentteja testeissä, kyselkää DOM:ia ja simuloikaa käyttäjän toimintoja.

Oppitunti 2/413 vaihetta

@testing-library/svelte: render ja fireEvent on ilmainen Sveltejs Academy-oppitunti CoddyKitissä. Tämä on oppitunti 2/4. 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 Sveltejs Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Sveltejs Academy-kurssilla on yhteensä 4 oppituntia.

Testing Library

@testing-library/svelte tarjoaa apuohjelmia komponenttien renderöimiseen ja niiden käyttämiseen käyttäjän tavoin.

render

Liittäkää komponentti virtuaaliseen DOM:iin.

import { render } from "@testing-library/svelte";
const { getByText } = render(MyComp, { props: { name: "Ada" } });

Kyselymenetelmät

Käyttäkää getByText-, getByRole- ja getByLabelText-menetelmiä elementtien etsimiseen käyttäjän tavoin.

fireEvent

Simuloikaa käyttäjän toimintoja: napsautusta, syötettä ja lähetystä.

import { fireEvent } from "@testing-library/svelte";
await fireEvent.click(getByRole("button"));

user-event-kirjasto

Kun tarvitsette realistisempaa vuorovaikutusta, kuten kirjoittamista ja näppäimistönavigointia, käyttäkää @testing-library/user-event-kirjastoa.

Asynkroniset päivitykset

Odottaa vuorovaikutuksen jälkeen mikrotehtävien valmistumista, jotta Svelten päivitykset ehtivät valmistua.

Assertiot

Käyttäkää expect-funktiota jest-domin matchereiden, kuten toBeInTheDocumentin ja toHaveAttributen, kanssa.

expect(getByText("Hello, Ada!")).toBeInTheDocument();

Komponentin propsit

Välittäkää propsit render-funktion toisena argumenttina.

Komponentin tapahtumat

Testatkaa tapahtumien lähettäjiä välittämällä callback-propina spy.

DOM-snapshot

Ottakaa renderöidystä HTML:stä snapshot regressiotestausta varten.

Hyvä käytäntö

Testatkaa käyttäjän näkökulmasta. Välttäkää sisäisen tilan testaamista suoraan.

Pikatarkistus

Mitä render tekee?

Kertaus

Käyttäkää renderiä, fireEventiä ja jest-domia Svelte-komponenttien testaamiseen todellisten käyttäjän toimintojen tapaan.

Aloita maksutta

Opi HTML 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
41
Oppitunnit
163

Usein kysytyt kysymykset

Onko oppitunti ”@testing-library/svelte: render ja fireEvent” ilmainen?

Kyllä – oppitunnin ”@testing-library/svelte: render ja fireEvent” 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 Sveltejs Academy-kurssin, päivitä CoddyKit PROhon. Sveltejs Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”@testing-library/svelte: render ja fireEvent”?

Renderöikää komponentteja testeissä, kyselkää DOM:ia ja simuloikaa käyttäjän toimintoja. Harjoittelet Sveltejs Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni Sveltejs Academy-opiskelun?

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

Kuinka kauan ”@testing-library/svelte: render ja fireEvent”-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ä Sveltejs Academy-oppitunnilla?

Kyllä. Jokainen Sveltejs 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. Vitestin käyttöönotto Svelte-projekteissa
  2. @testing-library/svelte: render ja fireEvent
  3. Storejen ja reaktiivisuuden testaaminen
  4. Moduulien ja Fetchin mockaus
← Takaisin: Sveltejs Academy