msw

Alasan ada: unit test tidak menunggu backend dan tidak pernah menembak server sungguhan.

Mode: frontend.

npm create nextjs-kit@latest my-app -- --mode frontend --modules msw

Handler

Tambahkan satu handler per endpoint backend di src/mocks/handlers.ts:

import { http, HttpResponse } from "msw";

export const handlers = [
  http.get("*/health", () => HttpResponse.json({ status: "ok" })),
];

Di unit test

vitest.setup.ts menyalakan server MSW dengan onUnhandledFrame: "error". Request yang tidak punya handler membuat test gagal, jadi tidak ada panggilan jaringan tersembunyi.

Di dev server

MSW tidak bisa dipakai untuk memalsukan backend saat next dev lewat instrumentation.ts. Next.js memasang pembungkus fetch-nya saat server boot, sebelum register() berjalan, sehingga fetch di route handler dan Server Component tidak melewati MSW (dicoba di Next 16.4.5 dengan MSW 3.0.4: register() jalan dan MSW aktif, tetapi tidak ada request yang tercegat).

Untuk pengembangan tanpa backend, jalankan mock sebagai server HTTP terpisah dan arahkan API_BASE_URL ke sana, misalnya dengan @mswjs/http-middleware, yang memakai ulang handler yang sama.