[React] Jest(3) 비동기 코드 테스트

---

fn.js

// async 함수를 사용하여 3초 후에 "Mike"를 반환하는 함수 만들기
const fetchName = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve("Mike");
    }, 3000);
  });
};

export default fetchName;

fn.test.js

Jest를 사용하여 fetchName 함수를 테스트하고 반환값이 "Mike"인지 확인하는 테스트 코드를 작성

import fetchName from "./fn";

test('fetchName 함수는 3초 뒤에 "Mike"를 반환해야 합니다.', async () => {
  // async 함수를 사용하여 비동기 코드를 테스트합니다.

  const result = await fetchName(); // fetchName 함수를 호출하고 결과를 기다립니다.

  expect(result).toBe("Mike"); // 반환된 결과가 "Mike"와 일치하는지 확인합니다.
});

위의 테스트 코드는 다음과 같은 단계를 수행합니다

• async 키워드를 사용하여 테스트 함수를 비동기 함수로 선언합니다. 이는 await를 사용하여 비동기 코드를 처리하기 위한 준비 작업입니다.
• await fetchName()을 사용하여 fetchName 함수를 호출하고, 함수가 완료될 때까지 기다립니다. fetchName 함수가 3초 후에 “Mike”를 반환할 때까지 대기합니다.
• expect(result).toBe(“Mike”)를 사용하여 반환된 result 값이 “Mike”와 일치하는지 확인합니다. 이것은 테스트가 fetchName 함수가 올바르게 동작하는지 확인하도록 합니다.

test 시간도 의도대로 3012ms로 3초이상이 걸렸다

---

마치며

혹시 잘못된 정보나 궁금하신 게 있다면 편하게 댓글 달아주세요.
지적이나 피드백은 언제나 환영입니다.