MSW — اعترض الشبكة بدل ما تغيّر كودك

الفكرة

بدل ما تعمل mock لـ fetch وتختبر إنك ناديتها، MSW يعترض request حقيقية عند network boundary ويرجع response متحكم فيها. كود التطبيق يفضل بينادي fetch عادي.

في المتصفح يستخدم Service Worker. في Node tests يستخدم interceptors من خلال setupServer.

Handler واحدة

import { http, HttpResponse } from "msw";export const handlers = [  http.get("https://api.example.com/user", () => {    return HttpResponse.json({ id: 7, name: "سعيد" });  }),];

مع Vitest في Node

import { setupServer } from "msw/node";import { handlers } from "./handlers.js";export const server = setupServer(...handlers);

import { afterAll, afterEach, beforeAll } from "vitest";import { server } from "./server.js";beforeAll(() => server.listen({ onUnhandledRequest: "error" }));afterEach(() => server.resetHandlers());afterAll(() => server.close());

onUnhandledRequest: "error" يمنع test من الخروج للإنترنت بالغلط. وresetHandlers يشيل overrides الخاصة بكل test.

جرّب error path

import { http, HttpResponse } from "msw";server.use(  http.get("https://api.example.com/user", () => {    return HttpResponse.json(      { message: "service unavailable" },      { status: 503 },    );  }),);

كده تقدر تختبر loading وempty وerror وretry من غير backend شغالة.

في المتصفح

نفس handlers تدخل على:

import { setupWorker } from "msw/browser";import { handlers } from "./handlers.js";export const worker = setupWorker(...handlers);

وده مفيد للـ local development، demos، وcomponent tests في browser. متشغّلوش في production بالغلط.

MSW ولا mock fetch؟

خلّصت الفصل لما

• تعرف إن MSW يعترض network مش import
• تستخدم setupServer في Node وsetupWorker في المتصفح
• تمنع unhandled requests في الاختبارات
• تعمل reset للـ handlers بعد كل test