[Monorepo] Jest 실행 때 자꾸 SyntaxError가 난다면 Babel 설정을 다시 해보자

SyntaxError: Cannot use import statement outside a module

Monorepo 구조의 프로젝트에서 Jest를 도입하는 초기 과정에서 이런 에러가 났다.

이렇게 import 할 때부터 에러가 난다면 Babel이 트랜스파일링을 못하고 있는 것이다. 그런데 Webpack 서버를 실행하거나 빌드할 땐 문제가 없었는데 왜 Jest를 실행할 때 이런 에러가 나는 걸까? 먼저 Monorepo에서의 Babel 설정에 대해 이해할 필요가 있다.

Monorepo에서 Babel 설정하기

Monorepo에서는 레파지토리의 루트에 babel.config.json 파일을 생성해서 핵심 설정을 지정해야 한다. .babelrc.json 파일을 통해 각 하위 패키지에서 개별 설정을 할 수도 있지만, 이 때도 루트 레벨의 옵션을 먼저 설정한뒤 overrides 옵션을 사용해 오버라이드하는 것이 좋다. Babel 7부터 이런 루트 디렉터리의 개념이 사용되고 있으며, Babel은 이 루트 디렉터리에서 babel.config.json 파일(.js, .cjs, .mjs 확장자 지원)을 자동으로 검색해 적용한다.

여기서 주의해야 할 점은 Monorepo에서의 Babel은 레파지토리의 루트가 아닌, Babel이 실행되는 작업 디렉터리를 논리적인 루트로서 취급한다는 것이다. 따라서 하위 패키지에서 Babel 프로세스를 실행하려는 경우, 해당 패키지가 루트로 취급되어 레파지토리의 루트가 아닌 패키지 내에서 babel.config.json 파일을 찾기 때문에 위와 같은 SyntaxError가 발생할 수 있다.

이 때는 Babel에게 어디서 설정 파일을 찾아야하는지 알려줘야 한다. 공식문서에서 추천하는 방법은 rootMode 옵션을 upward로 설정하는 것이다. 그러면 Babel이 작업 디렉터리에서부터 레파지토리 루트 방향으로 babel.config.json 파일을 찾고, 파일을 찾은 그 위치를 root 값으로 사용하게 된다.

Webpack에서 Babel Config 파일 분리하기

내 Monorepo의 구조는 아래와 같다. 번들러로 사용하고 있는 Webpack의 공통 설정을 레파지토리 루트의 webpack.base.js 에 정의하고,
각 하위 패키지의 webpack.config.js에서 머지한 뒤 패키지마다 독립적으로 Webpack 스크립트를 실행한다.

webpack.base.js
packages/
  app1/
    src/index.js
    webpack.config.js
    package.json
  app2/
    src/index.js
    webpack.config.js
    package.json

이 때 Babel 설정을 따로 분리하지 않고 Webpack의 설정에 함께 정의를 했었는데 Jest가 이 때문에 Babel 설정을 제대로 찾지 못한다는 의심이 들었다. 그래서 Webpack 스크립트를 실행할 땐 문제가 없었지만 Jest 스크립트를 실행할 때 문제가 됐던 게 아닐까 생각했다. 따라서 Babel 설정을 별도의 babel.config.js 파일로 분리하기로 했다.

이렇게 babel-loader의 options 프로퍼티에 정의했던 Babel 설정을

// webpack.base.js

module: {
  rules: [
    {
      test: /\.[jt]sx?$/,
      use: [
        {
          loader: 'babel-loader',
          options: {
            presets: [ ... ],
            plugins: [ ... ],
          },
        },
      ],
    },
  ]
}

아래처럼 분리해줬다. 이 때 코드상에서 development mode일 때 별도 처리가 필요해서 .json이 아니라.js 파일로 작성했다.

// babel.config.js
const isDevelopment = process.env.NODE_ENV === 'development'

const config = (api) => {
    api.cache(true)

    const presets = [ ... ]
    const plugins = [
        'some plugin',
        isDevelopment && 'other plugin',
    ].filter(Boolean)

    return {
        presets,
        plugins,
    }
}

module.exports = config

그런 뒤 Webpack의 babel-loader에게 루트 디렉터리를 레파지토리 루트로 변경하라고 알려주면 된다.

// webpack.base.js

module: {
  rules: [
    {
      test: /\.[jt]sx?$/,
      use: [
        {
          loader: 'babel-loader',
          options: {
            rootMode: 'upward', // 이 옵션이 없으면 루트의 babel.config.js 파일을 찾지 못한다
          },
        },
      ],
    },
  ]
}

그런데 여기서 끝이 아니다! Jest도 babel을 사용하기 때문에 테스트를 실행하는 위치에 따라서 별도의 설정이 필요할 수 있다. 난 이 부분에서 삽질을 겁나 했다.

Jest는 babel-jest를 사용해 트랜스파일링한다

Jest는 자바스크립트로 코드를 실행하기 때문에 JSX, TypeScript와 같은 코드는 JS로 트랜스파일링이 필요하다. 기본적으로 jest를 설치하면 babel-jest가 설치되며, 자동적으로 이를 transformer로 사용해 프로젝트에 존재하는 Babel 설정을 찾아 .js, .jsx, .ts, .tsx 파일을 트랜스파일링한다.

따라서 Jest 설정의 transform 옵션의 기본값은 {"\\.[jt]sx?$": "babel-jest"}이며 transformer에 별도의 옵션이 필요하다면 {"\\.[jt]sx?$": ["babel-jest", {options}]}와 같이 튜플 형태로 두 번째 인자에 옵션을 설정할 수 있다.

⭐️ babel-jest의 rootMode 옵션

Jest를 Monorepo의 루트에 설치하고 실행하면 별도의 설정없이도 잘 될 거라고 한다. 하지만 나처럼 하위 패키지에 Jest를 설치하고 실행하는 경우에는 babel-loader에게 rootMode 옵션을 설정해줬던 것처럼 babel-jest한테도 동일한 옵션을 설정해줘야 한다!

babel.config.json
webpack.base.js
packages/
  app1/
    src/index.js
    jest.config.js    #app1 패키지에서만 jest를 설치하고 실행하는 구조
    webpack.base.js
    package.json    

왜냐면 하위 패키지에서 babel-jest로 인해 Babel 프로세스가 실행될 거고, Babel 특성상 레파지토리 루트가 아닌 해당 패키지를 루트로 취급하고 babel.config.json을 찾으려고 하기 때문이다. 그래서 babel-jest에게도 설정 파일을 찾아야하는 위치를 알려줘야 한다! 잊지 말자!!

// jest.config.js 

 transform: {
   '^.+\\.[jt]sx?$': ['babel-jest', { rootMode: 'upward' }],
 },