Frontend Academy · Lekcja

@testing-library/react: render i userEvent

Proszę renderować komponenty w symulowanym DOM, wyszukiwać je po roli i tekście etykiety, wywoływać interakcje użytkownika za pomocą userEvent oraz sprawdzać widoczny wynik.

@testing-library/react: render i userEvent to bezpłatna lekcja Frontend Academy na CoddyKit. To lekcja 2 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Frontend Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Frontend Academy zawiera 4 lekcji w sumie.

Filozofia Testing Library

@testing-library zachęca do pisania testów odzwierciedlających sposób, w jaki użytkownicy korzystają z interfejsu. Elementy należy wyszukiwać według roli, etykiety i tekstu — a nie według szczegółów implementacji, takich jak nazwy klas CSS czy elementy wewnętrzne komponentu.

Instalowanie Testing Library

Należy zainstalować Testing Library dla Reacta oraz pakiet userEvent do symulowania interakcji użytkownika.

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

render() — montowanie komponentu

render(<Component />) montuje komponent w symulowanym DOM-ie. Zwraca funkcje zapytań służące do wyszukiwania elementów.

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();
});

Wyszukiwanie elementów

Zapytania należy preferować w następującej kolejności: getByRole (dostępne), getByLabelText, getByPlaceholderText, getByText, getByDisplayValue. Do testowania nieistnienia elementu należy używać queryBy*. Dla elementów asynchronicznych należy używać findBy*.

// 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 — symulowanie działań użytkownika

userEvent symuluje rzeczywiste interakcje użytkownika: pisanie, klikanie i nawigację za pomocą klawiatury. Jest bardziej realistyczny niż starszy 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');
});

Testowanie wysyłania formularza

Należy wypełnić pola formularza i wysłać formularz. Następnie należy sprawdzić rezultat — to, co użytkownik widzi po wysłaniu.

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' });
});

Własne matchery jest-dom

@testing-library/jest-dom dodaje przydatne matchery: toBeInTheDocument(), toBeVisible(), toBeDisabled(), toHaveValue(), toHaveClass(), toHaveFocus().

Testowanie asynchronicznych aktualizacji komponentu

Dla elementów pojawiających się asynchronicznie (po pobraniu danych lub po upływie limitu czasu) należy użyć waitFor() lub zapytań findBy*.

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

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

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

Testowanie stanów ładowania i błędu

Należy zamockować odpowiedź fetch, aby testować różne stany. MSW (Mock Service Worker) jest najlepszym narzędziem do mockowania odpowiedzi API w testach.

Testowanie dostępności

Testing Library w naturalny sposób zachęca do dbania o dostępność — jeśli nie można wyszukać elementu według roli lub etykiety, prawdopodobnie jest on niedostępny. Do automatycznych audytów dostępności w testach należy używać jest-axe.

Nie należy testować szczegółów implementacji

Należy unikać: wyszukiwania według nazw klas CSS, importowania wewnętrznego stanu komponentu oraz sprawdzania, czy wywołano konkretne metody. Testować należy zachowanie z perspektywy użytkownika: to, co widzi, oraz to, co dzieje się podczas interakcji.

Szybkie sprawdzenie

Która funkcja zapytań Testing Library jest preferowana do wyszukiwania elementów interaktywnych?

Podsumowanie: @testing-library/react

render() montuje komponenty w symulowanym DOM-ie. Elementy należy wyszukiwać według roli, etykiety i tekstu — a nie według szczegółów implementacji. userEvent.setup() służy do realistycznych interakcji użytkownika. findBy* służy do elementów asynchronicznych. jest-dom udostępnia czytelne asercje. Testy należy pisać z perspektywy użytkownika: sprawdzać to, co widzi i robi. Dostępne komponenty łatwiej testować.

Często zadawane pytania

Czy lekcja „@testing-library/react: render i userEvent” jest bezpłatna?

Tak — pełny tekst „@testing-library/react: render i userEvent” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Frontend Academy, przejdź na CoddyKit PRO. Kurs Frontend Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „@testing-library/react: render i userEvent”?

Proszę renderować komponenty w symulowanym DOM, wyszukiwać je po roli i tekście etykiety, wywoływać interakcje użytkownika za pomocą userEvent oraz sprawdzać widoczny wynik. Ćwiczysz Frontend Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Frontend Academy?

Nie wymagamy żadnego doświadczenia. Frontend Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 4.

Ile czasu zajmuje lekcja „@testing-library/react: render i userEvent”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Frontend Academy?

Tak. Każda lekcja Frontend Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

Konfiguracja Jest i podstawowe testy
@testing-library/react: render i userEvent
@testing-library/vue: montowanie komponentów
Mockowanie modułów i wywołań API

← Powrót do Frontend Academy