jest에서 비동기 요청에 대한 DOM요소 테스트

서버에서 어떠한 값을 받아서 그 값에 따른 매핑을 통해 컴포넌트를 렌더링 시킬 경우 테스트를 하기 위해서는 findby 메소드를 사용해야 한다.(비동기적으로 동작하는 값에 대해서 getby메소드를 사용했을 때에는 해당 요소를 찾을 수 없다.)

import { render, screen } from '@testing-library/react';

test('비동기 요청 후 DOM 요소 확인', async () => {
  // 비동기 요청 실행
  render(<MyComponent />);
  const element = await screen.findByTestId('some-element');

  // DOM 요소 확인
  expect(element).toBeInTheDocument();
});

너무나 당연한 이야기이지만 비동기 요소에 따라서 동적으로 DOM요소가 변경될 때에는 비동기 요청이 이루어지고 해당 요소를 대기했다가 테스트 할 수 있도록 해주어야 한다. 이러한 동작을 하는 메소드가 바로 findby 메소드이다.

* screen.find 를 찍고 자동완성하면 많은 메소드가 나오는데 하나하나 문서를 통해 확인하면 공부가 될 것이다.