[JavaScript] Jest encountered an unexpected token 해결

Jest encountered an unexpected token
SyntaxError: Cannot use import statement outside a module

 

node js 에서 Test code를 Jest로 작성하던 중 해당 오류를 만났다.

import 쪽에서 오류가 발생하였다는데 해결하는데 꽤 시간이 걸렸다.

 

오류의 근본적인 원인으로는 jest는 현대 문법의 js를 test 하지 못하여서 생긴다. (import 가 불가한 이유 -> Require 사용)
https://dev.to/bytebodger/how-i-fixed-the-unexpected-token-error-in-jest-4o1j

How I Fixed The Unexpected Token Error In Jest

https://jestjs.io/docs/getting-started

Getting Started · Jest

위에서 나오듯 babel-jest를 install 해주고 babel의 설정 파일에서 @babel/preset-env 정도만 설정해주면 된다.

위의 babel-jest는 결국 기본 runtime 때 babel을 먼저 적용해주고 jest를 적용하는 원리여서 기존 jest만 설치되어 있다면 babel의 설정 파일에서 runtime 시에도 동작하도록 설정하면된다.

 

결국 babel을 통해 해결해야하는데 babel-jest가 아닌 방식으로 한번 해보려고 한다.

아래의 4가지 plugins를 package.json에 추가해주자.

@babel/core                                                                - babel 설치

@babel/preset-env                                                     - babel의 설정파일에 사용

@babel/plugin-transform-runtime                            - babel을 runtime시에도 적용하여 jest가 Runtime때 적용 되도록 해준다.

root 아래에 babel.config.js 를 생성해주자.
babel의 설정파일이다.

module.exports = {
    presets: [["@babel/preset-env", {
      targets: {
        node: "16"
      }
    }]],
    env: {
      test: {
        plugins: [
          "@babel/plugin-transform-modules-commonjs",
          '@babel/plugin-transform-runtime'
        ]
      }
    }
  }

위 내용을 요약하면 test 시에 babel을 적용하면 나오는 출력물이 commonjs가 되도록하는 plugin과 runtime시에도 babel을 적용하는 plugin을 사용하도록 한 것이다.