axios-mock-adapter 인스턴스 제대로 넘기기

axios-mock-adapter 는 react 측에서도 권장하는 mocking 라이브러리이다.

 

react-testing-library 에서는 서버에서 실제로 데이터를 받아와서는 안되고 모킹 데이터를 만들어 테스트 해야 한다.

import axios from 'axios';
 
const mock = new MockAdapter(axios, { delayResponse: 200 }); // <----- 기본 axios 인스턴스 넘겨줌
mock.onGet('http://localhost:8080/api/game/easy?page=1').reply(200, [
  {
    id: 'dkpark10',
    record: '9.849',
    ranking: 1,
  },
  {
   id: '익명_OzdzRPLf9',
    record: '12.000',
    ranking: 2,
    totalItemCount: 10,
 },
  {
    id: '익명_OzdzRPLf9',
    record: '15.100',
    ranking: 3,
    totalItemCount: 10,
  },
]);

실제로 공식 문서나 여러 구글링을 해서 나온 예제도 MockAdapter 클래스 첫번째 파라미터에 기본 axios를 넘겨준다.

 

하지만 axios 를 커스터마이징 해서 create를 해서 반환받은 인스턴스를 쓰는 경우에는 이 객체를 넘겨줘야 한다.

 

myaxios.js

import axios from 'axios';
 
export default axios.create({
  baseURL: process.env.NODE_ENV === 'development' ? 'http://localhost:8080' : '',
  headers: {
    'Content-type': 'application/json',
    Accept: 'application/json',
  },
  withCredentials: true,
});

필자는 다음과 같이 헤더와 크레덴셜 설정을 넣어서 axios를 사용하여 서버에 데이터를 받아오고 있었다.

 

그러니 모킹객체도 생성할 때도 위 axios 인스턴스를 사용해야 한다.

 

mock.test.js

import axiosInstance from './myaxios';
import axios from 'axios';
 
const mock = new MockAdapter(axiosInstance, { delayResponse: 200 }); // 이게 맞음
const mock = new MockAdapter(axios, { delayResponse: 200 }); // 이건 안됨 데이터 못가져옴

 

자꾸 테스트가 데이터를 못받아와 실패해서 2일동안 원인을 못잡았는데 어쩌보면 너무 당연한 것을 

 

생각하지도 못했다. 남의 코드를 보고 적용할 때 완전 복붙을 하지는 않지만 적용할 때 무엇인지 이해하야 한다.

 

그런데 모킹 테스트 코드는 너무 간단한 예제라 가볍게 넘겨갔던 것 같다. 

 

꼼꼼함이 필요하다.