PricingLoginStart free
Frontend Academy · Oppitunti

@testing-library/react: render ja userEvent

Renderöi komponentteja simuloidussa DOMissa, tee kyselyjä roolin ja label-tekstin perusteella, laukaise käyttäjän toimintoja userEventillä ja varmista näkyvä tuloste

Oppitunti 2/413 vaihetta

@testing-library/react: render ja userEvent on ilmainen Frontend 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 Frontend Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Frontend Academy-kurssilla on yhteensä 4 oppituntia.

Testing Libraryn filosofia

@testing-library kannustaa testeihin, jotka muistuttavat tapaa, jolla käyttäjät ovat vuorovaikutuksessa käyttöliittymän kanssa. Kyselkää roolin, selitteen ja tekstin perusteella — älkää toteutuksen yksityiskohtien, kuten CSS-luokkien nimien tai komponentin sisäisten osien, perusteella.

Testing Libraryn asentaminen

Asentakaa Testing Library Reactille sekä userEvent-paketti käyttäjän vuorovaikutuksen simulointia varten.

npm install -D @testing-library/react @testing-library/user-event @testing-library/jest-dom

render() — komponentin liittäminen

render(<Component />) liittää komponentin simuloituun DOM:iin. Se palauttaa kyselyfunktioita elementtien etsimistä varten.

import { render, screen } from '@testing-library/react';
import { Button } from './Button';

test('renders button with label', () => {
  render(<Button label="Submit" onClick={() => {}} />);
  expect(screen.getByRole('button', { name: 'Submit' })).toBeInTheDocument();
});

Elementtien etsiminen

Suosikaa kyselyitä tässä järjestyksessä: getByRole (saavutettava), getByLabelText, getByPlaceholderText, getByText ja getByDisplayValue. Käyttäkää queryBy*-kyselyitä, kun testaatte elementin puuttumista. Käyttäkää findBy*-kyselyitä asynkronisille elementeille.

// Prefer (accessible):
screen.getByRole('button', { name: /submit/i });
screen.getByLabelText('Email');

// For text content:
screen.getByText('Welcome!');

// Existence check:
expect(screen.queryByText('Error')).not.toBeInTheDocument();

// Async appearance:
await screen.findByText('Data loaded');

userEvent — käyttäjän toimien simulointi

userEvent simuloi todellisia käyttäjän toimia: kirjoittamista, napsautuksia ja näppäimistöllä siirtymistä. Se on realistisempi kuin vanhempi fireEvent.

import userEvent from '@testing-library/user-event';

test('typing in input', async () => {
  const user = userEvent.setup();
  render(<SearchInput />);

  const input = screen.getByRole('textbox', { name: /search/i });
  await user.type(input, 'react hooks');

  expect(input).toHaveValue('react hooks');
});

Lomakkeen lähetyksen testaus

Täyttäkää lomakekentät ja lähettäkää lomake. Tarkistakaa lopputulos — se, mitä käyttäjä näkee lähetyksen jälkeen.

test('submitting the login form', async () => {
  const onLogin = jest.fn();
  const user = userEvent.setup();
  render(<LoginForm onLogin={onLogin} />);

  await user.type(screen.getByLabelText('Email'), 'alice@example.com');
  await user.type(screen.getByLabelText('Password'), 'secret123');
  await user.click(screen.getByRole('button', { name: /sign in/i }));

  expect(onLogin).toHaveBeenCalledWith({ email: 'alice@example.com', password: 'secret123' });
});

jest-domin mukautetut matcherit

@testing-library/jest-dom lisää hyödyllisiä matchereita: toBeInTheDocument(), toBeVisible(), toBeDisabled(), toHaveValue(), toHaveClass() ja toHaveFocus().

Asynkronisten komponenttipäivitysten testaus

Käyttäkää waitFor()- tai findBy*-kyselyitä elementeille, jotka ilmestyvät asynkronisesti (haun tai aikakatkaisun jälkeen).

test('shows data after loading', async () => {
  render(<UserList />);

  expect(screen.getByRole('status')).toHaveTextContent('Loading');

  const items = await screen.findAllByRole('listitem');
  expect(items).toHaveLength(3);
});

Lataus- ja virhetilojen testaus

Mockatkaa fetch-vastaus eri tilojen testaamista varten. MSW (Mock Service Worker) on paras työkalu API-vastausten mockaamiseen testeissä.

Saavutettavuuden testaus

Testing Library edistää luonnollisesti saavutettavuutta — jos elementtiä ei voi hakea roolin tai selitteen perusteella, se ei todennäköisesti ole saavutettava. Käyttäkää jest-axea automaattisiin saavutettavuustarkastuksiin testeissä.

Älkää testatko toteutuksen yksityiskohtia

Välttäkää seuraavia: CSS-luokkien nimien perusteella kyselemistä, komponentin sisäisen tilan tuomista ja tiettyjen metodien kutsumisen testaamista. Testatkaa toimintaa käyttäjän näkökulmasta: mitä käyttäjä näkee ja mitä tapahtuu hänen toimiessaan.

Pikatarkistus

Mitä Testing Libraryn kyselyfunktiota tulisi suosia vuorovaikutteisten elementtien etsimiseen?

Vastaa interaktiivisessa oppitunnissa

Kertaus: @testing-library/react

render() liittää komponentit simuloituun DOM:iin. Kyselkää roolin, selitteen ja tekstin perusteella — älkää toteutuksen yksityiskohtien perusteella. userEvent.setup() realistiseen käyttäjän vuorovaikutukseen. findBy* asynkronisille elementeille. jest-dom selkeisiin väitteisiin. Testatkaa käyttäjän näkökulmasta: mitä käyttäjä näkee ja tekee. Saavutettavia komponentteja on helpompi testata.

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
Aloita opiskelu maksuttaNäytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”@testing-library/react: render ja userEvent” ilmainen?

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

Mitä opin oppitunnilla ”@testing-library/react: render ja userEvent”?

Renderöi komponentteja simuloidussa DOMissa, tee kyselyjä roolin ja label-tekstin perusteella, laukaise käyttäjän toimintoja userEventillä ja varmista näkyvä tuloste Harjoittelet Frontend Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni Frontend Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin Frontend 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/react: render ja userEvent”-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ä Frontend Academy-oppitunnilla?

Kyllä. Jokainen Frontend 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. Jest-asetukset ja perustestit
  2. @testing-library/react: render ja userEvent
  3. @testing-library/vue: komponenttien mountaus
  4. Moduulien ja API-kutsujen mockaus
← Takaisin: Frontend Academy