[Jest] 비동기 코드 테스트하기 Testing Asynchronous Code

return Promise

test 코드 안에서 Promise를 return 하고 Jest가 Promise가 resolve될때까지 기다린다. Promise가 reject될 경우에 테스트 결과는 실패로 나오게 된다. 

 test('promise-return', () => {
 	return fetchData().then(data => {
		expect(data).toEqual({ name: 'Jinyoung', birthYear: 1994 });
	})
})

fetchData 라는 { name: 'Jinyoung', birthYear: 1994 } object를 반환하는 promise함수를 가정해보면 위와 같이 테스트를 작성할 수 있다. 

 

Async/Await

 test('await', async () => {
	const data = await fetchData();
		expect(data).toEqual({ name: 'Jinyoung', birthYear: 1994 });
})

다른 방식으로는 async, await를 사용할 수 있다. async를 테스트에 사용하기 위해서는 테스트에 넘겨지는 함수 앞에 async를 붙여야 한다. 

it('resolves', () => {
	return expect(fetchData()).resolves.toEqual({ name: 'Jinyoung', birthYear: 1994 });
})
it('reject', () => {
	return expect(fetchData('error')).rejects.toBe('Network Error!');
})

위와 같이 async, await를 resolves, rejects와 같이 사용할 수도 있다. 

 

Callback

Promise를 사용하지 않는다면 Callback 방식을 사용할 수도 있다. 밑의 예제는 fetchData함수가 Hellow World!를 return 하는지 테스트하고자 한다. 

test('callback', () => {
  function callback(err, data) {
    if (err) {
      throw err;
    }
    expect(data).toBe('Hello World!');
  }

  fetchData(callback);
});

위 예제에서의 문제는 콜백 함수가 불러지기도 전에 테스트가 끝날것이라는 점이다. 

이 문제를 해결하기 위해 아래와 같이 코드를 작성할 수 있다. 

test('callback', done => {
  function callback(err, data) {
    if (err) {
      done(err);
      return;
    }
    try {
      expect(data).toBe('Hello World!');
      done();
    } catch (err) {
      done(err);
    }
  }

  fetchData(callback);
});

done을 활용하여 비동기 함수가 끝나는 시점을 명시해준다. 

done에 대해 알아보기 위해 index.d.ts에서 보면 DoneCallback이 명시되어 있는것을 볼 수 있다. 

// index.d.ts
type ProvidesCallback = ((cb: DoneCallback) => void | undefined) | (() => Promise<unknown>);

하지만 위와 같이 콜백 방식으로 done 콜백을 불러와서 비동기 코드를 테스트하는 방식보다는 위의 async/await나 return 방식을 활용하는 것이 좋다. 

done콜백을 사용하였을 때 - 약 6초

return promise 방식을 사용하였을 때 - 1초 미만

위의 사진에서 수행에 걸리는 시간의 차이가 크다는 것을 볼수 있다. 때문에 done 방식은 사용을 추천하지 않는다.