DEV Community

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

Ramkumar • Apr 12 '22

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

Soham Mondal • Oct 12 '22

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!

Chris Young • Dec 4 '22

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

Prodev • Oct 12 '23

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

Сергей Качалюк • Jan 23 '24

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

George C. Norris • Jul 20 '22

Please Jest team. Update you docs!

canis major • Jul 20 '24

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.

01000110 • Jun 24 '24

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

ElieB77 • Feb 20 '23

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

Adam Nathaniel Davis • Feb 24 '21

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.

Cormac Doyle • Feb 2 '22

Thank you for the fix!!

Ahmad Maartmesrini • Feb 27 '24

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

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

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

Adam Nathaniel Davis • Feb 27 '24

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.

Ahmad Maartmesrini • Feb 27 '24

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

Adam Nathaniel Davis • Feb 27 '24

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

"node_modules/(task)/"

Ilir Bajrami • Dec 1 '22

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

shridhar lingaraddi • Jan 19 '25

Error: Could not parse CSS stylesheet
at exports.createStylesheet (/Users/shridhar/Downloads//node_modules/jsdom/lib/jsdom/living/helpers/stylesheets.js:34:21)
at HTMLStyleElementImpl._updateAStyleBlock (/Users/shridhar/Downloads//node_modules/jsdom/lib/jsdom/living/nodes/HTMLStyleElement-impl.js:68:5)

Any solution this is seen after trying the above solution

ganesh suthar • Sep 23 '22

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 |

still same error i am getting .

Babel.config.js

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

shridhar lingaraddi • Jan 19 '25 • Edited

Working but I see the below issue

Error: Could not parse CSS stylesheet
at exports.createStylesheet (/Users/shridhar/Downloads/genaipatientsummaryclient/node_modules/jsdom/lib/jsdom/living/helpers/stylesheets.js:34:21)
at HTMLStyleElementImpl._updateAStyleBlock (/Users/shridhar/Downloads/genaipatientsummaryclient/node_modules/jsdom/lib/jsdom/living/nodes/HTMLStyleElement-impl.js:68:5)

Any Solution for this?

ElhamB • Dec 29 '22

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

Óscar Silla • Apr 15 '23

Works for me, thanks!

Michael Carr • Apr 20 • Edited

moving the transformIgnorePatterns to the CLI command did it for me, it wouldnt work when it was in the jest config file.

GulamMdKhalid • Nov 11 '22

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

UTSAV0601 • Oct 3 '24

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