Jest with create-react-app - unexpected token errors

wildlifehexagon

I am working on an application that was recently converted from an old Webpack build to use create-react-app. Most of the transition has went smoothly, but I'm running into some major issues with the previous unit tests. When I run npm test which has the standard package.json test script of "test": "react-scripts test --env=jsdom", it says all my snapshot tests have failed. This is fine and expected since there have been a lot of changes, and the tests need to be updated.

However, when I just run jest or jest --updateSnapshot, all of my tests immediately fail with SyntaxError: Unexpected token errors, most of which are related to import. This leads me to believe that Jest isn't using Babel to transform the ES6 syntax correctly.

Previously, we used a .babelrc file with these settings:

{
"presets": ["env", "react", "stage-0", "flow"],
"plugins": ["transform-runtime", "add-module-exports", "transform-decorators-legacy"]
}

But since Babel is already included in create-react-app I removed this file as well as any references to Babel. My package.json also does not have any special scripts set up for Jest itself.

I have tried adding some of the previously used Babel packages back in, but after further reading it seems those won't work anyway unless I eject from create-react-app and that is not an option at this time.

What would cause npm test to run correctly but jest to fail miserably?

wildlifehexagon

It turns out it was a Babel issue. Even though create-react-app comes pre-configured, we still had to add in custom configuration since our app wasn't initially built with cra. I installed some new dev dependencies:

"babel-cli": "^6.26.0",
"babel-jest": "^22.4.1",
"babel-preset-react-app": "^3.1.1",

And also updated the .babelrc:

{
  "presets": ["babel-preset-react-app"]
}

And now both jest and npm test both work as they should.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

Create-React-App build - "Uncaught SyntaxError: Unexpected token <"

Unexpected token errors in Powershell

Unexpected import token - testing React Native with Jest

'Unexpected token import' while testing in create-react-app

React JS Jest causing "SyntaxError: Unexpected token ."

Unexpected Token - Jest for existing React + Web-pack app

Jest: "SyntaxError: Unexpected token {"

React Jest - Unexpected token import

Jest: Unexpected token @ Decorator

Jest - Unexpected token import

Jest Error Unexpected token on react component

testing React Native Application with Jest - Jest encountered an unexpected token

Jest encountered an unexpected token

Jest encountered an unexpected token with react-native

Unexpected token export with jest

TypeScript errors doesn't show when running tests through JEST with create-react-app

Firebase and Create React Gives 'Unexpected token <' Error

Configure production environment in a create-react-app(SyntaxError: Unexpected token < in JSON at position 0)

Jest encountered an unexpected token React

Error when running jest on a react native + typescript app (Jest encountered an unexpected token)

Jest tests on React components: Unexpected token "<"

Jest encountered an unexpected token (React, Typescript, Babel, Jest & Webpack setup)

Heroku create-react-app deploy Uncaught SyntaxError: Unexpected token <

React app: Jest encountered an unexpected token

create-react-app Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0

Jest: unexpected token export with react-navigation

Syntax error: Unexpected token, expected { (1:7) , create-react-app

jest/puppeteer - unexpected token

Whenever I save app.js files in react it errors always comes up and unexpected token