Next.js 15 for fullstack-webapper · leksjon

Enhets- og integrasjonstesting

Skriv effektive enhets- og integrasjonstester for React-komponenter og Next.js-funksjoner med Jest og React Testing Library.

Leksjon 1 av 412 trinn

Enhets- og integrasjonstesting er en gratis leksjon i Next.js 15 for fullstack-webapper 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 for fullstack-webapper, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Next.js 15 for fullstack-webapper inneholder totalt 4 leksjoner.

Hvorfor vi tester koden vår

Velkommen! I moderne webutvikling, særlig med komplekse applikasjoner bygget med Next.js, er det avgjørende å sikre at koden fungerer som forventet. Det er her testing kommer inn.

Pålitelighet: Tester forhindrer feil og regresjoner.
Vedlikeholdbarhet: Godt testet kode er enklere å refaktorere og oppdatere.
Tillit: Du kan distribuere nye funksjoner med større trygghet.

Vi fokuserer på enhetstester (små, isolerte deler) og integrasjonstester (hvordan deler fungerer sammen).

Konfigurere Jest og RTL

Jest er et populært testrammeverk for JavaScript, og React Testing Library (RTL) er et sett med verktøy for testing av React-komponenter. Sammen utgjør de en kraftig kombinasjon for Next.js-apper.

Installer først de nødvendige pakkene:

npm install --save-dev jest @testing-library/react @testing-library/jest-dom jest-environment-jsdom

Din første enhetstest (funksjon)

En enhetstest kontrollerer en liten, isolert del av koden, for eksempel én enkelt funksjon. La oss lage en enkel hjelpefunksjon og deretter skrive en test for den.

Her er hjelpefunksjonen:

// utils/math.js
function add(a, b) {
  return a + b;
}

// This block makes the file directly runnable via Node.js
if (typeof require !== 'undefined' && require.main === module) {
  console.log("Running add(5, 3):", add(5, 3)); // Expected: 8
  console.log("Running add(10, -2):", add(10, -2)); // Expected: 8
}

Teste «add»-funksjonen

La oss nå skrive en test for add-funksjonen. Jest bruker describe til å gruppere tester og test (eller it) for individuelle testtilfeller. expect brukes til å kontrollere forventninger.

Lagre dette i utils/math.test.js:

// utils/math.test.js
import { add } from './math';

describe('add function', () => {
  test('should correctly add two positive numbers', () => {
    expect(add(1, 2)).toBe(3);
  });

  test('should handle negative numbers', () => {
    expect(add(5, -3)).toBe(2);
  });
});

// To run tests: npx jest

Introduksjon til React Testing Library

React Testing Library (RTL) oppmuntrer til testing av komponenter på en måte som etterligner hvordan brukere samhandler med dem. I stedet for å kontrollere intern tilstand spør du DOM-en etter elementer som brukeren kan se eller samhandle med.

render: Monterer en React-komponent i en virtuell DOM.
screen: Tilbyr metoder for å søke i den gjengitte DOM-en (for eksempel getByText og getByRole).
@testing-library/jest-dom: Legger til egendefinerte matchere som toBeInTheDocument.

Teste en enkel React-komponent

La oss teste en grunnleggende knappkomponent. Vi sikrer at den gjengis med riktig tekst.

Først komponenten (components/Button.jsx):

// components/Button.jsx
export default function Button({ label, onClick }) {
  return (
    <button onClick={onClick}>
      {label}
    </button>
  );
}

Teste gjengivelse av komponenter

La oss nå se på testen for Button-komponenten. Vi bruker render til å plassere den på skjermen og screen.getByText til å finne den. Deretter bruker vi toBeInTheDocument til å bekrefte at den finnes.

Lagre dette som components/Button.test.jsx:

// components/Button.test.jsx
import { render, screen } from '@testing-library/react';
import Button from './Button';

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

Simulere brukerinteraksjoner

