Fix "Jest encountered an unexpected token" with "create-react-app"

Here is one of the most popular question which is related to testing with jest for repo setup with create-react-app as I've seen in stackoverflow community. So I decided to come with a post on this with a hope to help more people via channel.

The problem is most likely as we install a 3rd party package which is untranspiled. By default Jest will skip to transform any packages in the node_modules.

Here are a few ways I have seen, assume the package is being used @fullcalendar:

• Use a customized package react app customize-cra:

const { override, babelInclude } = require('customize-cra');
const path = require('path');

module.exports = override(
  babelInclude([
    path.resolve('src'), 
    path.resolve('node_modules/@fullcalendar')
  ]),
)

• Use the customized parameter passing to jest via react script

react-scripts test --transformIgnorePatterns \"node_modules/(?!@fullcalendar)/\"",

Of course most of above ways are to try to transform that package again but exclude the others in node_modules by setting transformIgnorePatterns. Unfortunately, the above 2 ways don't work as expected.

What is the best approach to fix?

The easiest way to fix this one is of course also using the same option transformIgnorePatterns but we just simply put in the package.json file under jest area since create-react-app still uses these options to override their default options:

jest": {
  "transformIgnorePatterns": [
    "/node_modules/(?!@fullcalendar)"
  ]
},

Hopefully, it would help!

Comments

[Julian Garamendy]

Thank you for this!

I had lost all hope after reading this issue in create-react-app. Comments are locked. I think someone should link to this article or at least the 3-line solution.

Thanks again!

[Raph.is.me]

Thanks for your solution, still helping in 2022!

Sadly only the command line option worked for me:
--transformIgnorePatterns \"node_modules/(?!react-leaflet)/\"

With:
"react-scripts": "5.0.1",
"customize-cra": "^1.0.0",
"react-app-rewired": "^2.1.8",
"leaflet": "^1.7.1",
"react-leaflet": "^4.0.0",

customize-cra now seems hardly maintained, but the last solution also works in a freshly created react app (without customize-cra nor react-app-rewired), if it can help.

[Sarah]

This just saved me from spending two more hours of Googling. Thank you 🙏🏽

[tmhao2005]

Haha :) thanks