React Academy · Lekcja

Testy integracyjne z React Testing Library

Renderowanie komponentów w testach, wywoływanie zdarzeń i sprawdzanie widocznego wyniku zamiast implementacji.

Testy integracyjne z React Testing Library to bezpłatna lekcja React Academy na CoddyKit. To lekcja 1 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 React Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs React Academy zawiera 4 lekcji w sumie.

Czym jest React Testing Library?

React Testing Library (RTL) zachęca do testowania z perspektywy użytkownika: renderowania komponentów, wchodzenia z nimi w interakcje tak jak użytkownik oraz sprawdzania widocznych wyników zamiast szczegółów implementacji.

Konfiguracja

RTL jest dołączona do Create React App i szablonu Reacta w Vite. W przypadku ręcznej konfiguracji należy zainstalować @testing-library/react oraz @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';

Renderowanie komponentu

render() montuje komponent w wirtualnym DOM. Zwraca funkcje zapytań ograniczone do wyrenderowanego wyniku.

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

Wyszukiwanie elementów

Zapytania należy preferować w następującej kolejności: getByRole > getByLabelText > getByPlaceholderText > getByText. Zapytania o role uwzględniają semantykę dostępności.

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

Wywoływanie zdarzeń

Należy używać userEvent z @testing-library/user-event (preferowane) albo fireEvent (podstawowe). userEvent symuluje rzeczywiste interakcje w przeglądarce, w tym focus i blur.

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

Testowanie przesłania formularza

Należy wyrenderować formularz, wypełnić pola za pomocą userEvent.type, kliknąć przycisk przesyłania i sprawdzić wynik: komunikat powodzenia, nawigację lub wywołanie callbacka.

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

Sprawdzanie widoczności

Matchery jest-dom, takie jak toBeInTheDocument(), toBeVisible() i toHaveValue(), sprawiają, że asercje są czytelne.

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

Testowanie renderowania warunkowego

Należy użyć zapytań queryBy, które zwracają null, gdy elementu nie ma, aby sprawdzić, że element nie został wyrenderowany. getBy należy używać, gdy element powinien być obecny.

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

Opakowywanie w providery

Większość komponentów wymaga kontekstu lub routera. Należy opakować je w providery wewnątrz wywołania render albo utworzyć niestandardowy pomocnik renderWithProviders.

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

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

Testowanie zmian stanu

Należy wykonać działanie na komponencie, a następnie sprawdzić, czy nowy stan jest odzwierciedlony w interfejsie. RTL automatycznie opakowuje większość interakcji w act podczas korzystania z userEvent.

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

Pomocnik debugowania screen

Należy wywołać screen.debug(), aby wydrukować bieżący wyrenderowany kod HTML w konsoli — jest to przydatne, gdy zapytanie się nie powiedzie i trzeba sprawdzić, co faktycznie zostało wyrenderowane.

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

Szybkie sprawdzenie

Które zapytanie należy preferować podczas testowania przycisku w React Testing Library?

Podsumowanie

RTL renderuje komponenty i wchodzi z nimi w interakcje za pomocą zapytań opartych na rolach oraz userEvent. Komponenty należy opakowywać w wymagane providery, używać matcherów jest-dom do tworzenia czytelnych asercji i preferować queryBy podczas sprawdzania nieobecności elementu.

Często zadawane pytania

Czy lekcja „Testy integracyjne z React Testing Library” jest bezpłatna?

Tak — pełny tekst „Testy integracyjne z React Testing Library” 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 React Academy, przejdź na CoddyKit PRO. Kurs React Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Testy integracyjne z React Testing Library”?

Renderowanie komponentów w testach, wywoływanie zdarzeń i sprawdzanie widocznego wyniku zamiast implementacji. Ćwiczysz React 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ąć React Academy?

Nie wymagamy żadnego doświadczenia. React 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 1 z 4.

Ile czasu zajmuje lekcja „Testy integracyjne z React Testing Library”?

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 React Academy?

Tak. Każda lekcja React 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

Testy integracyjne z React Testing Library
Testowanie asynchronicznego interfejsu i wywołań API za pomocą MSW
Pierwsze kroki z Playwright dla React
Testowanie formularzy i przepływów użytkownika end-to-end

← Powrót do React Academy