[Vue.js] 단위 테스트 - 비동기 테스트

일반적으로 아래와 같은 예제를 만들면 테스트가 통과한다.

그런데 test.js의 toBe 인자를 Done?!로 바꿔도 테스트가 통과한다.

그 이유는 asyncFn()이 setTimeout으로 인해 실행이 지연됐기 때문이다.

test.js 입장에서는 사용하는 함수가 언제 완료되는지를 모르므로 일단 문제가 없다고 처리하기 때문에 이러한 오류가 발생한다.

 

done()

test 함수의 두번째 매개변수인 콜백함수에서는 done을 매개변수로 사용할 수 있다.

done은 비동기 테스트가 종료되는 시점을 명시해주는 변수로, 함수처럼 사용할 수 있다.

done()을 사용하면 제대로 결과가 출력된다.

이처럼 일부러 틀린 변수를 먼저 집어넣어서 오류가 제대로 출력되는지를 확인하는 과정이 중요하다.

return

done()을 사용하지 않고 return 키워드를 사용해도 같은 결과를 도출할 수 있다.

test()의 결과로 어떠한 값을 반환해야 하므로 그 안에 들어있는 비동기 함수들을 기다리는 원리.

resolves 브릿지 이용

위의 방식을 짧게 만들면 다음과 같이 사용할수도 있다.

화살표 함수의 생략법 이용

async await 키워드 이용

 

주의!

test() 함수는 테스트 대상 함수의 실행을 최대 5초까지만 기다리므로,

테스트 대상 함수가 5초 이상 대기를 하게 되면 테스트가 자동적으로 실패한다.

만약 더 시간이 필요하다면, test함수의 세번째 인수로 시간을 제공해야 한다. (ms단위, 디폴트 값 5000)

제한 시간을 넘겨 오류가 발생한 모습

Timeout
- Async callback was not invoked within the 5000 ms timeout specified by jest.setTimeout.

세번째 인수로 시간을 10초로 늘려주면 테스트가 통과한다.

통과!