Jest import (ESM)기능 활성화하기 (with 프로그래머스 과제관)

프로그래머스 과제관의 vanilla.js 과제를 복기하던 도중 문제가 생겼다.

프로젝트가 기본적으로 Ecmascript modules(이하 ESM)를 지원하지 않아서 import 구문을 사용할 수 없었다.

이 문제같은 경우에는 단순히 ESM을 사용한다는 것만 명시해주면 되기 때문에 수정이 어렵지 않았다.

// index.html
<script type="module" src="src/main.js"></script>

// package.json
{
    "type": "module"
}

문제는 ESM을 활성화하니 Jest에서 에러가 났다. node 기반의 테스트 환경이기 때문에 ESM을 기본적으로는 지원하지 않기 때문이다.

이전에는 이 에러를 수정하고 ESM을 사용하기 위해서 상당한 삽질(?)이 필요했던 것 같은데, Jest 25.4.0 버전 이후로는 설정이 매우 간단해졌다. [Meta: Native support for ES Modules]

 

1. Jest 버전 설정

우선 Jest를 25.4.0 버전 이후 버전으로 설정해준다. 필자의 경우 25.4.0 버전을 사용했을 때 에러가 발생해 26.6.3 버전을 설치했다. 

// package.json
{
  "devDependencies"{
  	"jest": "^26.6.3"
  }
}

2. package.json의 테스트 스크립트 설정

node 실행 시 ESM을 사용할 것이라는 옵션(--experimental-vm-modules)을 추가해 주어야 한다. 따라서 테스트 스크립트를 다음과 같이 변경한다. 덧붙여, --experimental-vm-modules를 사용하기 위해서는 node.js가 12.16.0 버전 이상이어야 한다. 또한, experimental 기능이므로 언제든 변경될 수 있다.

"scripts": {
    "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js",
}

3. jest.config.js 수정

이제 프로젝트에서는 ESM만 사용할 것이므로, jest 설정도 ESM 스타일로 바꿔준다. 기본적으로는 프로그래머스 과제관의 설정을 그대로 사용하면 별다른 문제가 없다. 다만 다음 설정들을 수정하거나, 추가해 주어야 한다.

• transform : {} 
• rootDir : 프로젝트의 rootDir (보통 package.json이 위치한 곳)

export default async () => {
  return {
    // jest configurations
    transform: {}
    rootDir: "./"
  };
};

transform을 비워준 이유는 위에 링크한 Meta: Native support for ES Modules의 글 중, 아래 내용을 참고한 것이다. 본 프로젝트에서는 따로 바벨을 설정하지 않아 transform만 비워줬다. 

make sure you don't run transform away import statements (set transform: {} in config or otherwise ensure babel doesn't transform the file to CJS, such as avoiding the modules option to preset-env)

추측하건데 바벨 설정에 ESM을 CommonJS 모듈로 바꿔주는 설정이 되어 있다면 그 설정도 빼 주어야 할 것이다.

4. 테스트 코드 수정

테스트 코드의 require를 import 구문으로 바꿔서 사용하면 된다.