[React] Mock Server Work Create Use Example

import "@testing-library/jest-dom";

import { server } from "./mocks/server";

// 모든 테스트 서버를 생성
beforeAll(() => server.listen());

// 테스트 이후에 핸들러 초기화
afterEach(() => server.resetHandlers());

// 테스트 이후에 서버 종료
afterAll(() => server.close());

Mock Server

• 실제 서버와 유사한 동작을 하는 가짜 서버이다.
• 서버를 향한 네트워크 요청을 가로채서 모의 응답을 내려주는 역할을 한다.

 

Msw 설치

npm install msw

 

api handler 생성

ex) handlers.tsx

import { rest } from "msw";

export const handlers = [
  rest.get("http://localhost:5000/test", (req, res, ctx) => {
    return res(
      ctx.json(
      ...
      )
    );
  }),
];

 

server 생성

ex) server.tsx

• 위에서 만든 handler 주입

import { setupServer } from "msw/node";
import { handlers } from "./handlers";

// mocking server 생성
export const server = setupServer(...handlers)

 

server config 설정

ex) setupTests.tsx

import "@testing-library/jest-dom";

import { server } from "./mocks/server";

// 모든 테스트 서버를 생성
beforeAll(() => server.listen());

// 테스트 이후에 핸들러 초기화
afterEach(() => server.resetHandlers());

// 테스트 이후에 서버 종료
afterAll(() => server.close());