Jest encountered an unexpected token: SyntaxError: Unexpected Token {

匿名 (未验证) 提交于 2019-12-03 01:39:01

问题:

Issue:

I am running my tests with Jest and Enzyme when I came across this error when I was running my code on a different machine.

When I run npm test which only runs jest --coverage --verbose it will get this error every time. However, this doesn't happen when I run it on my work lap top.

What I'm trying to figure out is why this is breaking over the "{" token when I run my testing script. I've seen some people suggest that using babel-jest would help, but I don't believe that is the cause of this issue, as it doesn't affect my work laptop. I've also read that babel-jest doesn't resolve this issue.

Any assitance would be greatly appreciated.


Here is the setUp file that it's referring to:

setUptests.js

import { configure } from 'enzyme'; // eslint-disable-line import/no-extraneous-dependencies  import Adapter from 'enzyme-adapter-react-16'; // eslint-disable-line import/no-extraneous-dependencies  configure({ adapter: new Adapter() }); 

My webpack.config.js:

const path = require('path');  module.exports = {   entry: {     base: path.resolve(__dirname, './app/app.jsx'),     redux: path.resolve(__dirname, './app/reduxApp.jsx'),   },   output: {     path: path.resolve(__dirname, './public'),     filename: '[name].bundle.js',   },   module: {     rules: [       {         test: /\.jsx?$/,         exclude: /node_modules/,         loader: 'babel-loader',         query: {           presets: ['env', 'react', 'stage-2'],         },       },     ],   },   resolve: {     extensions: ['.js', '.jsx'],   }, }; 

My package.json has the configurations for my jest here:

"jest": {     "testURL": "http://localhost/",     "setupTestFrameworkScriptFile": "./setUpTests.js",     "testEnvironment": "node",     "unmockedModulePathPatterns": [       "node_modules/react/",       "node_modules/enzyme/"     ],     "coverageThreshold": {       "global": {         "statements": 98,         "branches": 91,         "functions": 98,         "lines": 98       }     }   } 

and here are the list of dependencies that I'm using:

  "dependencies": {     "express": "^4.16.3",     "prop-types": "^15.6.2",     "react": "^16.4.2",     "react-dom": "^16.4.2",     "react-redux": "^5.0.7",     "redux": "^4.0.0"   },   "devDependencies": {     "babel": "^6.23.0",     "babel-cli": "^6.26.0",     "babel-core": "^6.26.3",     "babel-loader": "^7.1.5",     "babel-preset-env": "^1.7.0",     "babel-preset-react": "^6.24.1",     "babel-preset-stage-2": "^6.24.1",     "enzyme": "^3.4.1",     "enzyme-adapter-react-16": "^1.2.0",     "eslint": "^4.19.1",     "eslint-config-airbnb": "^17.0.0",     "eslint-plugin-import": "^2.13.0",     "eslint-plugin-jsx-a11y": "^6.1.1",     "eslint-plugin-react": "^7.10.0",     "jest": "^23.4.2",     "jsdom": "^11.12.0",     "nodemon": "^1.18.3",     "react-test-renderer": "^16.4.2",     "webpack": "^4.16.5",     "webpack-cli": "^3.1.0"   } 

UPDATE:

Attempted to switch the code from: import { configure } from 'enzyme'; to: import Enzyme from 'enzyme';

I'm assuming its an import issue at the moment. Will continue to research to see what will fix this.

回答1:

Try it like this:

import Enzyme from 'enzyme'; import Adapter from 'enzyme-adapter-react-16';  Enzyme.configure({ adapter: new Adapter() }); 


回答2:

I had the same problem, it is being answered in similar questions. The way I got around it was to install two class babel plugins:

npm install --save babel-plugin-transform-class-properties npm install --save babel-plugin-syntax-class-properties 

and include them in your .babelrc file:

"plugins": [   "transform-class-properties",   "syntax-class-properties"  ] 

After restarting the tests, the error should be gone :) Good luck!



回答3:

Try to add the following plugin to your .babelrc config file in order to fix the import Enzyme error:

"plugins": ["transform-es2015-modules-commonjs"]



标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!