RTL 테스트 에서 비동기 함수 render 호출 에러

1️⃣ 어쩌다 버그를 마주했는가

• 컴포넌트 테스트 수행 중 render()로 비동기 함수 호출 했을 때 발생

2️⃣ 원인은 무엇인가

• RTL 테스트 코드 컴포넌트 렌더링 시, 비동기 함수가 포함되어 있을 때, 렌더링을 비동기 처리하지 않아 발생하는 오류

3️⃣ 어떤 시도를 해보았나

testing library 메서드 사용하기

testing library 에서 기본적으로 제공하는 메서드를 사용할 수 있다. 여기에는 findBy 쿼리를 사용할 수도 있다.

const button = screen.getByRole('button', {name: 'Click Me'})
fireEvent.click(button)
await screen.findByText('Clicked once')
fireEvent.click(button)
await screen.findByText('Clicked twice')

특정 시간을 기다려야 하는경우 waitFor함수를 사용할 수있지만 해당 컴포넌트에 사용하기에는 무리가 있다고 판단된다.

async 사용하기

js에서 제공하는 async를 사용해서 비동기 처리를 할 수있다.

4️⃣ 최종 해결방법

• 비동기를 처리하기위해 많이 사용하는 async를 선택하였다. testing library 메서드를 사용할 수 있지만, 이를 이해하기 위한 시간보다 기존에 사용하는 async, await를 사용하는게 합당하다고 판단했다.
• Async Await으로 테스트 코드 콜백함수를 감싸 모든 비동기 코드가 처리된 후 렌더링 되도록 코드를 수정하여 해결