Frontend Academy · Lektion

@testing-library/react: render userEvent

Rendera komponenter i en simulerad DOM, sök efter roll och label-text, utlös användarinteraktioner med userEvent och verifiera det synliga resultatet.

Lektion 2 av 413 steg

@testing-library/react: render userEvent är en gratis lektion i Frontend Academy på CoddyKit. Detta är lektion 2 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för Frontend Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Frontend Academy innehåller totalt 4 lektioner.

Testing Librarys filosofi

@testing-library uppmuntrar tester som liknar hur användare interagerar med gränssnittet. Fråga efter element genom roll, etikett och text — inte genom implementeringsdetaljer som CSS-klassnamn eller komponenters interna delar.

Installera Testing Library

Installera Testing Library för React samt paketet userEvent för att simulera användarinteraktioner.

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

render() — Montera en komponent

render(<Component />) monterar komponenten i en simulerad DOM. Funktionen returnerar frågefunktioner som används för att hitta element.

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

Hitta element

Föredra frågor i denna ordning: getByRole (tillgänglig), getByLabelText, getByPlaceholderText, getByText, getByDisplayValue. Använd queryBy* när du testar att något inte finns. Använd findBy* för asynkrona element.

// 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 — Simulera användaråtgärder

userEvent simulerar verkliga användarinteraktioner: att skriva, klicka och navigera med tangentbordet. Det är mer realistiskt än det ä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');
});

Testa formulärinskickning

Fyll i formulärfält och skicka formuläret. Verifiera resultatet — det som användaren ser efter inskickningen.

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

Anpassade matchers i jest-dom

@testing-library/jest-dom lägger till användbara matchers: toBeInTheDocument(), toBeVisible(), toBeDisabled(), toHaveValue(), toHaveClass(), toHaveFocus().

Testa asynkrona komponentuppdateringar

Använd waitFor() eller findBy* för element som visas asynkront, till exempel efter en hämtning eller 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);
});

Testa laddnings- och feltillstånd

Mocka fetch-svaret för att testa olika tillstånd. MSW (Mock Service Worker) är det bästa verktyget för att mocka API-svar i tester.

Tillgänglighetstestning

Testing Library uppmuntrar naturligt till god tillgänglighet — om du inte kan hitta ett element genom dess roll eller etikett är det troligen inte tillgängligt. Använd jest-axe för automatiserade tillgänghetsgranskningar i tester.

Testa inte implementeringsdetaljer

Undvik att söka efter CSS-klassnamn, importera komponenters interna state eller testa att specifika metoder anropades. Testa beteendet ur användarens perspektiv: vad användaren ser och vad som händer när användaren interagerar.

Snabbkontroll

Vilken frågefunktion i Testing Library bör du föredra när du ska hitta interaktiva element?

Besvara frågan i den interaktiva lektionen

Sammanfattning: @testing-library/react

render() monterar komponenter i en simulerad DOM. Fråga efter roll, etikett och text — inte efter implementeringsdetaljer. userEvent.setup() används för realistiska användarinteraktioner. findBy* används för asynkrona element. jest-dom ger lättlästa assertioner. Testa ur användarens perspektiv: vad användaren ser och gör. Tillgängliga komponenter är enklare att testa.

Gratis att börja

Lär dig HTML med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 41
Lektioner: 163

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”@testing-library/react: render userEvent” gratis?

Ja – hela texten till ”@testing-library/react: render userEvent” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i Frontend Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i Frontend Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”@testing-library/react: render userEvent”?

Rendera komponenter i en simulerad DOM, sök efter roll och label-text, utlös användarinteraktioner med userEvent och verifiera det synliga resultatet. Ni övar på Frontend Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig Frontend Academy?

Du behöver inga förkunskaper. Utbildningen i Frontend Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 2 av 4.

Hur lång tid tar lektionen ”@testing-library/react: render userEvent”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här Frontend Academy-lektionen?

Ja. Varje Frontend Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

Jest: konfiguration och grundläggande tester
@testing-library/react: render userEvent
@testing-library/vue: montera komponenter
Mockning av moduler och API-anrop

← Tillbaka till Frontend Academy