ts-jest 사용해보기

개인적으로 진행중인 프로젝트에서 테스트 코드를 작성해보고 싶어서 jest 사용에 도전해봤다.
jest는 이름만 알고 있었는데 공부도 이번에 처음 해봤고 테스트 코드도 이번에 처음 작성해봤다.

설치

프로젝트는 react + typescript인데 jest는 js기반이어서 typescript를 지원하려면 추가적인 설정이 필요하다.

typescript를 지원하도록 하기 위해서는 babel을 이용해 설정하는 방법과 ts-jest를 이용하는 방법이 있었다.
babel을 사용하는 방식은 babel이 트랜스파일링을 통해 타입스크립트 코드를 처리할 수 있는것이지 유형 검사를 지원하지는 않는다고 한다.
그래서 유형 검사도 지원하는 ts-jest 방식을 선택하게 되었다.

npm install --save-dev jest typescript ts-jest @types/jest

npx ts-jest config:init

간단한 개념

test("1 + 1은?", ()=>{
	expect(1+1).toBe(2);
})

test 함수 블럭이 하나의 테스트가 된다.
expect함수는 예상 객체를 반환하는 함수이다.
toBe를 matcher 라고 부른다.

test 블럭 내에서 예상 객체의 값을 matcher를 통해 비교하는 구조이다.

가장 간단하고 많이 쓰이는 matcher가 toBe이고 숫자 비고, null인지 undefined인지 등등 다양한 matcher를 제공한다.

실행 오류 (esModuleInterop)

matcher 종류를 쓱 훑어보고 직접 코드를 작성하고 실행했는데 아래와 같은 오류를 만났다.

읽어보니 esModuleInterop을 tsconfig.json에 설정하라는 것이었다.

esModuleInterop이란?

공식문서

typescript에서 다른 스펙의 모듈을 import할때 문제가 발생한다.
import * as something from something와 import something from something같은 구문에서 import 대상이 object가 아닌 경우에 es6 모듈 사양에 호환되지 않게 되는것이 문제였다.
이를 해결하기 위해 tsconfig의 compilerOptions에 esModuleInterop을 true로 설정해주면 된다고 해서 설정했다.

테스트 코드 예시

// util 함수
/**
 * date string을 받아서 오늘로부터 며칠이 남았는지 계산
 * @author jaehee
 * @date 2023-09-06
 * @param {string} startDate:string
 * @returns {number} d-day
 */
export const calculDday = (startDate: string): number => {
  const toDay = dayjs().startOf("day");
  const startDay = dayjs(startDate).startOf("day");

  return toDay.diff(startDay, "day");
};

// test 코드
/**
 * 주어진 날짜가 오늘인지 테스트
 * @author jaehee
 * @updated 2023-11-05
 */
test("주어진 날짜가 오늘인지 테스트", () => {
  const todayStr = dayjs().toString();
  expect(calculDday(todayStr)).toBe(0);
});

현재 작성하는 코드들은 util 함수들의 로직을 검증하는 용도로 테스트 코드를 짜고 있어서
test 코드 하나당 두세개 정도의 테스트 코드를 작성하고 있다.

후기

유틸 함수 검증용 테스트 코드를 짜면서 예전에 구현했더 코드를 다시 읽어보면서 주석이 좀 더 필요한 부분, 변수명을 이상하게 썼던 부분들이 발견되어서 코드의 품질을 좀 더 높일 수 있는 계기가 된것 같다.
로직 검증 뿐만 아니라 나중에 추가될 비즈니스 로직도 테스트 코드를 짜봐야겠다.