📚

Jestで SyntaxError: Unexpected token 'export' というエラーが出て困った話

2024/10/08に公開

TypeScript

Jest

tech

環境情報

- Node.js: 16.20.0
- jest@26.6.3
- ts-jest@26.5.6
- babel-jest@29.7.0

※利用しているバージョンが低いので、最新バージョンであればこのあたりの解決方法が適用できそうです。

エラー内容

 FAIL  src/hoge.test.ts
  ● Test suite failed to run

    Jest encountered an unexpected token

    This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

    By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

    Here's what you can do:
     • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/en/ecmascript-modules for how to enable it.
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/en/configuration.html

    Details:

    /src/node_modules/web-vitals/attribution.js:18
    export * from './dist/web-vitals.attribution.js';
    ^^^^^^

    SyntaxError: Unexpected token 'export'

      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1350:14)
      at Object.<anonymous> (node_modules/aws-rum-web/dist/cjs/plugins/event-plugins/WebVitalsPlugin.js:20:21)

解決方法

Babelを利用し、ESModuleのライブラリをCommonJs形式に変換してからテストを行う。

Babel関連のインストールと設定
jestの設定

Babel関連のインストールと設定

Jestのドキュメントに記載の通り、Babelの設定をします。

npm install --save-dev babel-jest @babel/core @babel/preset-env

module.exports = {
  presets: [['@babel/preset-env', {targets: {node: 'current'}}]],
};

jestの設定

const esModules = ['web-vitals'].join('|');

module.exports = {
  transform: {
    '^.+\\.(js)$': 'babel-jest',
  },
  transformIgnorePatterns: [`/node_modules/(?!${esModules})`],
  
}

transformIgnorePatterns で、特定のモジュールをトランスパイルするように設定します。今回はweb-vitalsというパッケージがESModule記法だったので、こちらを対象外とするように設定しています。

transform で、トランスパイルに利用するパッケージを記載します。