@testing-library/react: render userEvent
Render komponenter i en simuleret DOM, søg efter rolle og label-tekst, udløs brugerinteraktioner med userEvent, og verificér det synlige output.
@testing-library/react: render userEvent er en gratis Frontend Academy-lektion på CoddyKit. Dette er lektion 2 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i Frontend Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Frontend Academy-kurset indeholder 4 lektioner i alt.
Testing Librarys filosofi
@testing-library opfordrer til test, der ligner den måde, brugere interagerer med brugerfladen på. Søg efter rolle, etiket og tekst — ikke efter implementeringsdetaljer som CSS-klassenavne eller komponentens interne dele.
Installation af Testing Library
Installér Testing Library til React samt pakken userEvent til simulering af brugerinteraktion.
npm install -D @testing-library/react @testing-library/user-event @testing-library/jest-domrender() — Montér en komponent
render(<Component />) monterer komponenten i en simuleret DOM. Funktionen returnerer forespørgselsfunktioner til at finde 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();
});Forespørgsel efter elementer
Foretræk forespørgsler i denne rækkefølge: getByRole (tilgængelig), getByLabelText, getByPlaceholderText, getByText og getByDisplayValue. Brug queryBy*, når du tester, at noget ikke findes. Brug findBy* til 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 — Simulering af brugerhandlinger
userEvent simulerer virkelige brugerinteraktioner: indtastning, klik og tastaturnavigation. Det er mere realistisk end den ældre 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');
});Test af formularafsendelse
Udfyld formularfelter, og send formularen. Kontrollér resultatet — det, som brugeren ser efter afsendelsen.
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' });
});Tilpassede matchere fra jest-dom
@testing-library/jest-dom tilføjer nyttige matchere: toBeInTheDocument(), toBeVisible(), toBeDisabled(), toHaveValue(), toHaveClass() og toHaveFocus().
Test af asynkrone komponentopdateringer
Brug waitFor() eller findBy* til elementer, der vises asynkront (efter en hentning eller efter en timeout).
test('shows data after loading', async () => {
render(<UserList />);
expect(screen.getByRole('status')).toHaveTextContent('Loading');
const items = await screen.findAllByRole('listitem');
expect(items).toHaveLength(3);
});Test af indlæsnings- og fejltilstande
Mock fetch-svaret for at teste forskellige tilstande. MSW (Mock Service Worker) er det bedste værktøj til at mocke API-svar i test.
Test af tilgængelighed
Testing Library fremmer naturligt tilgængelighed — hvis du ikke kan finde et element via dets rolle eller etiket, er det sandsynligvis ikke tilgængeligt. Brug jest-axe til automatiserede tilgængelighedskontroller i test.
Test ikke implementeringsdetaljer
Undgå: at søge efter CSS-klassenavne, at importere komponentens interne tilstand og at teste, om bestemte metoder blev kaldt. Test adfærden fra brugerens perspektiv: hvad brugeren ser, og hvad der sker, når brugeren interagerer.
Hurtigt tjek
Hvilken forespørgselsfunktion fra Testing Library bør du foretrække til at finde interaktive elementer?
Opsummering: @testing-library/react
render() monterer komponenter i en simuleret DOM. Søg efter rolle, etiket og tekst — ikke efter implementeringsdetaljer. userEvent.setup() bruges til realistiske brugerinteraktioner. findBy* bruges til asynkrone elementer. jest-dom giver læsbare påstande. Test fra brugerens perspektiv: hvad brugeren ser og gør. Tilgængelige komponenter er nemmere at teste.
Lær HTML med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 41
- Lektioner
- 163
Ofte stillede spørgsmål
Er lektionen “@testing-library/react: render userEvent” gratis?
Ja — hele teksten til “@testing-library/react: render userEvent” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af Frontend Academy-kurset, skal du opgradere til CoddyKit PRO. Frontend Academy-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “@testing-library/react: render userEvent”?
Render komponenter i en simuleret DOM, søg efter rolle og label-tekst, udløs brugerinteraktioner med userEvent, og verificér det synlige output. Du øver dig i Frontend Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på Frontend Academy?
Der kræves ingen tidligere erfaring. Frontend Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 2 af 4.
Hvor lang tid tager lektionen “@testing-library/react: render userEvent”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne Frontend Academy-lektion?
Ja. Alle Frontend Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- Jest-opsætning og grundlæggende tests
- @testing-library/react: render userEvent
- @testing-library/vue: montering af komponenter
- Mocking af moduler og API-kald