Mocking Tầng Mạng với MSW (Mock Service Worker)

Chặn request ở network boundary để kiểm thử Loading, Error, Empty và Success mà không cần bật backend thật.

Core Mental Model

Thay vì mock trực tiếp `fetch` hay `axios`, MSW tái sử dụng HTTP handlers ở network boundary: Service Worker trong browser và request interception với `setupServer` trong Node tests.

Key Takeaways & Principles

MSW sử dụng các handler khai báo declarative: `http.get('/api/users', () => HttpResponse.json(...))`.

Dễ dàng giả lập các mã lỗi HTTP thực tế: 401 Unauthorized, 403 Forbidden, 429 Rate Limit, 500 Server Error.

Kiểm thử trọn vẹn luồng Fetching, Re-fetching, Caching và Invalidation của TanStack Query trong môi trường test cô lập.

Enterprise React Testing & Production Readiness

advanced

20 phút

#MSW

#Mock Service Worker

#Integration Testing

#TanStack Query