TDD를 위한 툴 JEST 사용법 - 비동기 코드 테스트

비동기 코드 테스트

콜백

가장 일반적인 비동기 패턴이다.
아래와 같이 해서는 안된다.

// 잘못된 예시
test('the data is peanut butter', () => {
  function callback(data) {
    expect(data).toBe('peanut butter');
  }

  fetchData(callback);
});

done이라는 단일 인자 사용시 Jest는 done 콜백이 호출될 때까지 기다림

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

  fetchData(callback);
});

expect 구문이 실패하는 경우 오류 발생 & done()호출 x.
실패한 이유를 보려면 expect를 try 블럭으로 감싸고, catch 블럭의 오류를 done에게 전달해야 함.

프로미스

코드가 프로미스 사용 경우 더 간단한 방법이 있음

test('the data is peanut butter', () => {
  return fetchData().then(data => {
    expect(data).toBe('peanut butter');
  });
});

return을 이용해 프로미스를 반드시 반환해야 함. 거절이 예상될 경우 then대신 catch 메서드 사용

Async/Await

test에 전달된 함수의 앞에 async 사용

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

test('the fetch fails with an error', async () => {
  expect.assertions(1);
  try {
    await fetchData();
  } catch (e) {
    expect(e).toMatch('error');
  }
});

.resolves와 .rejects와 함께 조합도 가능

test('the data is peanut butter', async () => {
  await expect(fetchData()).resolves.toBe('peanut butter');
});

test('the fetch fails with an error', async () => {
  await expect(fetchData()).rejects.toThrow('error');
});