Jest SyntaxError: Unexpected token 'export'

In this post, I'm not going to explain how to configure react-testing-library and Jest, there is a lot of useful information about it. This time I'm going to talk about a specific error: SyntaxError: Unexpected token 'export'.

I spent 2 days trying to figure out what was causing the error as my configuration was working fine and I could test some simple components until I tried to test a component which is using an external dependency, in my case react-day-picker.

// MyCoolComponent.jsx

import 'react-day-picker/lib/style.css';

import React, {useState} from 'react';
import PropTypes from 'prop-types';

import AsyncSelect from 'react-select/async/dist/react-select.esm';
import DayPicker, {DateUtils} from 'react-day-picker';
import MomentLocaleUtils from 'react-day-picker/moment';
...
// the rest of the component's code

The component works fine with this imports

import AsyncSelect from 'react-select/async/dist/react-select.esm';
import DayPicker, {DateUtils} from 'react-day-picker';
import MomentLocaleUtils from 'react-day-picker/moment';

but Jest doesn't like it and throws a SyntaxError: Unexpected token 'export'

I tried different things, like play around with .babelrc and some dependencies, moduleNameMapper and transformIgnorePatterns in jest.config.js, and the last one was close but I was still missing one important thing... the imports.

So the final fix was:

1. Update the imports

import AsyncSelect from 'react-select';
import DayPicker, {DateUtils, LocaleUtils} from 'react-day-picker';

1. Add those dependencies to transformIgnorePatterns in jest.config.js

...
transformIgnorePatterns: [
  '/node_modules/(?!react-select)',
  '/node_modules/(?!react-day-picker)',
],
...

Probably it was caused by hurrying up writing a component and autocompleting an import with an IDE help. For Webpack it is fine because it passes all the code through Babel, links all dependencies, and transpile them to vanilla js which in Jest's case isn't.

I still have doubts about, drop me a comment, and let's discuss it :)

Happy coding, thanks for reading.

Thanks @kazukyakayashi for the picture.

Comments

[Gabi Mor]

Hi :) I'm having a similar issue and for the life of me cant manage to make jest form with some of our modules. receiving the Unexpected token 'export'

tried to ignore the module with no success. I'd love to get your insight about this :)

[Olek]

Thanks for your comment Gabi, would be nice if you could share a minimal repository with the issue you have, so I could take a look to see if I can do something there.

[Gabi Mor]

Thanks Olek! Already figured it out, just npm installed the package that crashed, upgrading its veraion solved it

[Anton Kolesnikov]

Maybe:

transformIgnorePatterns: [
'/node_modules/(?!(react-select| react-day-picker))'
],