Jest 연습해보기

Imnottired·2023년 6월 8일

오래전부터 관심있었던 Jest를 연습해보았다.
코드 밑에 주석으로 설명을 다는 방식으로 작성하였다.

Jest: All-in-one 테스팅 라이브러리

페이스북에서는 Jest를 단순한 테스팅 라이브러리가 아닌 “테스팅 프레임워크”라고 부르는 만큼 기존 자바스크립트 테스팅 라이브러리와는 차별점이 있습니다. Jest 이전에는 자바스크립트 코드를 테스트하라면 여러 가지 테스팅 라이브러리를 조합해서 사용하곤 했었습니다. 예를 들어, Mocha나 Jasmin을 Test Runner로 사용하고, Chai나 Expect와 같은 Test Matcher를 사용했으며, 또한 Sinon과 Testdouble 같은 Test Mock 라이브러리도 필요했었습니다. 이 라이브러리들은 굉장히 유사하지만 살짝씩 다른 API를 가지고 있었기 때문에, 여러 프로젝트에 걸쳐서 일하는 자바스크립트 개발자들에게 혼란을 주기도 했었습니다.

하지만 Jest는 라이브러리 하나만 설치하면, Test Runner와 Test Matcher 그리고 Test Mock 프레임워크까지 제공해주기 때문에 상당히 편리하게 느껴지는 것 같습니다.

사용법

프로젝트 생성

프로젝트 디렉터리를 생성하고 NPM 초기화 커맨드로 package.json 파일을 만듭니다.

$ mkdir my-jest
$ npm init -y
$ ls
package.json

Jest 라이브러리 설치

Jest 라이브러리를 개발 의존성으로 설치합니다.

npm i -D jest

Jest에서 제공하는 매처(matcher) 예시

test("1 is 1", () => {
  expect(1).toBe(1);
});

//**toBe()** 함수는 숫자나 문자와 같은 객체가 아닌 기본형(primitive) 값을 비교할 때 사용됩니다.

// test("테스트 설명", () => {
//   expect("검증 대상").toXxx("기대 결과");
// });

//toXxx 부분에서 사용되는 함수를 흔히 Test Matcher라고 합니다.

//함수
function getUser(id) {
  if (id <= 0) throw new Error("Invalid ID");
  return {
    id,
    email: `user${id}@test.com`,
  };
}

test("return a user object", () => {
  expect(getUser(1)).toEqual({
    id: 1,
    email: `user1@test.com`,
  });
});

//객체를 검증해야할 때 사용하는 매처로 **toEqual()** 함수를 가장 많이 접한다.

test("number 0 is falsy but string 0 is truthy", () => {
  expect(0).toBeFalsy();
  expect("0").toBeTruthy();
});

//toBeFalsy() 거짓일 경우 통과 , **toBeTruthy()** 진실일 경우 통과

test("array", () => {
  const colors = ["Red", "Yellow", "Blue"];
  expect(colors).toHaveLength(3);
  expect(colors).toContain("Yellow");
  expect(colors).not.toContain("Green");
});

//toHaveLength(number)는 배열 길이 체크, toContain은 원소가 배열에 들어 있는지를 체크
//not Matcher는 진실이면 거짓, 거짓이면 진실을 의미한다.

test("string", () => {
  expect(getUser(1).email).toBe("user1@test.com");
  expect(getUser(2).email).toMatch(/.*test.com$/);
});

//문자열의 경우에는 단순히 **toBe()**를 사용해서 문자열이 정확히 일치하는지를 체크
//정규식 기반의 테스트가 필요할떈 **toMatch()**

test("throw when id is non negative", () => {
  expect(() => getUser(-1)).toThrow();
  expect(() => getUser(-1)).toThrow("Invalid ID");
});

//예외 발생 여부를 테스트해야할 때는 toThrow() 함수를 사용하면 된다.
//주의 할점은 expect() 함수에 넘기는 검증 대상을 함수로 한 번 감싸줘야 합니다

//콜백함수 관련 테스트

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) => {//필수
  fetchUser(1, (user) => {
    expect(user).toEqual({
      id: 1,
      name: "User1",
      email: "1@test.com",
    });
    done();// 필수 
  });
});

// Jest Runner는 빠르게 테스트하려고 한다.
// 그래서 done을 작성하지 않고 실행하면 0.1초만에 지나가서 통과로 뜬다.
// 하지만 1초뒤에 나오는 콜백함수여서 done 메소드를 활용해 함수가 실행되고 나서 테스트 하게 도와야한다.

//Promise 함수

function fetchUser2(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", () => {
  fetchUser2(2).then((user) => {
    expect(user).toEqual({
      id: 1,
      name: "User1",
      email: "1@test.com",
    });
  });
});
//실패하는 함수지만, then이 작동하기도 전에 jest Runner가 pass한다.
//이럴 경우에는 아래처럼 return을 작성해야 올바른 결과를 얻을 수 있다.

test("fetch a user", () => {
  return fetchUser2(1).then((user) => {
    expect(user).toEqual({
      id: 1,
      name: "User1",
      email: "1@test.com",
    });
  });
});

//return을 작성하면 then이 작동한다.

test("fetch a user", async () => {
  const user = await fetchUser2(1);
  expect(user).toEqual({
    id: 1,
    name: "User1",
    email: "1@test.com",
  });
});
//다른 방법으로는 async await를 사용하여 동기처럼 작성할 수 있다.