[Jest] 비동기 코드 테스트 하기

Jest 비동기 코드 테스트

javascript를 사용한다면 일반적으로 비동기적인 코드를 작성하게 된다.

Jest로 비동기 코드를 테스트하기 위해서 사용할 수 있는 몇 가지 방법에 대해 알아보자.

 

우선 각 방법을 알아볼때 사용되는 공통 코드를 먼저 작성해서 테스트를 진행해보자.

 

▷ async.js

function fetchData(error) {
  if (error === "error") {
    return Promise.reject("Error");
  }
  return Promise.resolve({ name: "Hans", like: "peanut butter" });
}

module.exports = fetchData;

* 콜백 테스트는 Promise가 아닌 콜백 함수를 사용하여 예제를 작성하는 게 맞을지도 모르나 일단 그렇다고 가정하고 공통 코드를 기반으로 테스트를 진행하도록 한다.

callback 테스트

만약 Promise를 사용하지 않는다면 callback을 사용할텐데, 콜백 테스트의 핵심 키워드는 done이다.

const fetchData = require("../async.js");

describe("Async", () => {
  test("async - done", (done) => {
    fetchData().then((item) => {
      expect(item).toEqual({ name: "Hans", like: "peanut butter" });
      done();
    });
  });
});

done은 명시적으로 이 테스트 함수는 비동기 코드를 테스트 하니 콜백 함수가 호출되는지도 확인해달라 요청하는 것이다.

done이 없을 경우 콜백 함수 부분을 확인을 하지 않아 그냥 pass가 되어버린다.

 

그렇기 때문에 test() 나 it() 에서는 done을 받아올 수 있고 이를 콜백 함수가 끝나는 부분에 실행시켜 주면 된다.

 

retrun 키워드 (Promise 테스트)

Promise 테스트의 경우 callback 테스트보다 더 간단한데, return을 사용해주면 끝난다.

const fetchData = require("../async.js");

describe("Async", () => {
  test("async - return", () => {
    return fetchData().then((item) => {
      expect(item).toEqual({ name: "Hans", like: "peanut butter" });
    });
  });
});

 

Async/Await 테스트

Promise를 사용한다면 당연하게도 Async/Await 조합도 사용할 수 있다.

const fetchData = require("../async.js");

describe("Async", () => {
  test("async - await", async () => {
    const data = await fetchData();
    expect(data).toEqual({ name: "Hans", like: "peanut butter" });
  });
});

 

resolves/rejects

Promise에는 resolve와 reject가 있다는것을 알고 있을 텐데, 이것들 역시 테스트가 가능하다.

.resolves / .rejects 키워드를 사용해주면 된다.

const fetchData = require("../async.js");

describe("Async", () => {
  test("async - resolves", () => {
    return expect(fetchData()).resolves.toEqual({
      name: "Hans",
      like: "peanut butter",
    });
  });

  test("async - rejects", () => {
    return expect(fetchData("error")).rejects.toBe("Error");
  });
});

reject 예제 코드의 경우 공통코드에 만들어놓은 것처럼 강제로 reject 처리하여 테스트를 진행하였다.

---

이처럼 다양한 방법에 대해 알아봤는데, 상황에 알맞게 선택해서 사용하면 될 것 같다.

자세한 내용은 본문 하단에 공식문서 페이지를 참고하자.

---

참고: https://jestjs.io/docs/asynchronous

Testing Asynchronous Code · Jest