React Academy · leksjon

Integrasjonstesting med React Testing Library

Rend komponenter i tester, utløs events og verifiser synlig output i stedet for implementasjonen.

Leksjon 1 av 413 trinn

Integrasjonstesting med React Testing Library er en gratis leksjon i React Academy på CoddyKit. Dette er leksjon 1 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i React Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i React Academy inneholder totalt 4 leksjoner.

Hva er React Testing Library?

React Testing Library (RTL) oppmuntrer til testing fra brukerens perspektiv: gjengi komponenter, samhandle med dem slik en bruker ville gjort, og kontroller synlig resultat i stedet for implementasjonsdetaljer.

Oppsett

RTL følger med Create React App og React-malen i Vite. Ved manuelt oppsett installerer De @testing-library/react og @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';

Gjengivelse av en komponent

render() monterer en komponent i en virtuell DOM. Funksjonen returnerer spørringsfunksjoner som er avgrenset til det gjengitte resultatet.

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

Spørring etter elementer

Foretrekk spørringer i denne rekkefølgen: getByRole > getByLabelText > getByPlaceholderText > getByText. Rollebaserte spørringer samsvarer med tilgjengelighetssemantikk.

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

Utløsing av hendelser

Bruk userEvent fra @testing-library/user-event (foretrukket), eller fireEvent (grunnleggende). userEvent simulerer reelle nettlesersamhandlinger, inkludert fokusering og fokustap.

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

Testing av skjemainnsending

Gjengi skjemaet, fyll ut inndatafeltene med userEvent.type, klikk på send inn, og kontroller resultatet – en suksessmelding, navigering eller et callback-kall.

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

Kontroll av synlighet

jest-dom-matchere som toBeInTheDocument(), toBeVisible() og toHaveValue() gjør kontroller lesbare.

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

Testing av betinget gjengivelse

Bruk queryBy, som returnerer null når elementet mangler, for å kontrollere at et element ikke gjengis. Bruk getBy når De forventer at elementet finnes.

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

Innpakking med providere

De fleste komponenter trenger kontekst eller en ruter. Pakk dem inn i providere i render-kallet, eller opprett en egendefinert renderWithProviders-hjelper.

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

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

Testing av tilstandsendringer

Utfør en handling på komponenten, og kontroller deretter at den nye tilstanden gjenspeiles i brukergrensesnittet. RTL pakker de fleste samhandlinger automatisk inn i act når De bruker 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();
});

Hjelp til feilsøking med screen.debug()

Kall screen.debug() for å skrive ut den gjeldende gjengitte HTML-en til konsollen – nyttig når en spørring mislykkes og De må se hva som faktisk ble gjengitt.

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

Hurtigsjekk

Hvilken spørring bør De foretrekke når De tester en knapp i React Testing Library?

Besvar den i den interaktive leksjonen

Oppsummering

RTL tester komponenter ved å gjengi dem og samhandle med dem gjennom rollebaserte spørringer og userEvent. Pakk komponenter inn i nødvendige providere, bruk jest-dom-matchere for lesbare kontroller, og foretrekk queryBy når fravær skal kontrolleres.

Gratis å komme i gang

Lær deg React med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 88
Leksjoner: 324

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Integrasjonstesting med React Testing Library» gratis?

Ja – hele teksten i «Integrasjonstesting med React Testing Library» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av React Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i React Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Integrasjonstesting med React Testing Library»?

Rend komponenter i tester, utløs events og verifiser synlig output i stedet for implementasjonen. Du øver på React Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med React Academy?

Ingen tidligere erfaring er nødvendig. React Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 1 av 4.

Hvor lang tid tar leksjonen «Integrasjonstesting med React Testing Library»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne React Academy-leksjonen?

Ja. Alle React Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

Integrasjonstesting med React Testing Library
Teste asynkront brukergrensesnitt og API-kall med MSW
Kom i gang med Playwright for React
Teste skjemaer og brukerflyter fra ende til ende

← Tilbake til React Academy