React Academy · Oppitunti

Integraatiotestaus React Testing Librarylla

Renderöikää komponentteja testeissä, laukaiskaa tapahtumia ja tarkistakaa näkyvä tulos toteutuksen sijaan.

Oppitunti 1/413 vaihetta

Integraatiotestaus React Testing Librarylla on ilmainen React Academy-oppitunti CoddyKitissä. Tämä on oppitunti 1/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 React Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. React Academy-kurssilla on yhteensä 4 oppituntia.

Mikä React Testing Library on?

React Testing Library (RTL) kannustaa testaamaan käyttäjän näkökulmasta: renderöi komponentit, käsittele niitä kuten käyttäjä ja tarkista näkyvä tulos toteutuksen yksityiskohtien sijaan.

Käyttöönotto

RTL sisältyy Create React Appiin ja Viten React-mallipohjaan. Manuaalista käyttöönottoa varten asenna @testing-library/react ja @testing-library/jest-dom.

// package.json
// "@testing-library/react": "^14.0.0",
// "@testing-library/jest-dom": "^6.0.0"

// setupTests.ts
import '@testing-library/jest-dom';

Komponentin renderöinti

render() liittää komponentin virtuaaliseen DOM:iin. Se palauttaa renderöityyn tulokseen rajattuja kyselyfunktioita.

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

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

Elementtien hakeminen

Suosi kyselyitä tässä järjestyksessä: getByRole > getByLabelText > getByPlaceholderText > getByText. Roolikyselyt vastaavat saavutettavuussemantiikkaa.

// Best: query by role
const button = screen.getByRole('button', { name: /submit/i });

// Good: query by label (for form inputs)
const input = screen.getByLabelText('Email address');

// Acceptable: query by text
const heading = screen.getByText('Welcome');

Tapahtumien laukaiseminen

Käytä ensisijaisesti paketin @testing-library/user-event userEvent-toimintoa tai perustason vaihtoehtona fireEvent-toimintoa. userEvent simuloi todellisia selainvuorovaikutuksia, kuten fokusta ja fokuksen menetystä.

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

test('types into input', async () => {
  const user = userEvent.setup();
  render(<SearchBar />);
  const input = screen.getByRole('textbox');
  await user.type(input, 'react');
  expect(input).toHaveValue('react');
});

Lomakkeen lähetyksen testaaminen

Renderöi lomake, täytä syötekentät userEvent.type-toiminnolla, napsauta lähetyspainiketta ja tarkista tulos, kuten onnistumisviesti, navigointi tai callback-kutsu.

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

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

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

Näkyvyyden tarkistaminen

jest-dom-kirjaston matcherit, kuten toBeInTheDocument(), toBeVisible() ja toHaveValue(), tekevät tarkistuksista helposti luettavia.

expect(screen.getByText('Error: required')).toBeInTheDocument();
expect(screen.getByRole('dialog')).toBeVisible();
expect(screen.getByRole('textbox')).toHaveValue('hello');
expect(screen.queryByText('Loading...')).not.toBeInTheDocument();

Ehdollisen renderöinnin testaaminen

Käytä queryBy-kyselyä, joka palauttaa null-arvon elementin puuttuessa, ja tarkista sen avulla, ettei elementtiä renderöidä. Käytä getBy-kyselyä, kun odotat elementin olevan olemassa.

test('shows error message when validation fails', async () => {
  const user = userEvent.setup();
  render(<SignUpForm />);
  await user.click(screen.getByRole('button', { name: /submit/i }));
  expect(screen.getByText('Email is required')).toBeInTheDocument();
});

Providerien ympäröiminen

Useimmat komponentit tarvitsevat kontekstin tai reitittimen. Ympäröi ne providereilla render-kutsun sisällä tai luo mukautettu renderWithProviders-apufunktio.

function renderWithProviders(ui: React.ReactElement) {
  return render(
    <QueryClientProvider client={new QueryClient()}>
      <MemoryRouter>
        {ui}
      </MemoryRouter>
    </QueryClientProvider>
  );
}

test('shows user data', () => {
  renderWithProviders(<UserProfile />);
});

Tilamuutosten testaaminen

Toimi komponentilla ja tarkista sitten, että uusi tila näkyy käyttöliittymässä. RTL käärii useimmat userEvent-toimintojen vuorovaikutukset automaattisesti act-kutsuun.

test('counter increments', async () => {
  const user = userEvent.setup();
  render(<Counter />);
  expect(screen.getByText('Count: 0')).toBeInTheDocument();
  await user.click(screen.getByRole('button', { name: /increment/i }));
  expect(screen.getByText('Count: 1')).toBeInTheDocument();
});

Screen-vianmääritysapu

Kutsu screen.debug()-funktiota tulostaaksesi nykyisen renderöidyn HTML:n konsoliin. Tämä on hyödyllistä, kun kysely epäonnistuu ja haluat nähdä, mitä todella renderöitiin.

test('debugging a failing query', () => {
  render(<MyComponent />);
  screen.debug(); // prints rendered HTML
  screen.getByRole('button', { name: /save/i }); // then inspect output
});

Pikatarkistus

Mitä kyselyä tulisi suosia React Testing Libraryssa painiketta testattaessa?

Vastaa interaktiivisessa oppitunnissa

Kertaus

RTL-testit renderöivät komponentteja ja käsittelevät niitä roolipohjaisten kyselyiden ja userEvent-toimintojen avulla. Ympäröi komponentit tarvittavilla providereilla, käytä jest-dom-matchereita selkeisiin tarkistuksiin ja suosi queryBy-kyselyä puuttuvien elementtien tarkistamiseen.

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

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Integraatiotestaus React Testing Librarylla” ilmainen?

Kyllä – oppitunnin ”Integraatiotestaus React Testing Librarylla” 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ä 4 oppituntia.

Mitä opin oppitunnilla ”Integraatiotestaus React Testing Librarylla”?

Renderöikää komponentteja testeissä, laukaiskaa tapahtumia ja tarkistakaa näkyvä tulos toteutuksen sijaan. 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/4.

Kuinka kauan ”Integraatiotestaus React Testing Librarylla”-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

Integraatiotestaus React Testing Librarylla
Asynkronisen käyttöliittymän ja API-kutsujen testaus MSW:llä
Playwrightin perusteet Reactille
Lomakkeiden ja käyttäjäpolkujen päästä päähän -testaus

← Takaisin: React Academy