💜Vitest | MSW 사용하여 API 요청 mocking

⚡MSW(mock-service-worker)

• 서버의 응답 값을 모의 응답으로 보냄
• API 요청이 발생할 때 서버로 전달되는 요청을 가로채고 그에 대한 모의 응답을 보내게 제어

⚡기능 테스트에서 사용 이유

• 기능테스트는 실제 환경에서 수행하는 테스트(end-to-end)가 아니라서 보통 서버를 끼고 하지 않음
• 테스트 중에는 실제 네트워크 호출을 막고, 서버 응답(옵션)에 따른 테스트 조건 설정

❓MSW 사용하지 않고 axios를 바로 mocking하면?

• 동시에 두 가지를 요청하는 한 컴포넌트에서 axios를 mocking하면, 반환값으로는 이를 관리하기 어렵고 불안정
• 페이지를 다시 정렬하면 모의 화면에서 반환값의 순서가 잘못되어 테스트 실패할 수 있음
• MSW 핸들러 함수로 요청의 파라미터 등에 따라 다른 값 반환 가능
• 쿠키, 이진 응답(예: 이미지) 등의 요청 처리 가능
  요약: 간단한 앱에서는 모킹이 가능하지만 더 복잡한 앱에서는 MSW로 다양한 도구를 이용하는 것이 좋음

⚡사용 방법

• 공식문서

1. 설치

yarn add msw

2. 핸들러 파일 생성

• 특정 URL, 경로에 어떤 응답이 왔는지를 파악
• 형식
  • 핸들러타입.목업메서드("전체 url", ()=>{ return 응답객체 반환 })
  • https://mswjs.io/docs/network-behavior/rest
• REST API 호출 시 http 핸들러 타입 사용

// src.mocks.handler.ts 생성
import { http, HttpResponse } from "msw";

export const handlers = [
http.get("http://localhost:3030/scoops", async () => {
    return HttpResponse.json([
      { name: "Chocolate", imagePath: "/images/chocolate.png" },
      { name: "Vanilla", imagePath: "/images/vanilla.png" },
    ]);
  })
]

• HttpResponse.json() : 응답 객체 반환시 일반적으로 감싸주는 메서드
• request, parameter 활용해 응답값 가공 가능
  • https://mswjs.io/docs/recipes/query-parameters/

3. 요청을 처리할 테스트 서버 파일 생성

• 테스트 수행 중에는 서버가 계속해서 리스닝하면서 실제로 네트워크를 탔을 호출 가로채야 함(setupTests.js)
• 한 테스트 끝날 때마다 서버 핸들러 리셋

// src/mocks/server.ts 생성
import { setupServer } from 'msw/node'
import { handlers } from './handlers'
 
export const server = setupServer(...handlers)

4. setup 설정

// vitest.setup.ts 추가
import { beforeAll, afterEach, afterAll } from 'vitest'
import { server } from './src/mocks/node'
 
beforeAll(() => server.listen())
afterEach(() => server.resetHandlers())
afterAll(() => server.close())

⚡테스트 코드

• 페이지에서 비동기식으로 나타나는 요소를 테스트하기 위해서는 await , findBy 필수 사용(getBy 사용 X)

const images = await screen.findAllByRole("img", { name: /test$/i });
expect(images).toHaveLength(3);