DEV Community

Cover image for How I Fixed The Unexpected Token Error In Jest

How I Fixed The Unexpected Token Error In Jest

Adam Nathaniel Davis on February 23, 2021

I recently ran into a nasty problem that took the better part of a day to get straight. So I'm gonna put my solution here in the hopes that it hel...
Read full post
Collapse
 
ramkrivas profile image
Ramkumar •

I got stuck with this issue from yesterday night and today I woke up early morning and tried different options. Nothing did helped me.

Fortunatelly, I found your article. It resolved the issue and you saved my entire day. I am going to take rest now :-) Thanks

Collapse
 
pranjalrana11 profile image
Prodev •

Great article bro got stuck from 3 days thank you so much

Collapse
 
elieb77 profile image
ElieB77 •

I am using CRA with Typescript, and the second solution did it for me, thanks !

Collapse
 
georgenorris profile image
George C. Norris •

Please Jest team. Update you docs!

Collapse
 
sergeykachaliuk profile image
Сергей Качалюк •

Oh my goodness, thank you so much. Second solution has worked for React app(testing a component to render)

Collapse
 
cormacdoyle profile image
Cormac Doyle •

Thank you for the fix!!

Collapse
 
ahmadmaartmesrini profile image
Ahmad Maartmesrini •

I have been trying for 2 days, only to be missing this

"test": "  . . .  --transformIgnorePatterns \"node_modules/(?!@toolz/allow-react)/\" --env=jsdom"
Enter fullscreen mode Exit fullscreen mode

what's wired that I don't have toolz anywhere in project except the package.json,
thank you so much

Collapse
 
bytebodger profile image
Adam Nathaniel Davis •

The value inside node_modules() isn't supposed to be @toolz/allow-react. It's supposed to be the name of the current project as defined in the package.json.

Collapse
 
ahmadmaartmesrini profile image
Ahmad Maartmesrini •

if my project name is in package.json "task" then it should be:
"node_modules/(@task/allow-react)/"
thanks for your attention to such detail in the comments

Thread Thread
 
bytebodger profile image
Adam Nathaniel Davis •

No. If your project name is "task" then it should be:

"node_modules/(task)/"

Collapse
 
merri profile image
Vesa Piittinen •

I was reading this and then... it ended. I did not expect it to just "end". Are you feeling well?

Collapse
 
bytebodger profile image
Adam Nathaniel Davis •

Haha, yeah, I did consider putting some kinda "conclusion" section at the end. But the conclusion was really just - here's what worked for me. I don't do many hands-on tactical pieces - but that's what this one was. So I didn't feel any need to further embellish.

Collapse
 
sohammondal profile image
Soham Mondal •

I have a CRA TS app and was getting import error for axios while testing. I updated the test script to react-scripts test --transformIgnorePatterns \"node_modules/(?!axios)/\" --env=jsdom and it worked. Thanks!

Collapse
 
chrisyoung0101 profile image
Chris Young •

Yep, before trying anything else I tried this solution and... it worked. Yikes. No wonder folks hate testing :-)

Collapse
 
ilirbajrami_ profile image
Ilir Bajrami •

` Validation Error:

Test environment jest-environment-jsdom cannot be found. Make sure the testEnvironment configuration option points to an existing node module.

Configuration Documentation:
jestjs.io/docs/configuration

As of Jest 28 "jest-environment-jsdom" is no longer shipped by default, make sure to install it separately.`

Collapse
 
elhamb profile image
ElhamB •

Thank you for your solutions. I got stuck with this issue and I have a react app and I have all the things that you have in package.json but I unfortunately can't solve my problem. can you help me? I am new with react and jest.
stackoverflow.com/questions/749404...

Collapse
 
ganeshjangid profile image
ganesh suthar •

FAIL src/main/webapp/src/test/Button.test.tsx
● Test suite failed to run

SyntaxError: C:\Users\SUTHARG\MBSE\helpdesk-portal\src\main\webapp\src\__test__\Button.tsx: Unexpected token, expected "," (4:21)

  2 |
  3 | //const Button = () => {
> 4 | const Button = (props: { onClick: any; text: string }) => {
    |                      ^
  5 |   return <button onClick={props.onClick}>{props.text}</button>;
  6 |   //return <button>test</button>;
  7 | };

  1 | import React from 'react';
  2 | import { render, cleanup, fireEvent } from '@testing-library/react';
> 3 | import Button from './Button';
    | ^
  4 |
  5 | afterEach(cleanup);
  6 |
Enter fullscreen mode Exit fullscreen mode

still same error i am getting .

Babel.config.js

module.exports = {
presets: [['@babel/preset-env'], ['@babel/preset-react']],
};

Collapse
 
oscarsilla profile image
Óscar Silla •

Works for me, thanks!

Collapse
 
gulammd profile image
GulamMdKhalid •

Everything is fine but i don't know how to set env variable
can anyone describe little more on this thing: "Also, this did not work until I set the env value to jsdom."