[Jest,React] Front에서 API 호출 값을 조작하기(feat, mockResolvedValue, axios-mock-adapter)

1. 인사

안녕하세요. 재밌는 글 주제를 가져와봤습니다.
이름하야 Front에서 API 호출 값을 조작하기!!

---

2. 소개 배경

팀 프로젝트를 진행하던 중, back과 front의 연동 과정에서 front는 준비가 되었으나 back은 아직 준비 중이던 때, 작성한 code에 대해 test를 진행하고자 front 내부에서 api 호출 값을 조작하는 과정을 거치게 되었습니다.
결과적으로 생각보다 꽤 재미있고 쓸모가 있다고 생각이 들어 블로그로 정리해보려 합니다.

---

3. mockResolvedValue

import {jest, test} from '@jest/globals';

test('async test', async () => {
  const asyncMock = jest.fn<() => Promise<number>>().mockResolvedValue(43);

  await asyncMock(); // 43
});

참고주소(공식문서)

위의 소스는 되게 간단합니다. 공식문서의 소스를 참고하였구요.
mockResolvedValue를 통해 asyncMock이라는 비동기 함수를 호출 하면 "43"을 반환하도록 소스 코드를 작성한 것입니다.

---

4. axios-mock-adapter

axios-mock-adapter은 Axios로 만든 HTTP 요청을 가로채고 가짜 응답을 반환하도록 하여 실제 HTTP 요청을 하지 않고도 애플리케이션을 테스트할 수 있는 라이브러리 입니다.

참고주소

이를 통해 저는 앞서 만든 mock data를 HTTP 요청 시, 응답으로 보내주려고 합니다.

const mock = new MockAdapter(axios);
mock.onGet('url').reply(200, {
            응답으로 보내려는 값
        })

위와 같이 작성하게 되면 해당 url 호출 시, status 200과 "응답으로 보내려는 값"을 front로 전송하게 되는 것이죠.

---

5. 실제 사용

그럼 위에서 설명한 것들을 제 프로젝트에는 어떤식으로 적용하였는지 보여드리도록 하겠습니다.

• kakaoauth.test.tsx

const mockKakaoAccessToken = jest.fn<() => Promise<string>>().mockResolvedValue("L1Mjs_s09jTR-gDBjmlCBBXbgV8JMsianSUKPXPsAAABi-9-KhTRDLJpR7eCqA");
const kakaoAccessToken:string = await mockKakaoAccessToken();
expect(kakaoAccessToken).toBe("L1Mjs_s09jTR-gDBjmlCBBXbgV8JMsianSUKPXPsAAABi-9-KhTRDLJpR7eCqA");

const mock = new MockAdapter(axios);
mock.onGet('http://localhost:8080/login/oauth2/code/kakao').reply(200, {
     kakaoAccessToken,
})

그럼 간단하게 소스코드 설명을 하겠습니다.
현재 code는 kakao social login을 진행하는 소스코드의 test 코드 중 일부분 입니다.
accessToken을 back으로부터 받았다고 가정하기 위해 다음과 같이 코드를 작성하였습니다.

mockResolvedValue를 통해 비동기 함수인 mockKakaoAccessToken의 값을 지정하였습니다. 그 후, mockKakaoAccessToken를 호출하여 해당 값을 kakaoAccessToken에 지정하고 값이 적절하게 불러와졌는지 expect를 통해 확인하였습니다.

다음으로 axios-mock-adapter를 통해 "http://localhost:8080/login/oauth2/code/kakao" 로 요청을 보내면 응답으로 status 200과 제가 만든 mock data인 kakaoAccessToken을 front로 전달해주는 식으로 코드를 작성하였습니다.

이를 통해 저는 back과 통신 없이 제가 만든 mock accessToken을 front로 준 후, 제가 하고자하는 test를 진행할 수 있었습니다.

궁금한 점이나 잘못된 점 등은 댓글로 남겨주시면 감사하겠습니다!!