MSW(Mock Service Worker)는 네트워크 수준에서 요청을 가로채 정해 둔 응답을 돌려주는 API(Application Programming Interface) 모킹(Mocking) 라이브러리다. 브라우저에서는 Service Worker로, Node(테스트)에서는 요청 모듈을 가로채는 방식으로 동작한다. 앱 코드의 fetch·axios를 고치지 않는다.
// handlers.js — 엔드포인트와 응답 모양만 맞추면 된다
import { http, HttpResponse, delay } from 'msw'
export const handlers = [
http.get('/api/scoops', async () => {
await delay() // 로딩 상태를 보려면 지연을 준다
return HttpResponse.json([{ name: 'Vanilla' }])
}),
]
// 테스트 설정
const server = setupServer(...handlers) // msw/node
beforeAll(() => server.listen())
afterEach(() => server.resetHandlers()) // 테스트 중 바꾼 핸들러를 되돌림
afterAll(() => server.close())- 기능 테스트는 실제 서버에 의존하면 안 된다. 응답을 고정해 두면 실패 원인이 테스트 대상에만 있게 된다
- 에러 경로는 그 테스트 안에서
server.use(http.get(url, () => new HttpResponse(null, { status: 500 })))로 덮어써서 검증한다 - axios를 직접 모킹하는 것보다 요청 순서나 동시 요청 같은 실제 상황에 가깝다. 같은 핸들러를 개발 서버와 Storybook에서도 재사용할 수 있다(Storybook)
- 핸들러가 없는 요청에는 경고를 내서 빠진 모킹을 알려 준다
- 비동기로 그려지는 결과는
findBy로 기다린다(React Testing Library). 테스트 대역 일반론은 자가 테스트 코드
출처: MSW 문서