React | API 요청 테스트

testing-library

리액트에서도 권장하고 있는 테스팅 라이브러리. create-react-app으로 생성한 프로젝트는 기본적으로 포함하고 있다.

axios-mock-adapter

axios요청을 mock, 즉 가짜로 한다.

npm install axios-mock-adapter --save-dev

사용

기본 사용법
new MockAdaptor(axios)를 통해 axios의 요청을 mocking한다.
실제 서버까지 요청이 전달되지 않고, mocking한 요청과 동일한 요청이 있다면 .reply(~)로 설정한 가짜 응답 값이 돌아온다.

import axios from 'axios';
import MockAdapter from 'axios-mock-adapter';

const mock = new MockAdapter(axios, { delayResponse: 200 });

mock.onGet('http://~').reply(200, {
    code: 200,
      message: "success"
});    

apiClient는 axios 인스턴스다.

import React from 'react';
import apiClient from '../api';
import MockAdapter from 'axios-mock-adapter';
import { fireEvent, screen, render, waitFor } from '@testing-library/react';

import LoginForm from '../components/LoginForm';

로그인 테스트

현재 로그인에 성공하면 /user로 이동하도록 구현해두었기 때문에 해당 처리가 잘 되는지 검증한다.

fireEvent는 렌더된 컴포넌트의 엘리먼트에 이벤트를 발생시킨다. 코드로 어느정도 유추 가능..

describe('<LoginForm/>', () => {
    //...

  it('로그인에 성공하면 /user로 이동한다.', async () => {
    const mock = new MockAdapter(apiClient);
    mock.onPost('/auth/login').reply(200, {
      accessToken: '1a6f28a25c43408ba8e970def1448303',
    });

    customRender(<LoginForm />);

    const idInput = screen.getByPlaceholderText('ID');
    const pwdInput = screen.getByPlaceholderText('PASSWORD');
    const loginBtn = screen.getByRole('button');

    fireEvent.change(idInput, { target: { value: 'jrue' } });
    fireEvent.change(pwdInput, { target: { value: '1234' } });
    fireEvent.click(loginBtn);

    await waitFor(() => expect(window.location.pathname).toEqual('/user'));
  });
}

MockAdapter를 사용하지 않으면?

실제 서버로 요청된다.
만약 api 요청 도메인을 환경변수로 관리하고 있다면, 테스트 하기 전에 .env.test파일을 꼭 작성하자.(작성 후 재시작 필수)

---

참고: 벨로퍼트와 함께하는 리액트테스팅