Jest encountered an unexpected token - SyntaxError: Unexpected token 'export'

Matthew C.

—September 15, 2024

The ProblemThe Problem

When running the Jest JavaScript testing framework in a React app, you may encounter an error such as the following:

Jest encountered an unexpected token
Jest failed to parse a file.

...

Details:

./node_modules/react-markdown/index.js:6
export {uriTransformer} from './lib/uri-transformer.js'
^^^^^^

SyntaxError: Unexpected token 'export'
> 1 | import ReactMarkdown from 'react-markdown';

The SolutionThe Solution

This error occurs because Jest does not support JavaScript ES Modules, and a Node module needs to be transpiled from an ES Module to a CommonJS module.

Use the transformIgnorePatterns option in your jest.config.js file to specify that the Node module that is an ES Module package must be transpiled by Babel:

/** @type {import('jest').Config} */
const config = {
  ...
  "transformIgnorePatterns": [
    "node_modules/(?!(react-markdown)/)"
  ],
};

module.exports = config;

NoteNote

Jest does not support ES Modules; it uses CommonJS modules. ES Modules use the export syntax to export a module, while CommonJS uses the exports object.

Jest uses Babel to compile JavaScript ES Modules to CommonJS, using the @babel/plugin-transform-modules-commonjs Babel plugin. By default, Babel excludes Node modules from transformation. This can be an issue if an ES Module-only package, such as react-markdown, is not pre-transpiled.

If your project uses TypeScript, Jest transforms your TypeScript files to JavaScript using the babel-jest transformer. Make sure that you explicitly add the default babel-jest transformer in your babel.config.js file if you use additional code preprocessors:

"transform": {
  "\\.[jt]sx?$": "babel-jest",
  "\\.css$": "a-css-transformer",
}

Jest is in the process of adding ES Module support. It currently has experimental support.