I tillegg til å teste gjengivelse må vi teste hvordan komponenter reagerer på brukerhandlinger. RTLs fireEvent (eller userEvent for mer realistiske interaksjoner) hjelper med å simulere klikk, endringer i inndata og mer.

Vi kan kontrollere om en funksjon som sendes inn via props, blir kalt.

// components/Button.test.jsx (continued)
import { render, screen, fireEvent } from '@testing-library/react';
import Button from './Button';

describe('Button component interactions', () => {
  test('calls the onClick handler when clicked', () => {
    const handleClick = jest.fn(); // Jest mock function
    render(<Button label="Click Me" onClick={handleClick} />);
    const buttonElement = screen.getByText(/Click Me/i);
    fireEvent.click(buttonElement);
    expect(handleClick).toHaveBeenCalledTimes(1);
  });
});

Integrasjon: teste rutehåndterere

Next.js' rutehåndterere (API-ruter i App Router) er funksjoner som kjøres på serversiden. Vi kan teste dem ved å importere og kalle HTTP-metodene deres direkte (som GET og POST) og simulere Next.js' forespørsels- og responsobjekter.

Her er et eksempel:

// app/api/hello/route.js
import { NextResponse } from 'next/server';

export async function GET() {
  return NextResponse.json({ message: 'Hello from API!' }, { status: 200 });
}

// app/api/hello/route.test.js
import { GET } from './route';

describe('GET /api/hello', () => {
  test('should return a greeting message with status 200', async () => {
    // No need to mock NextRequest/NextResponse directly for simple cases
    // as NextResponse.json returns a standard Response object.
    const response = await GET();
    const json = await response.json();

    expect(response.status).toBe(200);
    expect(json.message).toBe('Hello from API!');
  });
});

Beste praksis for effektive tester

Slik skriver du nyttige og vedlikeholdbare tester:

Test brukeradferd: Fokuser på det brukeren ser og gjør, ikke intern tilstand i komponenten.
Hold testene fokuserte: Hver test bør helst kontrollere én ting.
Gjør testene raske: Trege tester gjør at man kvier seg for å kjøre dem ofte.
Lesbarhet: Skriv tydelige tester som er enkle å forstå.
Simuler avhengigheter: Bruk jest.mock() eller jest.fn() for å isolere enheter og hindre at eksterne faktorer påvirker testene.

Hurtigsjekk

Hvilket av følgende utsagn om testing i Next.js med Jest og React Testing Library er RIKTIG?

Besvar den i den interaktive leksjonen

Oppsummering: enhets- og integrasjonstesting

Godt jobbet! Du har lært det grunnleggende om enhets- og integrasjonstesting i Next.js:

Jest er testrammeverket ditt.
React Testing Library gjør det mulig å teste komponenter slik en bruker ville gjort.
Enhetstester bekrefter at små, isolerte kodenheter fungerer.
Integrasjonstester kontrollerer hvordan ulike deler, som komponenter og API-er, fungerer sammen.
Du kan teste funksjoner, React-komponenter og Next.js-rutehåndterere.
Beste praksis omfatter å fokusere på brukeradferd og simulere avhengigheter.

Deretter skal vi utforske end-to-end-testing av komplette applikasjonsflyter.

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: 12
Leksjoner: 48

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Enhets- og integrasjonstesting» gratis?

Ja – du kan lese valgfritt 3 av leksjonene i læringsstien Next.js 15 for fullstack-webapper, inkludert «Enhets- og integrasjonstesting», 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 for fullstack-webapper inneholder totalt 4 leksjoner.

Hva lærer jeg i «Enhets- og integrasjonstesting»?

Skriv effektive enhets- og integrasjonstester for React-komponenter og Next.js-funksjoner med Jest og React Testing Library. Du øver på Next.js 15 for fullstack-webapper 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 for fullstack-webapper?

Ingen tidligere erfaring er nødvendig. Next.js 15 for fullstack-webapper 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 «Enhets- og integrasjonstesting»?

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 for fullstack-webapper-leksjonen?

Ja. Alle Next.js 15 for fullstack-webapper-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 for fullstack-webapper