Jest를 활용한 TDD 단위 테스트 - 4편

※ 개인 공부를 위한 공간입니다. 틀린 부분 지적해주시면 감사하겠습니다 (_ _)

 

지난 시간에, 자주 쓰이는 Matchers에 대해서 알아보았다.

 

이번 시간엔, Testing Asynchronous Code라는 주제로 넘어가보겠다.

https://jestjs.io/docs/asynchronous

 

 

비동기 코드 테스트

자바스크립트를 활용하여 비동기로 코드를 실행시키는 건 일반적이다. 비동기로 실행되는 코드가 있다면, Jest는 다음 테스트로 넘어가기 위해 이전 테스트가 끝났을 때를 알아야한다. Jest에서 이러한 부분을 다루기 위한 몇가지 방법이 있다.

• Callbacks
• Promises
• Async/Await

2021년 현 시점에서는, 대부분의 동기/비동기 처리를 Async/Await로 처리하고 있는 것으로 알기 때문에, async/await 편만 다루려고 한다. callbacks 및 promises에 대한 처리가 궁금하면 위 링크를 통해서 확인하시길 바란다! (헿..)

Async/Await는 syntatic sugar이기 때문에, 위 다른 방법들보다 뛰어나다고 할 수는 없고 각자의 스타일에 맞추면 된다.

 

• Async/Await

비동기 테스트를 진행하기 위해, test함수 내 콜백 함수에 async를 넣어준다.

// test('', async () => {}) ---> async를 붙여줬다.
test('the data is peanut butter', async () => {
  // 비동기처리를 동기처리하기 위해 await를 붙여줬다.
  const data = await fetchData();
  expect(data).toBe('peanut butter');
});

test('the fetch fails with an error', async () => {
  // expect.assertions(number)에 대한 설명은 아래에!!
  expect.assertions(1);
  // try-catch를 써서 에러코드도 동시에 테스트 할 수 있다!!
  try {
    await fetchData();
  } catch (e) {
    expect(e).toMatch('error');
  }
});

expect.assertions(number)는 assertions(주장, 행사)가 테스트동안 몇번 일어났는지를 확인해준다.
콜백에서 assertions가 실제로 호출되었는지 확인하기 위해서 비동기 코드를 테스트할 때 유용하다.

예를들어, doAsync라는 callback1과 callback2을 받는 함수가 있다고 가정해보자.
비동기로 2개의 함수를 순서없이 호출하고, 이를 테스트 할 수 있다.

test('doAsync calls both callbacks', () => {
    // 해당 코드는, callback1과 callback2 둘 다 호출되었다는 걸 확증해준다.
    expect.assertions(2);
    function callback1(data) {
        expect(data).toBeTruthy();
    }
    function callback2(data) {
        expect(data).toBeTruthy();
    }

    doAsync(callback1, callback2);
});


https://jestjs.io/docs/expect#expectassertionsnumber

 

매번 느끼는거지만, 진짜 docs는 최대한 쉽게 설명하기 위해 노력한 흔적이 보인다.
자 다음 섹션은 "Setup and Teardown"이라는 주제이다.
TDD 개발에 점점 자신감이 붙을 것 같은 느낌이다.