Next.js 15 Fullstack Web Apps · Pelajaran

Mocking dan Pengujian Komponen Server

Uji Komponen Server asinkron, Server Actions, dan pengendali rute dengan melakukan mocking pada lapisan data dan panggilan jaringan agar pengujian fullstack Next.js Anda tetap cepat dan andal.

Mocking dan Pengujian Komponen Server adalah pelajaran Next.js 15 Fullstack Web Apps gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Next.js 15 Fullstack Web Apps, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Next.js 15 Fullstack Web Apps mencakup 4 pelajaran total.

Bagian dari pelajaran ini belum diterjemahkan dan ditampilkan dalam bahasa Inggris.

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.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Mocking dan Pengujian Komponen Server” gratis?

Ya — teks lengkap “Mocking dan Pengujian Komponen Server” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Next.js 15 Fullstack Web Apps, upgrade ke CoddyKit PRO. Kursus Next.js 15 Fullstack Web Apps mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Mocking dan Pengujian Komponen Server”?

Uji Komponen Server asinkron, Server Actions, dan pengendali rute dengan melakukan mocking pada lapisan data dan panggilan jaringan agar pengujian fullstack Next.js Anda tetap cepat dan andal. Kamu berlatih Next.js 15 Fullstack Web Apps dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Next.js 15 Fullstack Web Apps?

Tidak diperlukan pengalaman sebelumnya. Next.js 15 Fullstack Web Apps di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.

Berapa lama pelajaran “Mocking dan Pengujian Komponen Server” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Next.js 15 Fullstack Web Apps ini?

Ya. Setiap pelajaran Next.js 15 Fullstack Web Apps menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke Next.js 15 Fullstack Web Apps