[react-test] async test

HTTP Request로 데이터를 받아오는 경우, async로 테스트를 해야한다. 실제 데이터로 테스트할 수도 있고, mockup을 만들어서 테스트할 수도 있다.

실제 HTTP Request로 테스트

React Component

random user를 axios.get 한다.
data-testid로 dynamic testid를 만든다. (test.js에서 첫번째 항목에 대해서만 DOM에 있는지 판단할 예정임)

export default function FollowersList() {

    const [followers, setFollowers] = useState([]);

    useEffect(() => {
        fetchFollowers()
    }, []);

    const fetchFollowers = async () => {
        const { data } = await axios.get("https://randomuser.me/api/?results=5")
        setFollowers(data.results)
    }

    return (
        <div className="followerslist-container">
            <div>
                {followers.map((follower, index) => (
                    <div
                        className="follower-item"
                        data-testid={`follower-item-${index}`} // dynamic testid를 만든다.
                        key={index}
                    >
                        <img src={follower.picture.large} />
                        <div className="followers-details">
                            <div className="follower-item-name">
                                <h4>{follower.name.first}</h4> <h4>{follower.name.last}</h4>
                            </div>
                            <p>{follower.login.username}</p>
                        </div>
                    </div>
                ))}
            </div>
            <div className="todo-footer">
                <Link to="/">Go Back</Link>
            </div>
        </div>
    )
}

Test code

테스트내용 : DOM에 axios.get으로 받은 첫번째 Follower(follower-item-0)가 있는지 확인한다.
follower-item-0는 axios.get을 받아야 생성이 된다. 따라서 async/await가 되는 findBy를 사용하여야 하고, await를 붙인다.

import { render, screen } from '@testing-library/react';
import FollowersList from '../FollowersList';
import { BrowserRouter } from 'react-router-dom';
import axios from 'axios';

const MockedFollowerList = () => {
  return (
    <BrowserRouter>
      <FollowersList />
    </BrowserRouter>
  )
}

// Real Request
describe("FollowerList", () => {
  beforeAll(() => {
    console.log("====== TEST START ======")
  })
  test("axios get first follower", async () => {
    render(<MockedFollowerList />)
    const divEl = await screen.findByTestId("follower-item-0");
    expect(divEl).toBeInTheDocument();
  })
})

실제 Request 테스트의 장단점

장점

프론트 뿐 아니라 백엔드 테스트까지 같이 되는 것

단점

어떤 이유에 의해 백엔드에서 Response가 제대로 되지 않는다면, 에러가 프론트에 의한 것인지 백에 의한것인지 판단이 어려워짐
Request에 대한 비용발생
Request는 느리므로, 전체 테스트에 수천개의 요청이 있다면 테스트 시간이 엄청 오래걸릴 것

추천하는 방식

실제로 Request를 보내기보다는, Dummy data를 생성해서 테스트 하는 것을 추천함 (만약 HTTP 요청 및 응답 받는 테스트까지 포함한다면, 테스트 코드에 대한 분리를 확실히 할 것)