Jest encountered an unexpected token: SyntaxError: Unexpected Token {

问题

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

来源：https://stackoverflow.com/questions/51867183/jest-encountered-an-unexpected-token-syntaxerror-unexpected-token