[JEST] 📚 비동기 코드 테스트 방법

콜백 테스트

비동기 메소드는 이벤트 루프로 인해 나중에 처리되기 때문에, 비동기의 결과를 검증 하기위해선 콜백에 expect() 를 사용해야 한다.
여기서 중요한건 done 이다.
done 은 Jest Runner에게 명시적으로 이 테스트 함수는 비동기 코드를 테스트 하니 콜백 함수가 호출되는지도 좀 봐주라고 알려주는 역할을 한다.
따라서 비동기 함수를 검증하려 할때 결과를 콜백 함수로 받는다면, 콜백 함수 인자에 done 을 써주고, done() 을 호출해서 끝내야 한다.

// 테스트할 함수 : 0.1초 뒤에 콜백함수를 실행하는 함수
function fetchUser(id, cb) {
  setTimeout(() => {
    console.log("wait 0.1 sec.");
    
    const user = {
      id: id,
      name: "User" + id,
      email: id + "@test.com",
    };
    
    cb(user);
    
  }, 100);
}

test("fetch a user", (done) => { // 콜백 인자에 done을 써서 비동기 함수 테스트임을 반드시 명시 !!
  const cb = (user) => {
    // 인자로 받은 리턴값 user객체가 해당 객체와 Equal일 경우 테스트
    expect(user).toEqual({ 
      id: 1,
      name: "User1",
      email: "1@test.com",
    });
    
    done(); // 비동기 실행 end
  }
  
  fetchUser(1, cb);
});

---

Promise 테스트

그나마 Promise 비동기 함수는 then() 을 통해 직관적으로 비동기 결과 실행을 검증할 수 있다.

then() 안에다가 expect() 를 써주면 되기 때문이다.

하지만, 여기서 조심해야 할 점은 비동기 실행은 Jest Runner와 따로 놀기때문에 테스트가 제대로 안될 것이다. 

따라서, Jest Runner에게 Promise가 resolve되게 기다리라고 명령을 설정해 줘야 하는데 이때, return 을 명시해주면 된다.

// 테스트할 함수 : 0.1초 뒤에 resolve()하는 프로미스 객체 함수
function fetchUser(id) {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log("wait 0.1 sec.");
      
      const user = {
        id: id,
        name: "User" + id,
        email: id + "@test.com",
      };
      
      resolve(user);
    }, 100);
  });
}

test("fetch a user", () => {
  // Promise 객체 함수에 return을 써서, Jest Runner가 Promise가 resolve될때까지 기다려 주게 한다.
  return fetchUser(1) 
  	.then((user) => {
        expect(user).toEqual({
          id: 1,
          name: "User1",
          email: "1@test.com",
    	});
  	});
});

---

async / await 테스트

앞서 비동기 메소드의 처리 검증에 대해 콜백함수와 Promise 검증법을 살펴 보았다.

코드를 보면 알수 있듯이 굉장히 생소하며 직관적이지 않은 걸 볼 수 있다.

여기서 async / await 문법은 빛을 발한다.

 

위에서 했던 Promise 객체 함수를 이번엔 async으로 처리해서 테스트 해보자.

콜백 함수에 async 을 붙여주고, 비동기 Promise 객체 함수에 await 처리를 하며, 바로 다음 줄에 expect() 를 써서 함수를 검증한다.

코드가 매우 깔끔해졌으며 직관적이게 됨을 느낄수 있다.

따라서, 왠만한 비동기 함수를 검증할때는 async / await 문법을 사용해서 검증하기를 추천하는 바이다.

test("fetch a user", async () => {
  const user = await fetchUser(1);
  
  expect(user).toEqual({
    id: 1,
    name: "User1",
    email: "1@test.com",
  });
});

---

# 참고자료

https://www.daleseo.com/jest-async/