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:
- Update the
imports
import AsyncSelect from 'react-select';
import DayPicker, {DateUtils, LocaleUtils} from 'react-day-picker';
- Add those dependencies to
transformIgnorePatterns
injest.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.
Latest comments (4)
Maybe:
transformIgnorePatterns: [
'/node_modules/(?!(react-select| react-day-picker))'
],
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 :)
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.
Thanks Olek! Already figured it out, just npm installed the package that crashed, upgrading its veraion solved it