Jest encountered unexpected token with React app #6933
Comments
|
I have the same problem too. |
|
Same problem here. |
|
same problem here.. slightly more complicated as I'm working with a monorepo. |
|
@fabioSalimbeni @hoaiduyit @mikedloss I've made my React and React Native tests ( You need to use the new Babel configuration with This is my This is how my And this is the Jest configuration:
You'll also need to add some Babel plugins and the |
|
After 3 days, I just find out the solutions for this issue. Solution 1:You can change your file name from Solution 2:I'm using this way. Here's my And my I still have my Hope this can have you guys pass this issue. Cheer. |
|
@GeorgianSorinMaxim The problem is my jest app ignore |
|
thanks @GeorgianSorinMaxim @hoaiduyit in the end I've solved it simply by creating a custom transformer for babel-jest. No other changes where needed. |
|
Babel 7 seems to require |
|
|
|
|
|
@SimenB I renamed my |
|
@alexindigo Check this out on how to write |
|
Yeah, running |
|
@alexindigo @hoaiduyit How in the world did you all figure this out about the |
|
Jest & enzyme configuration : Add following code in package.json For setup of Enzyme => setup.js For setupTestFrameworkScriptFile : setupTests.js global.fetch = require('jest-fetch-mock') |
|
just .tsx files face same problem? |
|
just spreading the news, Jest v24 was updated to use Babel 7 internally, using |
|
I renamed I installed |
|
My |
|
I solved a similar problem by doing the following: 1- add enzyme setup file and write the following: 2- add jest configuration to your package.json like that: 3- add .babelrc file to your root path and write the following in it: 4- if you got an error on "expect" keyword in your test just run if you still get an error try to install babel dependencies like that hope this helps. |
My solution:I didn't have a .babelrc file so I figured doing the reverse should work too and created a .babelrc file using the preset info from babel.config.js instead. (I created an additional file, I didn't rename the original) |
Upgrading to Jest v24 fixed this issue for me :) |
Allegedly solvable by upgrading jest and babel jestjs/jest#6933
|
getting
my package.json babel.config.js |
|
Tested hoaiduyit solution. It work. I just need to add babel.config.js, install |
tks for your method~this method can fix my problem correctly! |
|
Hi - I have tried several things in this thread, but nothing seems to be working. The main error is weird b/c it seems to point at line numbers that do not make sense, almost like the source code and actual code trying to be run do not align.. This error, Jest encountered an unexpected token, remains. I am on Jest > 24, no type script, its an ejected react-create-app pretty recently (6 months ago~). Clearing cache and removing node_modules didn't help. Perhaps someone could explain exactly what config needs to be in place for jest to properly transform and run and what hints my exact error gives... |
|
Thank you all, Jenkins fails due to this issue, is there some working solutions ? |
|
For anyone using Create-React-App, adding I had issues with Jest picking up an internal library, Jest would display 'unexpected token' errors wherever I had my imports from this library. To solve this, you can change your test script to the below: |
|
Hi all, I was struggling to do unit testing with my small project which is called JetSet and wrote in React Native. I searched for 2 days to solve this issue, and I had tried to edit things like babel.config.js, delete that file and then create .babel file (and add some shits). Bug report: Test Suites: 1 failed, 1 total babel.config.js package.json |
|
FYI I think we ended up finding a really silly solution to this, like the entire build system wasn't behaving well if NODE_ENV="test" wasm't set. |
|
In the newer versions of React Jest is built in therefore in package.json the test script should be |
Thanks a lot, that solved the issue for me! |
|
After trying a LOT, the problem for me: "jest": "^24.9.0", |
|
try to update your jest and babel-jest |
this fixed my problem, I installed @babel/preset-env and added to babel.config.js and it fixed thanks @jmayergit |
|
I had changed the babel.rc file to babel.config.js file but it wasn't working for me. Then I saw this answer: https://stackoverflow.com/questions/58470062/test-jest-with-babel-plugin-import My babel.config.js file now looks like this which works: |
|
I am also struggling with this error from 5 days |
You could read document at: |
|
@catmans1 |
|
Now it is working, when I used babel-preset-jest for testing option with env and react. I have removed babel-jeast. |
|
Worked for me: include “@babel/preset-react” at https://medium.com/@audreyhal/how-to-solve-jest-error-with-create-react-app-part-1-80f33aa1661a |
|
I saw this error after making a stupid mistake and writing my first test file with |
Worked for me: |
|
In case anyone is facing this with React-Native, you can check out babel's transformIgnorePatterns. It says that since some modules are untranspiled, you will need to add them here. |
|
This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs. |
and others
🐛 Bug Report
When trying to run tests with Jest in a React app, I get a
Jest encountered an unexpected tokenerror. I copied theLinkcomponent and test directly from here. This is the error:FAIL src/components/Link.test.js ● Test suite failed to run Jest encountered an unexpected token This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript. By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules". Here's what you can do: • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config. • If you need a custom transformation specify a "transform" option in your config. • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option. You'll find more details and examples of these config options in the docs: https://jestjs.io/docs/en/configuration.html Details: SyntaxError: C:\workspace\react\testapp\src\components\Link.test.js: Unexpected token (8:4) 6 | test('Link changes the class when hovered', () => { 7 | const component = renderer.create( > 8 | <Link page="http://www.facebook.com">Facebook</Link>, | ^ 9 | ); 10 | let tree = component.toJSON(); 11 | expect(tree).toMatchSnapshot(); at Parser.raise (node_modules/@babel/parser/lib/index.js:3938:15) at Parser.unexpected (node_modules/@babel/parser/lib/index.js:5247:16) at Parser.parseExprAtom (node_modules/@babel/parser/lib/index.js:6327:20) at Parser.parseExprSubscripts (node_modules/@babel/parser/lib/index.js:5923:21) at Parser.parseMaybeUnary (node_modules/@babel/parser/lib/index.js:5902:21) at Parser.parseExprOps (node_modules/@babel/parser/lib/index.js:5811:21) at Parser.parseMaybeConditional (node_modules/@babel/parser/lib/index.js:5783:21) at Parser.parseMaybeAssign (node_modules/@babel/parser/lib/index.js:5730:21) at Parser.parseExprListItem (node_modules/@babel/parser/lib/index.js:6994:18) at Parser.parseCallExpressionArguments (node_modules/@babel/parser/lib/index.js:6123:22)Here's my
package.jsonHere's my
.babelrcfile (located in the root directory):{ "plugins": [ "@babel/plugin-proposal-class-properties", "babel-plugin-styled-components", "@babel/plugin-syntax-dynamic-import" ], "presets": ["@babel/preset-env", "@babel/preset-react"], "env": { "development": { "plugins": [ "@babel/plugin-proposal-class-properties", ["babel-plugin-styled-components", { "displayName": true }], "@babel/plugin-syntax-dynamic-import" ], "presets": ["@babel/preset-env", "@babel/preset-react"] }, "test": { "plugins": [ "@babel/plugin-proposal-class-properties", ["babel-plugin-styled-components", { "displayName": true }], "@babel/plugin-syntax-dynamic-import" ], "presets": ["@babel/preset-env", "@babel/preset-react"] }, "production": { "plugins": [ "@babel/plugin-proposal-class-properties", "babel-plugin-styled-components", "@babel/plugin-syntax-dynamic-import" ], "presets": ["@babel/preset-env", "@babel/preset-react"] } } }To Reproduce
Steps to reproduce the behavior:
yarn add --dev babel-jest babel-core@^7.0.0-0 @babel/coreyarn testExpected behavior
Run
npx envinfo --preset jestPaste the results here:
OS: Windows 10 CPU: x64 Intel(R) Xeon(R) CPU E3-1505M v6 @ 3.00GHz Binaries: Yarn: 1.5.1 - C:\Program Files (x86)\Yarn\bin\yarn.CMD npm: 5.6.0 - C:\Program Files\nodejs\npm.CMDThe text was updated successfully, but these errors were encountered: