Next.js 15 fullstack (App Router + Server Actions) · leksjon

Enhetstesting av komponenter

Skriv effektive enhetstester for React-komponentene dine med testbiblioteker som React Testing Library og Jest.

Leksjon 1 av 410 trinn

Enhetstesting av komponenter er en gratis leksjon i Next.js 15 fullstack (App Router + Server Actions) på CoddyKit. Dette er leksjon 1 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Next.js 15 fullstack (App Router + Server Actions), og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Next.js 15 fullstack (App Router + Server Actions) inneholder totalt 4 leksjoner.

Introduksjon til enhetstesting

Velkommen til enhetstesting av React-komponenter! Enhetstesting bidrar til å sikre at de minste, uavhengige delene av koden din – komponentene dine – fungerer nøyaktig slik de skal.

Hva er en enhetstest? Det er en test av en «enhet» med kode, ofte en enkelt funksjon eller komponent.
Hvorfor teste komponenter? For å oppdage feil tidlig, forhindre regresjoner og sikre at brukergrensesnittet oppfører seg forutsigbart.
Vi fokuserer på å isolere komponenter og teste den spesifikke funksjonaliteten deres.

Jest: Testrammeverket

Jest er et populært testrammeverk for JavaScript, utviklet av Facebook. Det brukes ofte sammen med React fordi det er raskt, funksjonsrikt og inneholder alt du trenger for testing.

Testkjører: Kjører testene dine og rapporterer resultatene.
Påstandsbibliotek: Tilbyr funksjoner som expect for å kontrollere om verdier oppfyller bestemte betingelser.
Mocking-bibliotek: Bidrar til å isolere kode ved å erstatte avhengigheter med «mock»-versjoner.

React Testing Library (RTL)

Mens Jest kjører testene, hjelper React Testing Library (RTL) deg med å teste React-komponenter på en måte som etterligner hvordan brukere samhandler med dem.

Brukersentrert: RTL oppmuntrer til testing av faktisk brukeradferd, ikke interne implementasjonsdetaljer.
Tilgjengelighet: Spørringsmetodene, for eksempel getByRole, fremmer god praksis for tilgjengelighet.
Det tilbyr verktøy for å gjengi komponenter, spørre DOM-en og simulere brukerhendelser.

Konfigurere testmiljøet

Next.js-prosjekter leveres ofte med Jest og RTL ferdig konfigurert, eller de kan enkelt legges til. Dette er det du vanligvis bruker:

jest: Den sentrale testkjøreren.
@testing-library/react: Hovedbiblioteket for testing av React-komponenter.
@testing-library/jest-dom: Tilbyr egendefinerte Jest-matchere for bedre påstander om DOM-en (for eksempel .toBeInTheDocument()).

Disse bibliotekene fungerer sammen for å gi deg et kraftig testoppsett.

Vår første komponent som skal testes

La oss opprette en enkel MyButton-komponent. Den skal vise litt tekst og kjøre en funksjon når den blir klikket. Dette er et vanlig mønster for interaktive brukergrensesnittelementer.

Vi lagrer den som components/MyButton.js:

import React from 'react';

function MyButton({ text, onClick }) {
  return (
    <button onClick={onClick}>
      {text}
    </button>
  );
}

export default MyButton;

Grunnleggende teststruktur og gjengivelse

Testfiler ligger vanligvis sammen med komponenten (for eksempel components/MyButton.test.js). Vi bruker describe til å gruppere relaterte tester og test (eller it) for individuelle testtilfeller.

La oss først bare gjengi knappen og kontrollere at den vises. Vi bruker render fra RTL.

import { render, screen } from '@testing-library/react';
import MyButton from './MyButton';

describe('MyButton', () => {
  test('renders with the correct text', () => {
    render(<MyButton text="Click Me" onClick={() => {}} />);
    const buttonElement = screen.getByText(/Click Me/i);
    expect(buttonElement).toBeInTheDocument();
  });
});

Finne elementer med RTL

RTL tilbyr ulike «query»-metoder for å finne elementer i den gjengitte komponenten. Det er best å bruke spørringer som ligner på hvordan en bruker ville funnet elementene, med prioritet på tilgjengelighet.

getByRole: Finner elementer basert på ARIA-rollen deres (for eksempel «button» eller «heading»). Anbefales på det sterkeste!
getByText: Finner elementer som inneholder bestemt tekst.
getByLabelText: Finner elementer som er knyttet til en etikett.

Vi brukte getByText i det forrige eksempelet, noe som fungerer svært godt for tekstinnhold.

Simulere samhandling og påstander

La oss nå teste om onClick-behandleren til knappen blir kalt når knappen klikkes. Vi bruker fireEvent fra RTL til å simulere brukerhendelser og jest.fn() til å opprette en «mock»-funksjon.

jest.fn() lar oss spore om funksjonen ble kalt, hvor mange ganger den ble kalt, og med hvilke argumenter. .toHaveBeenCalledTimes() er en jest-dom-matcher.

import { render, screen, fireEvent } from '@testing-library/react';
import MyButton from './MyButton';

describe('MyButton', () => {
  test('calls onClick handler when clicked', () => {
    const handleClick = jest.fn(); // Create a mock function
    render(<MyButton text="Submit" onClick={handleClick} />);
    
    const buttonElement = screen.getByRole('button', { name: /Submit/i });
    fireEvent.click(buttonElement); // Simulate a click
    
    expect(handleClick).toHaveBeenCalledTimes(1); // Assert it was called once
  });
});

Rask kontroll av testing

Du har en komponent som heter Greeting, og som viser «Hello, [name]!».

// components/Greeting.js

function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>;
}
export default Greeting;

Hvilket testutdrag bekrefter riktig at «Hello, Alice!» blir gjengitt?

Besvar den i den interaktive leksjonen

Oppsummering: Enhetstesting av komponenter

Godt jobbet! Du har tatt dine første steg innen enhetstesting av React-komponenter ved hjelp av Jest og React Testing Library.

Jest er testkjøreren og rammeverket for påstander.
React Testing Library hjelper deg med å teste komponenter fra brukerens perspektiv.
Du har lært å gjengi komponenter, finne elementer, simulere brukerinteraksjoner og lage påstander om komponentens oppførsel.

Fortsett å øve for å bygge robuste og pålitelige Next.js-applikasjoner!

Gratis å komme i gang

Lær deg TypeScript 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: 22
Leksjoner: 88

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Enhetstesting av komponenter» gratis?

Ja – du kan lese valgfritt 3 av leksjonene i læringsstien Next.js 15 fullstack (App Router + Server Actions), inkludert «Enhetstesting av komponenter», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i Next.js 15 fullstack (App Router + Server Actions) inneholder totalt 4 leksjoner.

Hva lærer jeg i «Enhetstesting av komponenter»?

Skriv effektive enhetstester for React-komponentene dine med testbiblioteker som React Testing Library og Jest. Du øver på Next.js 15 fullstack (App Router + Server Actions) 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 Next.js 15 fullstack (App Router + Server Actions)?

Ingen tidligere erfaring er nødvendig. Next.js 15 fullstack (App Router + Server Actions) 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 «Enhetstesting av komponenter»?

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 Next.js 15 fullstack (App Router + Server Actions)-leksjonen?

Ja. Alle Next.js 15 fullstack (App Router + Server Actions)-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

← Tilbake til Next.js 15 fullstack (App Router + Server Actions)