Frontend testlerinde API çağrılarını nasıl mock'larsınız? MSW (Mock Service Worker) neden tercih edilir?

fetch'i veya axios'u doğrudan vi.mock ile taklit etmek, testi uygulamanın iç detaylarına bağlar. MSW ise isteği ağ seviyesinde yakalar: uygulama kodu gerçek fetch çağrısı yapar, MSW sahte bir HTTP cevabı döner. Bu sayede HTTP istemcisini değiştirseniz bile testler bozulmaz ve aynı mock'lar hem testlerde (Node) hem tarayıcıda (geliştirme, Storybook) kullanılabilir.

// mocks/handlers.ts (MSW v2)
import { http, HttpResponse } from "msw";

export const handlers = [
  http.get("/api/users/:id", ({ params }) =>
    HttpResponse.json({ id: params.id, name: "Ayşe" })
  ),
];

// vitest.setup.ts
import { setupServer } from "msw/node";
import { handlers } from "./mocks/handlers";

export const server = setupServer(...handlers);
beforeAll(() => server.listen({ onUnhandledRequest: "error" }));
afterEach(() => server.resetHandlers());
afterAll(() => server.close());

// UserCard.test.tsx
test("hata durumunda mesaj gösterir", async () => {
  server.use(
    http.get("/api/users/:id", () => new HttpResponse(null, { status: 500 }))
  );
  render(<UserCard id="1" />);
  expect(await screen.findByRole("alert")).toHaveTextContent("Bir hata oluştu");
});

test("kullanıcı adını gösterir", async () => {
  render(<UserCard id="1" />);
  expect(await screen.findByText("Ayşe")).toBeInTheDocument();
});

İyi pratikler

• onUnhandledRequest: "error" ile mock'lanmamış istekleri yakalayın.
• Her testten sonra resetHandlers ile test bazlı override'ları temizleyin.
• Hata, boş liste, yavaş cevap (await delay(2000)) gibi durumları test bazında server.use ile kurun.
• TanStack Query kullanıyorsanız her test için yeni bir QueryClient oluşturun ve retry: false verin; aksi hâlde cache testler arasında sızar ve hata testleri retry yüzünden yavaşlar.