JavaScript나 TypeScript와 같은 언어로 개발을 할 때, 비동기 처리를 위해 Promise나 async/await을 사용합니다. 그런데, 이러한 비동기 작업을 동기식으로 테스팅하려면 어떻게 해야 할까요? 이 블로그 포스트에서는 TypeScript를 사용하여 비동기 작업의 동기식 테스팅을 위한 async/await의 활용 방법에 대해 알아보겠습니다.

async/await 개요

JavaScript나 TypeScript에서 async 키워드를 함수 앞에 붙이면 해당 함수는 항상 Promise를 반환하게 됩니다. 함수 내에서 await 키워드를 사용하면 Promise가 fulfilled 상태가 될 때까지 기다린 뒤에 결과 값을 반환합니다. 이를 통해 비동기 코드를 동기식으로 작성할 수 있습니다.

async/await을 이용한 테스팅

보통의 비동기 함수를 테스팅할 때는 then과 catch 구문을 이용하여 콜백 함수를 넘겨줍니다. 하지만 async/await를 사용하면 동기식으로 코드를 작성할 수 있기 때문에 테스트 코드가 훨씬 더 읽기 쉽고 유지보수하기 쉬워집니다.

아래는 async/await을 사용한 테스트 코드의 간단한 예시입니다.

async function fetchData(): Promise<string> {
  // 비동기 작업을 수행하는 함수
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve('Data fetched');
    }, 1000);
  });
}

async function testFetchData() {
  const data = await fetchData();
  console.log(data); // 동기식으로 데이터를 받아와 출력
}

testFetchData();

위 예시에서 fetchData 함수는 비동기로 데이터를 가져오는 작업을 수행하고, testFetchData 함수에서 await 키워드를 통해 이 작업이 완료될 때까지 기다린 뒤에 데이터를 화면에 출력합니다.

마무리

이렇듯 async/await을 사용하면 비동기 작업을 보다 간편하고 직관적으로 다룰 수 있으며, 테스트 코드를 작성할 때에도 훨씬 더 가독성이 좋아집니다. 따라서 JavaScript나 TypeScript에서 비동기 코드를 다룰 때에는 async/await을 적극적으로 활용하는 것이 좋습니다.

참고문헌: MDN Web Docs: async function