[React / ts] MSW로 백엔드 구현 없이 API 테스트해보기

https://mswjs.io/docs/getting-started

Getting started

MSW(Mock Service Worker)는 클라이언트 측에서 네트워크 요청을 가로채고 이를 모킹할 수 있게 해주는 라이브러리이다.

주로 API 통신을 테스트하거나 개발 단계에서 백엔드 없이 API를 개발하고 테스트할 때 유용하게 사용된다.

 

다음 명령어를 통해 설치를 진행해준다.

npm install msw@latest --save-dev

 

이후 다음 명령어를 통해 mock service worker를 생성해준다.

npx msw init public/ --save

 

 

명령이 실행되면 public 폴더에 mockServiceWorker.js가 생성되고 여러가지 정보들이 담겨있게 된다.

 

MSW 설정

// src/mock/review.ts

import { BookReviewItem } from "@/models/book.model";
import { HttpResponse, http } from "msw";

const mockReviewData: BookReviewItem[] = [
  {
    id: 1,
    userName: "Kim",
    content: "감사합니다",
    createdAt: "2025-01-01",
    score: 5,
  },
  {
    id: 2,
    userName: "Lee",
    content: "고맙습니다",
    createdAt: "2025-01-02",
    score: 3,
  },
];

export const reiviewsById = http.get(
  "http://localhost:9999/reviews/:bookId",
  () => {
    return HttpResponse.json(mockReviewData, {
      status: 200,
    });
  }
);

먼저 MSW가 어떤 URL의 요청을 가로채 대신 응답할 것인지를 설정해주어야 한다.

이를 위해 msw의 http, HttpResponse를 import하여 mockReivewDate를 리턴하도록 설정해준다.

 

// src/mock/browser.ts

import { setupWorker } from "msw/browser";
import { reiviewsById } from "./review";

const handlers = [reiviewsById];

export const worker = setupWorker(...handlers);

MSW가 어떤 요청들을 처리할지를 정해주어야 한다.

처음에 만들었던 reviewsById를 handler에 등록해주고 setupWorker를 통해 worker를 세팅해준다.

만약 reviewsById외의 다른 요청들도 만들어 사용하고 싶다면 그들을 핸들러에 등록해주면 된다.

 

// index.tsx

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { state, ThemeContext } from "./components/context/ThemeContext";

async function mountApp() {
  if (process.env.NODE_ENV === "development") {
    const { worker } = require("./mock/browser");
    await worker.start();
  }

  const root = ReactDOM.createRoot(
    document.getElementById("root") as HTMLElement
  );
  root.render(
    <ThemeContext.Provider value={state}>
      <React.StrictMode>
        <App />
      </React.StrictMode>
    </ThemeContext.Provider>
  );
}

mountApp();

마지막으로 index.tsx에서 worker.start()를 통해 msw를 실행해주면 된다.

 

실제로 네트워크를 확인해보면, 해당 요청에 대한 응답으로 지정해주었던 데이터가 도착한 것을 볼 수 있다.

 

Faker를 통해 동적으로 데이터 생성

https://makeaccident.tistory.com/169

[Node.js] Faker를 활용하여 랜덤 데이터 사용해보기

https://fakerjs.dev/

Faker

 

그러나 위의 방식은 데이터를 직접 하나하나 만들어주어야 한다.

많은 양의 다양한 데이터가 필요한 경우 데이터를 직접 만드는 것은 매우 비효율적인 일이다.

Faker를 통해 간단하고 쉽게 많고 다양한 데이터를 만들어 전달해보도록 하자.

 

다음 명령어를 통해 faker를 설치해준다.

npm install @faker-js/faker --save-dev

 

// review.ts

import { BookReviewItem } from "@/models/book.model";
import { HttpResponse, http } from "msw";
import { faker } from "@faker-js/faker";

// const mockReviewData: BookReviewItem[] = [
//   {
//     id: 1,
//     userName: "Kim",
//     content: "감사합니다",
//     createdAt: "2025-01-01",
//     score: 5,
//   },
//   {
//     id: 2,
//     userName: "Lee",
//     content: "고맙습니다",
//     createdAt: "2025-01-02",
//     score: 3,
//   },
// ];

const mockReviewData: BookReviewItem[] = Array.from({ length: 8 }).map(
  (_, index) => ({
    id: index,
    userName: faker.person.firstName(),
    content: faker.lorem.paragraph(),
    createdAt: faker.date.past().toISOString(),
    score: faker.number.int({ min: 1, max: 5 }),
  })
);

export const reiviewsById = http.get(
  "http://localhost:9999/reviews/:bookId",
  () => {
    return HttpResponse.json(mockReviewData, {
      status: 200,
    });
  }
);

faker를 활용하여 id, userName, content 등을 설정해준다.

 

8개의 랜덤한 리뷰들이 응답되는 것을 확인할 수 있다.