Jest 遇到意外令牌:SyntaxError: Unexpected Token {

IT技术 javascript reactjs jestjs enzyme
2021-05-03 16:41:27

问题:

当我在另一台机器上运行我的代码时遇到这个错误时,我正在使用 Jest 和 Enzyme 运行我的测试。

当我运行npm testwhich only running 时jest --coverage --verbose,每次都会出现此错误。但是,当我在工作笔记本电脑上运行它时不会发生这种情况。

玩笑错误

我想弄清楚的是为什么当我运行我的测试脚本时会打破“{”标记。我看到有人建议使用 babel-jest 会有所帮助,但我不认为这是导致此问题的原因,因为它不会影响我的工作笔记本电脑。我也读过 babel-jest 不能解决这个问题。

任何帮助将不胜感激。


这是它所指的设置文件:

设置测试.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() });

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

我的package.json我玩笑配置

"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'; 到: import Enzyme from 'enzyme';

我现在假设它是一个进口问题。将继续研究,看看有什么可以解决这个问题。

删除解构并使用酶声明

3个回答

我遇到了同样的问题,在类似的问题中得到了回答。我绕过它的方法是安装两个类 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"
 ]

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

像这样尝试:

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

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

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

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