5
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

Jest 実行時のエラー SyntaxError: Unexpected token 'export' 😭

Last updated at Posted at 2023-01-13

事象

Jest を実行した時、SyntaxError: Unexpected token 'export' が出ました😭
エラー詳細は以下の通りです。

 FAIL  ***.test.ts
  ● 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.

    Here's what you can do:
     • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/ecmascript-modules for how to enable it.
     • If you are trying to use TypeScript, see https://jestjs.io/docs/getting-started#using-typescript
     • 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/configuration
    For information about custom transformations, see:
    https://jestjs.io/docs/code-transformation

    Details:

    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){export { *** } from '***';
                                                                                      ^^^^^^

    SyntaxError: Unexpected token 'export'


    > 1 | import { *** } from '***';
        | ^

      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1728:14)

原因

ts-jestでESModuleに対応していないが、
使用していた外部ライブラリがESModuleで提供されていたためこのエラーが出ていました。

→ ts-jestの設定で解決できるかも?試してみて上手くいったら記事更新します。
TypeScript: JestでES Modulesは問題なくテストできるのか?

→ (追記)ts-jestでESModuleを使用するには設定が必要でした🤗

対応方法1(上手くいったので追記です!)

jest.config.tsに以下の設定を追加します。

jest.config.ts
preset: 'ts-jest/presets/default-esm',
globals: {
    'ts-jest': {
      tsConfig: 'tsconfig.json',
      useESM: true,
    },
  },

対応方法2

babel関係のライブラリをインストールします。

npm i -D babel-jest @babel/core @babel/preset-env @babel/plugin-transform-modules-commonjs

babel.config.js を追加します。

babel.config.js
module.exports = {
  presets: [
    [
      '@babel/preset-env',
      {
        targets: {
          node: 'current',
        },
      }
    ]
  ],
  plugins: [
    '@babel/plugin-transform-modules-commonjs',
  ]
}

jest.config.ts に以下の設定を追加しました。

jest.config.ts
  transform: {
    '^.+\\.(js|jsx)$': 'babel-jest',
    '^.+\\.(ts|tsx)$': 'ts-jest',
  },
  transformIgnorePatterns: [
    '/node_modules/(エラーになっているライブラリ).+\\.ts',
  ],

参考

5
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?