Orval로 MSW 핸들러 자동 생성하고 React Query 테스트까지 한 번에

도입: 명세서 한 번이면 클라이언트와 목까지

Orval은 OpenAPI 명세서를 바탕으로 RESTful 클라이언트 코드를 만들어주는 CLI다. 이번에는 mock 옵션으로 MSW(mock service worker)용 핸들러를 만들고, react-query 훅과 함께 간단한 테스트를 작성하는 흐름을 다룬다.

전개: 생성되는 코드와 테스트 환경

Orval 설정에서 mock을 true, client를 react-query로 두면 getTodos, useGetTodos 같은 훅과 getGetTodosMockHandler, getTodoAPIMock 같은 목 핸들러가 함께 생성된다. vitest와 react-testing-library 환경에서 setupServer에 이 핸들러를 올리고, 이전 TODO 표시·신규 TODO 등록 시나리오를 테스트하고 구현하는 절차가 정리돼 있다.

결말: 한 번 설정하면 반복 사용

OpenAPI 한 편과 Orval 한 번의 실행으로 클라이언트·스키마·MSW 핸들러를 맞춰 두면, 테스트에서 응답을 오버라이드하고 화면 검증까지 이어가기 수월하다. 실제 저장소 예제와 Orval MSW 가이드가 참고로 소개된다.