DEV Community 👩‍💻👨‍💻

tmhao2005
tmhao2005

Posted on • Updated on

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')
  ]),
)
Enter fullscreen mode Exit fullscreen mode
  • Use the customized parameter passing to jest via react script
react-scripts test --transformIgnorePatterns \"node_modules/(?!@fullcalendar)/\"",
Enter fullscreen mode Exit fullscreen mode

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)"
  ]
},
Enter fullscreen mode Exit fullscreen mode

Hopefully, it would help!

Top comments (4)

Collapse
 
juliang profile image
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!

Collapse
 
raphaelmechali profile image
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.

Collapse
 
sarahk profile image
Sarah

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

Collapse
 
tmhao2005 profile image
tmhao2005 • Edited on

Haha :) thanks

All DEV content is created by the community!

Hey, if you're landing here for the first time, you should know that this website is a global community of folks who blog about their experiences to help folks like you out.

Sign up now if you're curious. It's free!