비동기적 요청에 대한 테스팅 waitFor, waitForElementToBeRemoved

지난 번 글에서 findby에 대해서 알아보았고 문서에 나오는 나머지 두가지 방법에 대해서 알아보자.

공식문서를 보고 싶다면 글 아래 링크 참조~

 

waitFor :: 비동기적 요청에 대한 결과를 기다렸다가 테스트하는 것.

- 엥? findby도 그런 것 아니었나요?
" findby는 원하는 하나의 값이 도출되면 그 값만을 토대로 테스트하지만 이 waitFor는 옵션에 따라서 대기를 했다가 테스트를 한다는 점에서 큰 차이가 있다."

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

 

위 옵션값 중에 가장 흔하게 사용할 수 있는 것들이 timeout과 interval인데 말그대로 대기하고 지정된 초단위 실행하는 것을 의미한다. (기본값 : timeout(1000ms), interval(50ms)

waitForElementToBeRemoved :: DOM에서 해당 요소가 제거될 때까지 기다렸다가 테스트 하는 것.

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

// 예시문

const el = document.querySelector('div.getOuttaHere')

waitForElementToBeRemoved(document.querySelector('div.getOuttaHere')).then(() =>
  console.log('Element no longer in DOM'),
)

el.setAttribute('data-neat', true)
// other mutations are ignored...

el.parentElement.removeChild(el)
// logs 'Element no longer in DOM'​

Async Methods | Testing Library