MSW (Mock Service Worker) là gì? Tại sao tốt hơn mocking fetch trực tiếp?

MSW intercept network requests ở service worker level (browser) hoặc Node.js (msw/node), cho phép mock API responses mà không thay đổi code của app.

• Khác với mock fetch trực tiếp (jest.spyOn(global, 'fetch')): MSW intercept ở network layer — app code không biết gì, không cần wrap hay inject mock vào component.
• Setup: const server = setupServer(rest.get('/api/users', (req, res, ctx) => res(ctx.json([{ id: 1, name: 'Alice' }])))) → server.listen() trong beforeAll, server.resetHandlers() trong afterEach, server.close() trong afterAll.
• Lợi ích: test component behavior với realistic API responses (không cần mock React Query, SWR, hay fetch); test error states bằng server.use(rest.get('/api/users', (req, res, ctx) => res(ctx.status(500)))) — override handler cho một test cụ thể; reuse handlers giữa tests và browser development (intercept trong dev cũng được).
• MSW v2 dùng http.get()/http.post() thay vì rest.get().

Pitfall: phải setup msw/node cho Jest (không có service worker trong Node.js); cần polyfill fetch trong Node.js environment trước khi Jest 28.