Colin's Blog
[javascript] 프로미스를 활용한 테스트 코드 작성 방법

프로미스는 자바스크립트에서 비동기 코드를 효율적으로 다룰 수 있게 해주는 객체입니다. 테스트 코드를 작성할 때, 비동기 작업을 기다려야 하는 경우가 많습니다. 이런 경우에 프로미스를 사용하면 테스트 코드를 더욱 간결하고 가독성 있게 작성할 수 있습니다.

1. 프로미스 사용하기

프로미스를 사용하기 위해서는 new Promise를 통해 프로미스 객체를 생성해야 합니다. 일반적으로 아래와 같은 형태로 사용됩니다.

new Promise((resolve, reject) => {
  // 비동기 작업 수행

  if (성공적인 조건) {
    resolve(결과);
  } else {
    reject(에러);
  }
})

여기서 resolve는 비동기 작업을 성공적으로 완료했을 때 호출되는 함수이고, reject는 비동기 작업이 실패했을 때 호출되는 함수입니다. 프로미스를 사용하는 주요한 이유 중 하나는 비동기 작업의 성공 또는 실패를 적절한 시점에 처리할 수 있다는 점입니다.

2. 프로미스를 테스트하기 위한 Jest의 expect 활용하기

Jest는 자바스크립트 테스트 프레임워크 중 하나입니다. Jest의 expect 메소드를 사용하면 프로미스를 테스트할 수 있습니다. expect 메소드에 프로미스를 전달하고, 그 이후에 resolves 또는 rejects 메소드를 통해 프로미스의 결과를 테스트할 수 있습니다.

예를 들어, 다음과 같은 비동기 함수가 있다고 가정해봅시다.

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('Data fetched successfully');
    }, 1000);
  });
}

이 함수를 테스트하기 위해서는 expect(fetchData()).resolves.toBe('Data fetched successfully')와 같이 테스트 코드를 작성할 수 있습니다.

3. 프로미스의 에러를 테스트하는 방법

프로미스가 reject 되었는지 테스트하기 위해서는 rejects 메소드를 사용합니다. 예를 들어, 아래와 같은 함수가 있다고 가정해봅시다.

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      reject(new Error('Error fetching data'));
    }, 1000);
  });
}

이 함수를 테스트하기 위해서는 expect(fetchData()).rejects.toThrow('Error fetching data')와 같이 테스트 코드를 작성할 수 있습니다.

4. 비동기 코드 테스트 시 프로미스의 return 사용하기

Jest에서 비동기 코드를 테스트할 때, 프로미스를 테스트하기 위해 return 키워드를 사용할 수 있습니다. return을 사용하면 Jest는 프로미스가 완료될 때까지 테스트를 기다립니다. 예를 들어, 다음과 같은 테스트 코드를 작성해보겠습니다.

test('fetchData 함수는 "Data fetched successfully"를 반환하는지 테스트', () => {
  return expect(fetchData()).resolves.toBe('Data fetched successfully');
});

위의 테스트 코드에서는 return을 사용해서 프로미스가 완료될 때까지 기다릴 수 있습니다.

5. async/await과 함께 프로미스 테스트하기

Jest에서 async 및 await을 사용하면 프로미스 테스트 코드를 더욱 읽기 쉽게 작성할 수 있습니다. async 키워드를 사용하여 비동기 함수를 선언하고, await 키워드를 사용하여 프로미스를 대기할 수 있습니다. 아래의 예제를 참고해보세요.

test('fetchData 함수는 "Data fetched successfully"를 반환하는지 테스트', async () => {
  const data = await fetchData();
  expect(data).toBe('Data fetched successfully');
});

위의 테스트 코드에서는 await을 통해 프로미스가 완료될 때까지 기다린 뒤 데이터를 확인합니다.

6. 참고 자료

© 2018 Colin. All rights reserved.