jest 환경에서 import 사용 설정하기(typescript)

🧐 왜 jest환경에서 import를 사용하기위해서 따로 설정이 필요할까?

이유는 jest가 node환경에서 실행되기 때문이다.
즉 Webpack같은 번들러의 결과물을 실행하는 것이 아니라 파일의 코드 그대로 실행한다.
따라서 ES6나 기타 문법을 사용하고 싶다면 테스트 환경에서 사용하는 babel.config.js 또는 babelrc 파일을 설정해야 합니다.

❓ 바벨 설정 파일 차이
.babelrc : 하위 디렉토리나 파일에서 특정 플러그인이나 변환(규칙)을 실행할 때 사용
babel.config.js : 여러 패키지 디렉토리를 가진 프로젝트에 설정할 때 사용
babel.config.json : babel.config.js 사용에 의한 API 노출로 인해 이에 대한 노출 방지와 복잡도를 줄이기 위해 정적 구성 형태로 설정하는 방법

---

😎 바벨 설정하기

import 사용 설정

위의 이유로 컴파일을위해 프리셋을 설치하고 설정해주어야한다.
먼저 jest환경에서 babel설정을 위해 공식문서에 따라 아래의 프리셋들을 설치해준다.

npm install --save-dev babel-jest @babel/core @babel/preset-env

루트위치에 babel.config.js파일을 생성하여 위의 @babel/preset-env프리셋을 추가해준다.

//babel.config.js

module.exports = {
  'presets': ['@babel/preset-env'],
};

typescript 설정

타입스크립트 파일도 컴파일링하기위해 @babel/preset-typescript프리셋을 설치하여 설정해준다.

npm install --save-dev @babel/preset-typescript

//babel.config.js

module.exports = {
  'presets': ['@babel/preset-env','@babel/preset-typescript'],
};

🙏참고

• jest 공식문서
• jest로 test할 때 import 사용하기
• jest에서의 import 사용