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.