jest에서 ESM 사용하기

바닐라 자바스크립트로 개발을 하던 중, jest로 테스트 코드를 작성하려는데 import문에서 오류가 발생했다. nodejs 환경에서는 기본적으로 CommonJS 모듈을 사용하기 때문에 ESM 을 사용할 수 없는데, 트랜스파일링을 통해 해결한다.

1. 프로젝트 생성 및 필요한 패키지 설치

$ mkdir jest-test && cd jest-test
$ npm init --y
$ npm i --save-dev jest @babel/preset-env

2. babel 설정

// babel.config.json
{
  "presets": ["@babel/preset-env"]
}

3. jest 설정

// package.json
{
  ...
  "scripts": {
    "test": "jest"
  },
  ...
}

{
  "transform": {
    "^.+\\.js$": "babel-jest",
    "^.+\\.mjs$": "babel-jest"
  }
}

babel-jest는 jest를 설치하면 같이 설치되는데, 위 설정을 추가하면 .js, .mjs 파일에 jest실행시 대해 babel이 트랜스파일하게 만든다.

4. 테스트

// index.js
export default () => {return '테스트';}

// index.spec.js
import test from './index'

describe('테스트', () => {
  it('테스트', () => {
    const result = test();
    expect(result).toBe('테스트')
  })
})

$ npm run test
> jest-test@1.0.0 test
> jest

 PASS  ./index.spec.js
  테스트
    ✓ 테스트 (1 ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        0.291 s
Ran all test suites.

정상작동한다. 만약 babel 설정을 지우면 아래와 같은 에러를 마주하게 된다.

$ npm run test
> jest-test@1.0.0 test
> jest

 FAIL  ./index.spec.js
  ● Test suite failed to run

    Jest encountered an unexpected token

    Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.

    Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.

    By default "node_modules" folder is ignored by transformers.

...

5. 결론

요즘 거의 타입스크립트로 개발하다보니 타입스크립트 컴파일러가 이런 부분을 다 처리해줘 babel을 사용할 일이 없어 찾는데 좀 해맸다. 웹팩을 사용해서 babel-loader 를 사용하는 방식도 있을 것 같은데 찾아보아야 할 듯 하다!