TestingMSW 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(). - Lưu ý: phải setup msw/node cho Jest (không có service worker trong Node.js); cần polyfill
fetchtrong Node.js environment trước khi Jest 28.
MSW intercepts network requests at the Service Worker level (browser) or Node.js (msw/node), mocking API responses without modifying application code.
- Unlike directly mocking fetch (
jest.spyOn(global, 'fetch')): MSW intercepts at the network layer — the app code is unaware, no wrapping or injection needed. - Setup:
const server = setupServer(rest.get('/api/users', (req, res, ctx) => res(ctx.json([{ id: 1, name: 'Alice' }]))))→server.listen()in beforeAll,server.resetHandlers()in afterEach,server.close()in afterAll. - Benefits: test component behavior with realistic API responses (no need to mock React Query, SWR, or fetch); test error states with
server.use(rest.get('/api/users', (req, res, ctx) => res(ctx.status(500))))— override handler for a specific test; reuse handlers across tests and browser development. - MSW v2 uses
http.get()/http.post()instead ofrest.get().
Pitfall: must use msw/node for Jest (no service worker in Node.js); requires a fetch polyfill in Node.js environments before Jest 28.