Mock API trong test frontend như thế nào? MSW (Mock Service Worker) khác gì so với mock fetch trực tiếp?

MSW intercept network request ở tầng service worker (browser) hoặc msw/node (Node.js), cho phép mock API response 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 (MSW v2):

const server = setupServer(
  http.get('/api/users', () => HttpResponse.json([{ id: 1, name: 'Alice' }]))
)

server.listen() trong beforeAll, server.resetHandlers() trong afterEach, server.close() trong afterAll. API v1 cũ (rest.get + ctx.json) là legacy — chỉ gặp trong codebase chưa nâng cấp.

Lợi ích:
- Test component với API response thực tế — không cần mock React Query, SWR hay fetch.
- Test error state bằng override handler cho một test: server.use(http.get('/api/users', () => new HttpResponse(null, { status: 500 }))).
- Reuse handlers giữa tests và browser development.

Lưu ý: Jest phải dùng msw/node (Node.js không có service worker); MSW v2 dựa trên fetch API chuẩn — Node 18+ có fetch native, Node cũ hơn cần polyfill.

Xem toàn bộ Testing cùng filter theo level & chủ đề con.

Mở danh sách Testing

Setup (MSW v2):

const server = setupServer(
  http.get('/api/users', () => HttpResponse.json([{ id: 1, name: 'Alice' }]))
)

Lưu ý: Jest phải dùng msw/node (Node.js không có service worker); MSW v2 dựa trên fetch API chuẩn — Node 18+ có fetch native, Node cũ hơn cần polyfill.