비동기 jest 테스트 다루기

jest에는 비동기 코드를 다루는 테스트를 처리하는 몇 가지 방법이 있습니다.
fetchSomeAsyncThing()를 호출하는 테스트가 있다고 가정해 보겠습니다.

it('should call my api', () => {
  const result = fetchSomeAsyncThing();

  expect(result.foo).toBe('hello world')
});

이것은 실패할 것입니다.

왜요?

JavaScript가 비동기 코드를 처리하는 방식 때문입니다.

비동기로 알려진 함수를 호출하면 Promise 를 반환하거나 setTimeout 를 호출하는 등, 해당 함수가 호출 스택에 푸시되고 테스트가 실제로 실행된 후 호출됩니다.

스택은 기본적으로 가장 마지막에 넣은 것이 가장 먼저 나오는 배열과 같은 데이터 구조입니다. stacks 및 async Javacript.에 대해 자세히 알아보기

완료 콜백 사용

비동기 함수가 콜백을 반환하는 경우 여러 jest 함수가 다음과 같이 사용할 수 있는 완료 콜백을 제공합니다.

it('should call my api', (done) => {
  const result = fetchSomeAsyncThing((result) => {
    expect(result.foo).toBe('hello world');
      done();
  });
});

보시다시피 위의 it 메서드에 대한 콜백은 done 함수를 반환합니다.

이done 함수는 비동기 메서드가 완료되었음을 농담으로 알리고 해당 테스트를 마무리하기 전에 모두 완료될 때까지 기다립니다.

약속 사용

비동기 함수가 약속을 반환하는 경우 두 가지 중 하나를 수행할 수 있습니다.

it('should call my api', (done) => {
  const result = fetchSomeAsyncThing().then((result) => {
    expect(result.foo).toBe('hello world');
      done();
  });
});

위와 유사하게 done 내부에 .then 함수를 사용합니다.

또는 단순히 전체 약속을 반환할 수 있습니다.

it('should call my api', () => {
  return fetchSomeAsyncThing((result) => {
    expect(result.foo).toBe('hello world');
  });
});

이 경우 jest는 테스트의 반환 값 자체가 약속임을 깨닫고 테스트를 마무리하기 전에 해당 약속이 완전히 해결될 때까지 기다립니다.

비동기 / 대기 사용

다시 한 번, 비동기 함수가 약속을 반환한다는 것을 알고 있는 경우 modern Javascript 의 async 및 await 기능을 사용할 수 있습니다.

it('should call my api', async () => {
  const result = await fetchSomeAsyncThing();
  expect(result.foo).toBe('hello world');
});

async/await 메서드는 코드를 읽기에 좋은 깔끔한 방법입니다.