[Typescript] jest로 test할 때 import 사용하기

타스를 쓰면서 테스트를 하고 싶은 경우가 있을 것이다. 그런데 테스트 파일에서 import 문을 그냥 쓰면 에러가 난다. 이를 해결해보자.

선 정리

설치

jest를 typescript에서 사용하기 위해 필요한 패키지들과 바벨 플러그인을 설치하자.

yarn add -D jest ts-jest @types/jest
yarn add -D @babel/preset-typescript @babel/preset-env

바벨 설정

.babelrc 파일을 만들고 그 안에 아래와 같이 쓰자

{
  "presets": ["@babel/preset-typescript", "@babel/preset-env"],
}

끝

왜 안될까?

.ts 확장자의 다른 파일들은 es6의 import export 로 멀쩡히 돌아가는데 왜 jest를 이용한 test 코드만 안돌아가냔 말이다!!

여러분은 타스를 간편하게 실행시킬 때 ts-node를 사용하고 있었을 것이다. 이 친구는 친절히도 내부적으로 타스 코드를 자스로 변환 시킨 뒤(아마 바벨을 이용했을 것이다) 실행시켜준다. 이 과정이 뒤에 숨겨져있기 때문에 우리는 "그냥 잘 된다"라고 착각하고 있었던 것이다.

자 그럼 우리의 테스트 코드는 누가 실행시키는가? jest 모듈이 실행시킨다. 그리고 이 jest 모듈은 별다른 설정을 해주지 않으면 테스트 대상의 코드가 javascript 일 것이라고 생각한다. 그래서 에러가 발생했던 것이다.

근데 애초에 import export는 왜 안 되지?

노드 환경에서 모듈 시스템은 commonJS(require, export)를 따른다. 그런데 javascript 표준 모듈 시스템(import export)가 있는데 왜 비표준인 CJS를 쓰지? 라고 생각할 수 있다. 사실 자바스크립트 공식 모듈 시스템인 ESM은 es6에 처음 나왔으며 노드는 훨씬 나이가 많다. 과거에 노드에서 모듈을 사용할 방법이 필요했기 때문에 그 기준으로 commonJS 선택했던 것이다.

어떻게 해결한걸까?

babel

jest는 매우 친절하게도 바벨을 참조하여 파일을 내부적으로 트랜스파일 한 뒤 실행하는 듯 하다. 따라서 바벨을 사용하면 문제를 해결할 수 있다.

• 바벨이 뭔데요?? -> 이 분이 정리를 정말 잘 해놓으셨다. 공부하고 오자.

import 부터 처리

@babel/preset-env 는 ECMAScript2015(es6) 이상의 코드를 이전 버전으로 바꾸어 준다. 이 preset 을 적용시킴으로써 import를 사용할 수 있게 된다.

typescript 도 처리

@babel/typescript 는 타입스크립트를 js로 바꾸어준다. 이 preset를 빼먹으면 위와 같은 에러가 나온다.

결과