Next.js 15 -täyden pinon verkkosovellukset · Oppitunti

Server Componentien mockaus ja testaaminen

Testatkaa asynkronisia Server Componentteja, Server Actionseja ja route handlereita mockaamalla datakerrokset ja verkkokutsut, jotta fullstack Next.js -testinne pysyvät nopeina ja luotettavina.

Oppitunti 4/413 vaihetta

Server Componentien mockaus ja testaaminen on ilmainen Next.js 15 -täyden pinon verkkosovellukset-oppitunti CoddyKitissä. Tämä on oppitunti 4/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu Next.js 15 -täyden pinon verkkosovellukset-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Next.js 15 -täyden pinon verkkosovellukset-kurssilla on yhteensä 4 oppituntia.

Server Components -haaste

Server Components -komponentit ovat asynkronisia ja suoritetaan palvelimella, joten perinteiset asiakaspuolen renderöintitestityökalut eivät sovellu niihin täydellisesti. Tärkeintä on testata niiden datariippuvuudet erillään ja testata renderöity tuloste erikseen.

Erottakaa logiikka renderöinnistä

Siirtäkää datan hakeminen ja liiketoimintalogiikka tavallisiin funktioihin. Puhtaat funktiot on erittäin helppo yksikkötestata ilman minkään renderöimistä.

export function formatPrice(cents) {
  return '$' + (cents / 100).toFixed(2);
}

Puhtaan apufunktion testaaminen

Puhdasta apufunktiota voi testata missä tahansa ilman ainuttakaan mockia.

function formatPrice(cents) {
  return '$' + (cents / 100).toFixed(2);
}
console.log(formatPrice(1999) === '$19.99');
console.log(formatPrice(500) === '$5.00');

Datakerroksen mockaaminen

Server Components -komponentit kutsuvat yleensä repositoriota tai ORM:ää. Mockatkaa kyseinen moduuli, jotta testit eivät käytä oikeaa tietokantaa.

import { vi } from 'vitest';
import * as db from '@/lib/db';

vi.spyOn(db, 'getUser').mockResolvedValue({ id: 1, name: 'Ada' });

Asynkronisen Server Components -komponentin renderöinti

Koska komponentti on asynkroninen, voitte käyttää await-operaattoria sen elementtipuun hakemiseen ja tehdä sille sitten väitteitä renderöintiapuohjelmalla.

import { render, screen } from '@testing-library/react';
import Profile from '@/app/profile/page';

it('shows the name', async () => {
  render(await Profile());
  expect(screen.getByText('Ada')).toBeInTheDocument();
});

fetchin mockaaminen MSW:llä

Kun komponentti hakee tietoja ulkoisesta API:sta, siepatkaa pyyntö Mock Service Workerilla (MSW) sen sijaan, että stubbaisitte fetchin manuaalisesti.

import { http, HttpResponse } from 'msw';

export const handlers = [
  http.get('https://api.example.com/user', () =>
    HttpResponse.json({ name: 'Ada' })
  ),
];

Server Actions -toimintojen testaaminen

Server Actions -toiminnot ovat asynkronisia funktioita. Kutsukaa niitä suoraan mockattujen riippuvuuksien kanssa ja tehkää väitteitä sivuvaikutuksista ja palautusarvoista.

import { createTodo } from '@/app/actions';
import * as db from '@/lib/db';

it('creates a todo', async () => {
  const spy = vi.spyOn(db, 'insertTodo').mockResolvedValue({ id: 1 });
  await createTodo('Write tests');
  expect(spy).toHaveBeenCalledWith('Write tests');
});

revalidatePathin mockaaminen

Toiminnot kutsuvat usein revalidatePath-funktiota. Mockatkaa next/cache, jotta kutsu ei aiheuta virhettä pyyntökontekstin ulkopuolella, ja varmistakaa, että sitä kutsuttiin.

vi.mock('next/cache', () => ({
  revalidatePath: vi.fn(),
}));

Route Handlers -käsittelijöiden testaaminen

Route handlerit vastaanottavat Request-olion ja palauttavat Response-olion. Luokaa pyyntö, kutsukaa käsittelijää ja tarkastelkaa vastausta.

import { POST } from '@/app/api/todos/route';

it('returns 400 on empty body', async () => {
  const req = new Request('http://t/api/todos', { method: 'POST', body: '{}' });
  const res = await POST(req);
  expect(res.status).toBe(400);
});

Pidä testit deterministisinä

Välttäkää epävakaita testejä:

Nollatkaa mockit testien välillä (vi.clearAllMocks()).
Jäädyttäkää aika päivämäärien testauksen ajaksi.
Älkää koskaan kutsuko oikeita verkkoja tai tietokantoja.

Testauspyramidi

Tasapainottakaa testikokonaisuus: käyttäkää paljon nopeita yksikkötestejä logiikan testaamiseen, vähemmän integraatiotestejä komponenttien ja datan testaamiseen sekä pieni määrä E2E-testejä (Playwright) kriittisten toimintokulkujen testaamiseen.

Pikatarkistus

Mikä on suositeltu tapa testata asynkronista Server Components -komponenttia, joka kutsuu ORM:ää?

Vastaa interaktiivisessa oppitunnissa

Kertaus

Opitte testaamaan Next.js:n fullstack-koodia:

Erottakaa puhdas logiikka, jotta sen yksikkötestaus on helppoa.
Mockatkaa datakerros ja käyttäkää MSW:tä verkkokutsuihin.
Odottakaa asynkronisia Server Components -komponentteja; kutsukaa Server Actions -toimintoja ja route handlereita suoraan.
Pidätte testit deterministisinä ja noudatatte testauspyramidia.

Aloita maksutta

Opi TypeScript tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 12
Oppitunnit: 48

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Server Componentien mockaus ja testaaminen” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa Next.js 15 -täyden pinon verkkosovellukset-oppimispolun 3 oppituntia, myös oppitunnin “Server Componentien mockaus ja testaaminen”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Next.js 15 -täyden pinon verkkosovellukset-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Server Componentien mockaus ja testaaminen”?

Testatkaa asynkronisia Server Componentteja, Server Actionseja ja route handlereita mockaamalla datakerrokset ja verkkokutsut, jotta fullstack Next.js -testinne pysyvät nopeina ja luotettavina. Harjoittelet Next.js 15 -täyden pinon verkkosovellukset-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni Next.js 15 -täyden pinon verkkosovellukset-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin Next.js 15 -täyden pinon verkkosovellukset-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 4/4.

Kuinka kauan ”Server Componentien mockaus ja testaaminen”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä Next.js 15 -täyden pinon verkkosovellukset-oppitunnilla?

Kyllä. Jokainen Next.js 15 -täyden pinon verkkosovellukset-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

Yksikkö- ja integraatiotestaus
Päästä päähän -testaus Playwrightilla
Monorepot ja microfrontendit
Server Componentien mockaus ja testaaminen

← Takaisin: Next.js 15 -täyden pinon verkkosovellukset