import, export가 쓰인 파일을 jest로 테스트하는 방법

앱을 구현하다가 재사용 빈도가 높을 모달을 만들게 됐고

회사에서 조금 끄적여본 테스트 코드를 적용해보고 싶어졌다.

하나만 손대더라도 다양한 방법으로 사용될 모달 클래스에 문제가 생길 우려가 있었기 때문이다.

또한 모달은 다른 구현체에 비해 복잡도가 높지 않아 만만해 보이기도 했다.

 

그러나 jest가 import가 붙은 파일을 테스트하지 못했다.

test 명령을 입력할 때마다 모르는 문법이라고 짜증을 냈다.

 

노드는 기본적으로 import와 export를 모른다.

노드 기반의 jest를 올바로 동작하게 하려면 바벨 형님을 이용해 변환 작업이 필요했다.

 

먼저 필요한 devDependencies는 다음과 같다.

전부 설치하자.

"devDependencies": {
  "@babel/core": "^7.12.7",
  "@babel/preset-env": "^7.12.7",
  "jest": "^26.6.3"
}

 

바벨을 쓰려면 저 core 녀석이 항상 필요하다.

preset-env는 자동으로 바벨 관련 설정을 해주는 녀석이다.

jest는 jest다.

 

오래 헤맸는데 정답은 공식 문서에 있었다.

그것도 게팅 스타티드에;;

jestjs.io/docs/en/getting-started

 

공식 문서에 따르면 사용자의 노드 환경에 맞게 변환해 주기 위해서

babel.config.js 파일을 다음과 같이 작성해야 한다고 한다.

json 파일로 module.exports만 빼고 작성해도 상관 없다.

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

 

이렇게 하면 보통 다 해결 되지만

본인은 CSS 모듈을 불러오는 import에서 syntax 에러가 발생했다.

 

스택오버플로우를 찾아보니 다행히 해결 방법이 있었다.

stackoverflow.com/questions/41040269/syntax-error-when-test-component-with-sass-file-imported

 

identity-obj-proxy를 설치하고

npm i -D identity-obj-proxy

 

jest.config.js 파일에 아래의 내용을 작성한다.

module.exports = {
  "moduleNameMapper": {
    "^.+\\.(css|less|scss)$": "identity-obj-proxy"
  }
}