Mockowanie i testowanie komponentów serwerowych
Testuj asynchroniczne komponenty serwerowe, Server Actions i handlery tras, mockując warstwy danych oraz wywołania sieciowe, aby testy fullstack Next.js pozostały szybkie i niezawodne.
Mockowanie i testowanie komponentów serwerowych to bezpłatna lekcja Next.js 15 Fullstack Web Apps na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Next.js 15 Fullstack Web Apps, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Next.js 15 Fullstack Web Apps zawiera 4 lekcji w sumie.
Części tej lekcji nie zostały jeszcze przetłumaczone i są wyświetlane po angielsku.
The Server Component Challenge
Server Components are async and run on the server, so classic client-render test tools do not fit perfectly. The key is to test their data dependencies in isolation and test the rendered output separately.
Separate Logic from Rendering
Extract data-fetching and business logic into plain functions. Pure functions are trivial to unit test without rendering anything.
export function formatPrice(cents) {
return '$' + (cents / 100).toFixed(2);
}Testing a Pure Helper
A pure helper is testable anywhere with no mocks at all.
function formatPrice(cents) {
return '$' + (cents / 100).toFixed(2);
}
console.log(formatPrice(1999) === '$19.99');
console.log(formatPrice(500) === '$5.00');Mocking the Data Layer
Server Components usually call a repository or ORM. Mock that module so tests do not hit a real database.
import { vi } from 'vitest';
import * as db from '@/lib/db';
vi.spyOn(db, 'getUser').mockResolvedValue({ id: 1, name: 'Ada' });Rendering an Async Server Component
Because the component is async, you can await it to get its element tree, then assert on it with your render utility.
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();
});Mocking fetch with MSW
When a component fetches from an external API, intercept the request with Mock Service Worker (MSW) instead of stubbing fetch by hand.
import { http, HttpResponse } from 'msw';
export const handlers = [
http.get('https://api.example.com/user', () =>
HttpResponse.json({ name: 'Ada' })
),
];Testing Server Actions
Server Actions are async functions. Call them directly with mocked dependencies and assert on side effects and return values.
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');
});Mocking revalidatePath
Actions often call revalidatePath. Mock next/cache so the call does not throw outside a request scope, and assert it was invoked.
vi.mock('next/cache', () => ({
revalidatePath: vi.fn(),
}));Testing Route Handlers
Route handlers take a Request and return a Response. Build a request, call the handler, and inspect the response.
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);
});Keep Tests Deterministic
Avoid flaky tests:
- Reset mocks between tests (
vi.clearAllMocks()). - Freeze time when testing dates.
- Never call real networks or databases.
The Testing Pyramid
Balance your suite: many fast unit tests for logic, fewer integration tests for components plus data, and a small set of E2E tests (Playwright) for critical flows.
Quick Check
What is the recommended way to test an async Server Component that calls your ORM?
Recap
You learned to test fullstack Next.js code:
- Separate pure logic for easy unit tests.
- Mock the data layer and use MSW for network calls.
- Await async Server Components; call Server Actions and route handlers directly.
- Keep tests deterministic and follow the testing pyramid.
Często zadawane pytania
Czy lekcja „Mockowanie i testowanie komponentów serwerowych” jest bezpłatna?
Tak — pełny tekst „Mockowanie i testowanie komponentów serwerowych” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Next.js 15 Fullstack Web Apps, przejdź na CoddyKit PRO. Kurs Next.js 15 Fullstack Web Apps zawiera 4 lekcji w sumie.
Co nauczysz się w „Mockowanie i testowanie komponentów serwerowych”?
Testuj asynchroniczne komponenty serwerowe, Server Actions i handlery tras, mockując warstwy danych oraz wywołania sieciowe, aby testy fullstack Next.js pozostały szybkie i niezawodne. Ćwiczysz Next.js 15 Fullstack Web Apps z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć Next.js 15 Fullstack Web Apps?
Nie wymagamy żadnego doświadczenia. Next.js 15 Fullstack Web Apps w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.
Ile czasu zajmuje lekcja „Mockowanie i testowanie komponentów serwerowych”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji Next.js 15 Fullstack Web Apps?
Tak. Każda lekcja Next.js 15 Fullstack Web Apps zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Testy jednostkowe i integracyjne
- Testy end-to-end z Playwright
- Monorepo i mikrofrontendy
- Mockowanie i testowanie komponentów serwerowych