REST API를 사용하는 코드베이스의 오래된 영역에서는 서버와 통신하기 위해 Axios를 사용했지만, 새 애플리케이션에서는 Axios를 사용하지 않습니다. 대신 apollo-client로 GraphQL API를 조회합니다. 자세한 내용은 GraphQL 문서를 참고합니다.

모든 기본값이 설정되도록 보장하려면 Axios를 axios_utils에서 가져옵니다. Axios를 직접 사용하지 않습니다.

CSRF 토큰#

모든 요청에는 CSRF 토큰이 필요합니다. 이 토큰이 설정되도록 보장하기 위해 Axios를 가져와 토큰을 설정한 뒤 axios를 내보냅니다.

토큰이 설정되도록 Axios를 직접 사용하는 대신 이렇게 내보낸 모듈을 사용합니다.

사용법#

  import axios from './lib/utils/axios_utils';

  axios.get(url)
    .then((response) => {
      // `data` is the response that was provided by the server
      const data = response.data;

      // `headers` the headers that the server responded with
      // All header names are lower cased
      const paginationData = response.headers;
    })
    .catch(() => {
      //handle the error
    });

테스트에서 Axios 응답 모킹#

응답 모킹에는 axios-mock-adapter를 사용합니다.

spyOn() 대비 장점은 다음과 같습니다.

• 응답 객체를 만들 필요가 없습니다
• 실제 호출로 통과시키지 않습니다(피하려는 동작입니다)
• 오류 사례를 테스트하는 API가 명확합니다
• 서로 다른 응답을 지정할 수 있는 replyOnce()를 제공합니다

또한 Axios 인터셉터는 모킹에 적합하지 않아 사용하지 않기로 했습니다.

예시#

  import axios from '~/lib/utils/axios_utils';
  import MockAdapter from 'axios-mock-adapter';

  let mock;
  beforeEach(() => {
    // This sets the mock adapter on the default instance
    mock = new MockAdapter(axios);
    // Mock any GET request to /users
    // arguments for reply are (status, data, headers)
    mock.onGet('/users').reply(200, {
      users: [
        { id: 1, name: 'John Smith' }
      ]
    });
  });

  afterEach(() => {
    mock.restore();
  });

테스트에서 Axios로 폴링 요청 모킹#

폴링 함수는 헤더 객체를 요구하므로 세 번째 인수로 항상 객체를 포함해야 합니다.

  mock.onGet('/users').reply(200, { foo: 'bar' }, {});