MSW Handlers 여러개 사용하기

MSW를 잘 쓰고 있는데...
문제라면 문제가 리스트를 반환하다보니 코드가 너무 길어진다....
하나의 Handlers파일에 다 쓰기에는 너무 길고 기능별로 나누면 좋겠다는 생각이 들어서 여러개 사용할 수도 있지 않을까 고민하게 되었다.

🌟 Handlers 여러개 만들기

우선 Handlers.ts파일을 하나더 생성해주었다.

// src/mocks/movieHandlers.ts

import { http, HttpResponse } from "msw";

export const movieHandlers = [
  http.get("/api/movies", ({ request }) => {
  
    // 쿼리스트링 가져오기
    const url = new URL(request.url);
    const id = url.searchParams.get("genre");
    console.log(id);

    // 장르가 1이면
    if (id == "1") {
      return HttpResponse.json({
        movieList: [
          {
            movieId: 1,
            poster: "http://file.koreafilm.or.kr/thm/02/00/04/31/tn_DPK011800.jpg",
          },
          {
            movieId: 2,
            poster: "http://file.koreafilm.or.kr/thm/02/00/04/31/tn_DPK011800.jpg",
          },
          
         // 3부터...356까지

          {
            movieId: 357,
            poster: "http://file.koreafilm.or.kr/thm/02/00/01/39/tn_DPK004235.JPG",
          },
        ],
        totalCnt: 357,
      });
    }
  }),
];

// src/mocks/rankHandlers.ts

import { http, HttpResponse } from "msw";

export const rankHandlers = [
  http.get("/api/fundings", ({ request }) => {
    const url = new URL(request.url);
    const status = url.searchParams.get("status");

    if (status == "progress") {
      return HttpResponse.json([
        {
          movieId: 1,
          poster: "http://file.koreafilm.or.kr/thm/02/00/04/85/tn_DPK014285.jpg",
          status: "무딩중",
          crowdCnt: 200,
          peopleCnt: 175,
          requestCnt: 0,
        },
        // 2부터...9까지
        {
          movieId: 10,
          poster: "http://file.koreafilm.or.kr/thm/02/00/01/39/tn_DPK004235.JPG",
          status: "무딩중",
          crowdCnt: 200,
          peopleCnt: 20,
          requestCnt: 0,
        },
      ]);
    }
  }),
];

API종류에 따라서 파일을 분리했다.

🌟 Worker에 여러 Handlers 적용하기

쓰는법은 간단하다!

// browser.ts

import { setupWorker } from "msw/browser";
import { movieHandlers } from "./movieHandlers";
import { rankHandlers } from "./rankHandlers";

const worker = setupWorker(...movieHandlers, ...rankHandlers);

export default worker;

browser.ts에서 여러개 import해서 사용하면 된다~~
끝!!!