jest with babel useBuiltIns 'usage' and corejs 3

[SoYoung210]

Desc

다음과 같은 bable.config.js를 사용할때 jest로 테스트를 수행하면 에러가 발생한다.

.babelrc 파일명을 우선 babel.config.js로 변경해야 한다..

module.exports = {
  presets: [
    [
      '@babel/preset-env', {
        'useBuiltIns': 'usage',
        'corejs':3,
      },
    ],
    '@babel/preset-react',
    '@babel/preset-typescript',
  ],
  plugins: [
    '@babel/plugin-transform-runtime',
    '@babel/proposal-class-properties',
  ],
};

Errors..

TypeError: wellKnownSymbol is not a function
TypeError: InternalStateModule.getterFor is not a function

Solution

babel transpile대상에서 core-js를 제외시키고, jest에서도 transformIgnorePatterns에 추가한다.

이 외에도, transplie이슈가 발생하는 모듈이 있다면, ignore목록에 추가하면된다.

// babel.config.js
module.exports = {
  presets: [
    [
      '@babel/preset-env', {
        'useBuiltIns': 'usage',
        'corejs':3,
      },
    ],
    '@babel/preset-react',
    '@babel/preset-typescript',
  ],
+ exclude: [/\/core-js\//],
  plugins: [
    '@babel/plugin-transform-runtime',
    '@babel/proposal-class-properties',
  ],
};

// jest.config.js
module.exports = {
  projects: ['<rootDir>/'],
  collectCoverageFrom: ['src/**/*.{ts}'],
  testRegex: '\\.test\\.(ts|js)x?$',
  coverageThreshold: {
    global: {
      branches: 70,
      functions: 70,
      lines: 70,
      statements: 70,
    },
  },
  moduleNameMapper: {
    '@/(.*)$': '<rootDir>/src/$1',
  },
+ transformIgnorePatterns: [
+   '<rootDir>/node_modules/?!(@rainist/app-info-storage)',
   'node_modules/?!core-js',
+ ],
};

Ref

https://github.com/babel/babel/issues/8731