玩笑遇到意外的令牌导入{配置}从'酶'

Question

I am trying to test my application using Jest and Enzyme. I keep receiving the following error whenever I run 'yarn test':

Jest encountered an unexpected token

 This usually means that you are trying to import a file which Jest cannot parse, eg 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 (eg 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: /path/untitled/om/dist/__test__/setup/enzyme.js:1 ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import { configure } from 'enzyme'; ^^^^^^ SyntaxError: Unexpected token import 

I don't have a separated .babelrc but I believe that what I have in webpack should be enough. Also I tried to google it but I didn't manage to find any

webpack.config.js

const path = require("path");
const webpack = require("webpack");

const HtmlWebpackPlugin = require("html-webpack-plugin");
const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
  template: "./src/index.html",
  filename: "index.html",
  inject: "body"
});

module.exports = {
  devtool: "eval",
  entry: ["@babel/polyfill", "./src/index.js"],
  output: {
    path: path.resolve("dist"),
    filename: "bundle.js",
    publicPath: "/"
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env", "@babel/react"],
            plugins: ["@babel/plugin-proposal-class-properties", "transform-export-extensions"]
          }
        }
      },
        {
            test: /\.svg$/,
            loader: 'svg-inline-loader'
        },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: ["eslint-loader"]
      },
        {
            test: /^.*\.(css|scss)$/,
            use: [
                'style-loader',
                'css-loader?importLoaders=1&modules&localIdentName=[path]___[name]__[local]___[hash:base64:5]',
                'sass-loader'
            ],
        }
    ]
  },
  plugins: [HtmlWebpackPluginConfig]
};

package.json

{
  "name": "frontend",
  "jest": {
    "setupTestFrameworkScriptFile": "<rootDir>/__test__/setup/enzyme.js",
    "testPathIgnorePatterns": [
      "<rootDir>/node_modules"
    ],
    "transform": {
      "^.+\\.js$": "babel-jest"
    },
    "snapshotSerializers": [
      "enzyme-to-json/serializer"
    ],
    "testMatch": [
      "<rootDir>/src/**/*.test.js"
    ],
    "transformIgnorePatterns": [
      "!node_modules/react-runtime"
    ]
  },
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "format:all": "prettier --write \"src/**/*.js\"",
    "start": "webpack-dev-server --mode=development",
    "eslint": "eslint --ext .js ./src",
    "test": "jest"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.0.0-rc.1",
    "@babel/plugin-proposal-class-properties": "^7.1.0",
    "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
    "@babel/preset-env": "^7.0.0-rc.1",
    "axios": "^0.18.0",
    "babel-eslint": "^10.0.1",
    "babel-jest": "^23.6.0",
    "babel-loader": "^8.0.0-beta.4",
    "babel-polyfill": "^6.26.0",
    "enzyme": "^3.7.0",
    "enzyme-adapter-react-16": "^1.6.0",
    "enzyme-to-json": "^3.3.4",
    "eslint": "^5.7.0",
    "eslint-loader": "^2.1.1",
    "eslint-plugin-react": "^7.11.1",
    "html-webpack-plugin": "^3.2.0",
    "jest": "^23.6.0",
    "lodash.get": "^4.4.2",
    "node-sass": "^4.9.4",
    "postcss-loader": "^3.0.0",
    "prettier": "^1.14.3",
    "react-icons": "^3.2.2",
    "webpack": "^4.16.5",
    "webpack-cli": "^3.1.0",
    "webpack-dev-server": "3.1.4"
  },
  "dependencies": {
    "@babel/polyfill": "^7.0.0",
    "@babel/preset-react": "^7.0.0",
    "@types/react": "^16.4.18",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^1.0.0",
    "prop-types": "^15.6.2",
    "react": "^16.4.2",
    "react-dom": "^16.5.2",
    "react-redux": "^5.0.7",
    "redux": "^4.0.0",
    "redux-form": "^7.4.2",
    "redux-saga": "^0.16.2",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1"
  }
}

My enzyme setUp was taken from Enzyme docs

import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

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

Answer 1

Try this:

const Enzyme = require('enzyme');
const Adapter = require('enzyme-adapter-react-16');

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