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...
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
 
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
 
pranjalrana11 profile image
Prodev

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

Collapse
 
georgenorris profile image
George C. Norris

Please Jest team. Update you docs!

Collapse
 
erikjamesrobles profile image
canis major

I, like the author of this post, struggled a long time until I found this article. Saved my skin as well so, Thank you Adam for posting this article.

Collapse
 
fabianimv profile image
01000110

u just saved my week, thanks, I've been trying to figure out how to fix that message all morning

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

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

Collapse
 
elieb77 profile image
ElieB77

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

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
 
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."

Collapse
 
utsav0601 profile image
UTSAV0601

Thank you, your article really helped me. But again i am facing the same error when I use npx jest --coverage to check my unit test coverage where as all the test cases ran successfully