[RTL] 비동기 테스트 하기

fintBy 쿼리

findBy 메서드는 getby 쿼리 + waitFor 메서드가 결합된 것이라고 보면 된다. findBy 옵션은 waitFor옵션과 똑같이 받는다. 돔이 변경이 늦을 때 그때 findBy query를 사용하면 될 것 같다.

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

waitFor은 타임아웃이 될 때까지 기다렸다가 콜백 함수를 실행시킨다. mock promise를 기다리거나 mocks API호출을 기다릴 때 사용된다.

function waitFor<T>(
  callback: () => T | Promise<T>,
  options?: {
    container?: HTMLElement
    timeout?: number
    interval?: number
    onTimeout?: (error: Error) => Error
    mutationObserverOptions?: MutationObserverInit
  },
): Promise<T>

waitForElementToBeRemoved

function waitForElementToBeRemoved<T>(
  callback: (() => T) | T,
  options?: {
    container?: HTMLElement
    timeout?: number
    interval?: number
    onTimeout?: (error: Error) => Error
    mutationObserverOptions?: MutationObserverInit
  },
): Promise<void>

DOM이 사라질 때 동안 기다려주는 함수이다. 첫번째 인자는 인자로는 dom 요소이거나 돔 요소로 이루어진 배열이여야하고 콜백 함수면 돔 요소이거나 돔 요소의 배열로 리턴하는 함수여야한다.

waitForElementToBeRemoved(null).catch(err => console.log(err))
waitForElementToBeRemoved(queryByText(/not here/i)).catch(err =>
  console.log(err),
)
waitForElementToBeRemoved(queryAllByText(/not here/i)).catch(err =>
  console.log(err),
)
waitForElementToBeRemoved(() => getByText(/not here/i)).catch(err =>
  console.log(err),
)

첫번째 요소가 null이면 에러를 발생시킨다.