[Jest] 비동기 코드 테스트하기 (Jest testing with Asynchronous codes)

  코드를 테스트하다보면 비동기 코드 역시 테스트의 범위에 포함되는 순간이 온다. 그런데 일반적인 자바스크립트 코드가 실행될 때와 마찬가지로 Jest로 작성한 테스트 코드 역시 비동기 코드를 처리하기 위해서는 추가적인 작업이 필요하다. 다음과 같은 간단한 예시를 생각해보자.

 

1) A라는 버튼 컴포넌트를 테스트한다.

2) A버튼을 누르면 비동기로 어떠한 작업이 처리된다.

3-1) 해당 작업이 성공하면 성공했을 때의 콜백을 실행한다.

4-1) 해당 작업이 실패하면 실패했을 때의 콜백을 실행한다.

 

  테스트도 그렇게 어려워보이지는 않는다. mocking을 통해 비동기 작업의 결과를 지정한 다음 각각의 경우에 callback 함수가 실행되는지 여부를 검사하면 될 것이다. 그런데 막상 각 콜백 함수를 toBeCalled로 검사해보면 어떠한 경우에도 두 콜백이 실행되지 않았다고 보여진다. 어째서일까? 함수 호출을 검사하는 테스트 코드가 비동기 작업이 끝나기도 전에 실행되었기 때문이다. 따라서 열심히 비동기로 작업을 처리하고 그 결과에 따라 성공이나 실패 콜백을 제대로 실행했어도 이미 테스트 코드는 둘 다 실행되지 않았다라고 인식하고 테스트를 종료해버리는 것이다.

 

  다행히 Jest27버전 이상부터는 아주 간단하게 해당 오류를 해결할 수 있다.

  테스트코드 중간에 await new Promise(process.nextTick); 문장을 삽입하면 현재 실행중인 모든 비동기 작업이 완료될 때까지 대기할 수 있다. 따라서 A버튼 클릭 이벤트를 발생시킨 후 await new Promise(process.nextTick); 문장을 작성한 후에 콜백의 호출을 검사하면 원하는 테스트 결과를 얻을 수 있다.