@testing-library/react: render og userEvent
Rendrer komponenter i en simulert DOM, spør etter rolle og label-tekst, utløs brukerinteraksjoner med userEvent, og kontroller den synlige outputen.
@testing-library/react: render og userEvent er en gratis leksjon i Frontend Academy på CoddyKit. Dette er leksjon 2 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 Frontend Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Frontend Academy inneholder totalt 4 leksjoner.
Testing Library-filosofien
@testing-library oppfordrer til tester som ligner på hvordan brukere samhandler med brukergrensesnittet. Slå opp elementer etter rolle, etikett og tekst – ikke etter implementasjonsdetaljer som CSS-klassenavn eller interne komponentdetaljer.
Installere Testing Library
Installer Testing Library for React og userEvent-pakken for å simulere brukerinteraksjon.
npm install -D @testing-library/react @testing-library/user-event @testing-library/jest-domrender() – montere en komponent
render(<Component />) monterer komponenten i en simulert DOM. Den returnerer spørringsfunksjoner som finner elementer.
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();
});Finne elementer
Foretrekk spørringer i denne rekkefølgen: getByRole (tilgjengelig), getByLabelText, getByPlaceholderText, getByText, getByDisplayValue. Bruk queryBy* når du tester at noe ikke finnes. Bruk findBy* for asynkrone elementer.
// 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 – simulere brukerhandlinger
userEvent simulerer ekte brukerinteraksjoner: skriving, klikking og tastaturnavigering. Det er mer realistisk enn den eldre 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');
});Teste innsending av skjema
Fyll ut skjemafeltene og send inn skjemaet. Kontroller resultatet – det brukeren ser etter innsendingen.
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' });
});Egendefinerte jest-dom-matchere
@testing-library/jest-dom legger til nyttige matchere: toBeInTheDocument(), toBeVisible(), toBeDisabled(), toHaveValue(), toHaveClass() og toHaveFocus().
Teste asynkrone komponentoppdateringer
Bruk waitFor() eller findBy* for elementer som vises asynkront (etter en fetch eller etter et tidsavbrudd).
test('shows data after loading', async () => {
render(<UserList />);
expect(screen.getByRole('status')).toHaveTextContent('Loading');
const items = await screen.findAllByRole('listitem');
expect(items).toHaveLength(3);
});Teste laste- og feiltilstander
Mock fetch-responsen for å teste ulike tilstander. MSW (Mock Service Worker) er det beste verktøyet for å mocke API-responser i tester.
Teste tilgjengelighet
Testing Library oppfordrer naturlig til god tilgjengelighet – hvis du ikke kan finne et element etter rolle eller etikett, er det sannsynligvis utilgjengelig. Bruk jest-axe til automatiserte tilgjengelighetskontroller i tester.
Ikke test implementasjonsdetaljer
Unngå å slå opp elementer etter CSS-klassenavn, importere komponentens interne tilstand eller teste at bestemte metoder ble kalt. Test atferd fra brukerens perspektiv: hva brukeren ser, og hva som skjer når brukeren samhandler med grensesnittet.
Rask sjekk
Hvilken spørringsfunksjon fra Testing Library bør du foretrekke når du skal finne interaktive elementer?
Oppsummering: @testing-library/react
render() monterer komponenter i en simulert DOM. Slå opp elementer etter rolle, etikett og tekst – ikke etter implementasjonsdetaljer. userEvent.setup() brukes til realistiske brukerinteraksjoner. findBy* brukes for asynkrone elementer. jest-dom gir lesbare påstander. Test fra brukerens perspektiv: hva brukeren ser og gjør. Tilgjengelige komponenter er enklere å teste.
Lær deg HTML 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
- 41
- Leksjoner
- 163
Ofte stilte spørsmål
Er leksjonen «@testing-library/react: render og userEvent» gratis?
Ja – hele teksten i «@testing-library/react: render og userEvent» 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 Frontend Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i Frontend Academy inneholder totalt 4 leksjoner.
Hva lærer jeg i «@testing-library/react: render og userEvent»?
Rendrer komponenter i en simulert DOM, spør etter rolle og label-tekst, utløs brukerinteraksjoner med userEvent, og kontroller den synlige outputen. Du øver på Frontend 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 Frontend Academy?
Ingen tidligere erfaring er nødvendig. Frontend 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 2 av 4.
Hvor lang tid tar leksjonen «@testing-library/react: render og userEvent»?
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 Frontend Academy-leksjonen?
Ja. Alle Frontend 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
- Jest-oppsett og grunnleggende tester
- @testing-library/react: render og userEvent
- @testing-library/vue: mounte komponenter
- Mocking av moduler og API-kall