Jest遇到意外的令牌:SyntaxError:意外的令牌{

时间:2018-08-15 22:15:28

标签: javascript reactjs jestjs enzyme

问题:

当我在另一台计算机上运行代码时遇到此错误时,我正在用Jest和酶进行测试。

当我运行仅运行npm test的{​​{1}}时,每次都会出现此错误。但是,当我在笔记本电脑上运行它时,不会发生这种情况。

Jest Error

我要弄清楚的是为什么我在运行测试脚本时会打破“ {”令牌。我见过有人建议使用babel-jest会有所帮助,但我不认为这是造成此问题的原因,因为它不会影响我的笔记本电脑。我还读到babel-jest无法解决此问题。

我们将不胜感激。


这是它所指的设置文件:

setUptests.js

jest --coverage --verbose

我的 webpack.config.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() });

我的 package.json 具有配置以供我在这里玩笑:

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'],
  },
};

这是我使用的依赖项列表:

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

更新:

试图从以下位置切换代码: "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" } 至: import { configure } from 'enzyme';

我现在假设是进口问题。将会继续研究以找出解决问题的方法。

Removed destructuring and declared with Enzyme

3 个答案:

答案 0 :(得分:0)

像这样尝试:

import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

Enzyme.configure({ adapter: new Adapter() });

答案 1 :(得分:0)

我有同样的问题,正在以类似的问题回答。我解决的方法是安装两个class babel插件:

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

并将它们包含在您的 .babelrc 文件中:

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

重新启动测试后,错误应该消失了:)祝您好运!

答案 2 :(得分:0)

尝试将以下插件添加到您的.babelrc配置文件中,以修复import Enzyme错误:

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