Jest, Unexpected Token Import Jest, Unexpected Token Import reactjs reactjs

Jest, Unexpected Token Import


I had a very similar issue and at the end I solved it just using --no-cache when running jest.

I also had in my package.json dependencies like babel-jest, babel-preset-es2015, babel-preset-react, etc.

jest --no-cache


Assuming you've done everything normally suggested and nothing seems to work: Change file extensions from .jsx to just .js. While some libraries/versions in my project were fine with .jsx, others weren't, and it was a nightmare trying to find out who was causing the problem.

You don’t want to have to keep monitoring every update to every file your team touches to check whether it’s adding JSX or removing the last bit of JSX. In practice it’s common to add and remove it from files as your code undergoes changes. You’re going to spend a lot of time either reminding people “hey you should rename this file now” manually or being yelled at by the linter, just because of a tiny code change. And it opens the possibility of both foo.js and foo.jsx existing at the same time - what happens then? - A smart co-worker

If you still want the highlighting and autocomplete your IDE would give you for JSX files, you should be able to make project specific workspace changes. For VSCode it's as simple as:

"files.associations": {    "*.js": "javascriptreact"},"emmet.syntaxProfiles": {    "javascript": "jsx"}


If you are facing this issue after updating to a newer Jest version, try clearing internal cache of Jest:

jest --clearCache