외부 API 호출을 Mocking 해서 테스트하기.

뮤·2022년 10월 9일

MSW Mocking jest test 외부 API

SKILL

목록 보기

14/16

어? 이러면 안되는데?

테스트코드를 짜던 와중 이상한 부분을 확인했다.

2200ms

...?

왜 저렇게 시간이 많이 걸릴까, 라면서
코드의 흐름을 살펴보니 외부 API 호출값을 토대로 이것저것 하는 것이였다.

확인을 하고자 해당 부분에 콘솔을 찍어보니, 외부 API가 실제로 호출되고 있더라^^;;

테스트에서는 상관이 없겠지만, 실제 프로덕션에서 해당 API가 호출될 경우 문제가 커질 수 있어서
이것을 어떻게하면 좋을까 찾아보다가, 지금은 잘 쓰지 않는 파트에 msw/node라는 라이브러리로 짜진 코드가 있었다.

그리고 거기서 해답을 찾았다!

MSW (Mock Service Worker) 코드 예시 (get,post)

https://mswjs.io/

위의 사이트를 들어가면 자세한 내용을 볼 수 있지만, 그럴거면 이 글을 안썼다!

실제로 사용하는 것을 예제코드로 남겨놓기 위해 작성하는 것이다.

예제는 REST API만 한다. 왜? gql은 회사에서 지금 안써서...(ㅎㅎ...)

import { rest } from 'msw';
import { setupServer } from 'msw/node';

interface ExampleReqBody {
  name: string;
}

export const exampleHandlers = [
  rest.post<ExampleReqBody>('users', (req, res, ctx) => {
    if (req.body.name === '테스트') {
      return res(
        ctx.status(201),
        ctx.json({
          message: '등록되었습니다.',
        })
      );
    } else {
      return res(
        ctx.status(200),
        ctx.json({
          message: '이름을 확인해주세요.',
        })
      );
    }
  }),
];

export const exampleServer = setupServer(...exampleHandlers);

엥? 인터페이스 정의를 꼭 해줘야하나요?

응, 안하면 안돼

쿼리스트링은 어떻게 해야해요?

  rest.get('user', (req, res, ctx) => {
    req.url.searchParams.get('name');

    return res(
      ctx.status(200),
      ctx.json({
        message: '짜짠',
      })
    );
  }),

테스트코드에서 사용하는 방법!

// 최대한 상단에 놓기!
import { exampleServer } from './mocks/example';

describe('UserService', () => {
  beforeAll(async () => {
    exampleServer.listen(); // <- 이거가 중요하다! 최초 시작에 서버 오픈!
  });

  afterAll(async () => {
    exampleServer.close(); // <- 꼭 닫자! 최종 마무리에 서버 클로즈!
  });
});

// 테스트 모듈 연결~

// 테스트 실행~