🧱 Jest 개념 정리 - 비동기 코드 테스트(콜백, Promise, async/await)

Jest 공식 문서 참고: https://jestjs.io/docs/asynchronous

---

🎯 개요

Jest는 기본적으로 테스트 함수가 끝나는 즉시 테스트가 완료되었다고 판단합니다.
따라서 비동기 코드(setTimeout, Promise, fetch, async/await)를 테스트할 때는 “언제 끝났는지” Jest에게 알려주어야 합니다.

---

🧩 1️⃣ 콜백 기반 (Callback Style)

❌ 잘못된 예시 (done 없음)

function fetchData(callback) {
  setTimeout(() => {
    callback(null, 'peanut butter');
  }, 1000);
}

test('the data is peanut butter', () => {
  function callback(error, data) {
    if (error) {
      throw error;
    }
    expect(data).toBe('peanut butter');
  }

  fetchData(callback);
});

⚠️ 왜 실패하나?

• Jest는 테스트 함수의 실행이 끝나면 “테스트 완료”로 간주합니다.
• fetchData는 비동기이므로, callback()은 나중에 실행됩니다.
• 즉, Jest는 callback이 실행되기도 전에 테스트를 끝내버립니다.
• 결과적으로 expect는 아예 실행되지 않거나, 테스트는 의미 없이 통과해버립니다.

---

✅ 올바른 예시 (done 사용)

function fetchData(callback) {
  setTimeout(() => {
    callback(null, 'peanut butter');
  }, 1000);
}

test('the data is peanut butter', (done) => {
  function callback(error, data) {
    if (error) {
      done(error);
      return;
    }
    try {
      expect(data).toBe('peanut butter');
      done(); // ✅ 성공 시 호출
    } catch (error) {
      done(error); // ❌ 실패 시 Jest에 에러 전달
    }
  }

  fetchData(callback);
});

💡 동작 원리

단계	설명
①	Jest가 테스트 함수 실행 시작
②	fetchData(callback) 호출 — 비동기 처리 시작
③	Jest는 “done이 있으니 기다려야겠군” 하고 멈춤
④	나중에 callback() 호출됨
⑤	expect() 통과 → done() 실행 → Jest가 테스트를 종료
⑥	expect() 실패 → done(error) 실행 → Jest가 실패 처리

✅ done()은 “테스트가 끝났다”는 신호를 Jest에게 전달하는 역할을 합니다.

---

🧠 2️⃣ Promise 기반

💻 함수

function fetchData() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve('peanut butter');
    }, 1000);
  });
}

💻 테스트

test('Promise 기반 fetchData', () => {
  return fetchData().then((data) => {
    expect(data).toBe('peanut butter');
  });
});

💡 포인트

• done() 대신 Promise를 return하면 Jest가 알아서 기다립니다.
• return이 없으면 Jest는 여전히 “바로 끝난 테스트”로 오해함.

---

⚙️ 3️⃣ async / await 기반

💻 함수

async function fetchData() {
  return 'peanut butter';
}

💻 테스트

test('async/await 기반 fetchData', async () => {
  const data = await fetchData();
  expect(data).toBe('peanut butter');
});

💡 포인트

• Jest는 async 함수가 반환하는 Promise를 자동으로 기다림.
• 가장 간결하고 현대적인 방식.

---

💥 예외 발생 버전 (reject)

function fetchDataWithError() {
  return Promise.reject(new Error('Network Error'));
}

test('rejects 처리', async () => {
  await expect(fetchDataWithError()).rejects.toThrow('Network Error');
});

✅ rejects.toThrow()는 비동기 에러 검증에 최적화된 문법.

---

🧾 요약 비교표

방식	코드 예시	Jest 인식 방식	특징
콜백(done)	fetchData(cb)	done() 호출 시	오래된 패턴, 명시적 제어
Promise	return Promise	Promise resolve/reject 시	done 불필요
async/await	await fetchData()	async 함수 완료 시	간결하고 추천
rejects	await expect(...).rejects	reject 시	에러 검증 간결

---

⚠️ 주의: done + Promise를 함께 사용하지 말 것

test('bad example', (done) => {
  return fetchData().then(...); // ❌ done과 Promise 둘 다 사용
});

이건 Jest가 “언제 끝난 건지 모름” → 혼란 → 메모리 누수 방지 차원에서 에러 발생.

---

✅ 핵심 요약

• Jest는 테스트가 “끝났는지”를 스스로 모른다.
• 따라서 반드시 done, return Promise, async/await 중 하나만 사용해야 한다.
• done()을 잊으면 “timeout 에러”, try/catch를 안 쓰면 “에러 원인 표시 불가”.
• modern JS 환경에서는 async/await + resolves/rejects 조합이 가장 깔끔하고 안전하다.

---