JSX导致Jest和Enzyme错误

Question

当我运行下面的代码时，在第一个JSX组件<上尝试使用jest和酶时，我得到了一个重复的错误。到目前为止，我还没有找到任何与React和not React-Native一起发生的事情。所以我遵循了我找到的许多教程，听取了所有的建议，但都没有用。

问题会是什么呢？很抱歉有这么多代码，但它们都是上下文所需的。

依赖关系：

    "dependencies": {
    "@babel/core": "^7.8.3",
    "@babel/plugin-proposal-class-properties": "^7.8.3",
    "@babel/preset-env": "^7.8.3",
    "@babel/preset-react": "^7.8.3",
    "autoprefixer": "^9.7.4",
    "babel-jest": "^25.1.0",
    "babel-loader": "^8.0.6",
    "css-loader": "^3.4.2",
    "enzyme": "^3.11.0",
    "enzyme-adapter-react-16": "^1.15.2",
    "eslint": "^6.8.0",
    "eslint-config-jest-enzyme": "^7.1.2",
    "eslint-plugin-jest": "^23.7.0",
    "jest": "^25.1.0",
    "mini-css-extract-plugin": "^0.9.0",
    "moment": "^2.24.0",
    "postcss-loader": "^3.0.0",
    "postcss-nested": "^4.2.1",
    "puppeteer": "^2.1.1",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-highlighter": "^0.4.3",
    "react-redux": "^7.1.3",
    "react-router-dom": "^5.1.2",
    "react-test-renderer": "^16.12.0",
    "redux": "^4.0.5",
    "style-loader": "^1.1.3",
    "tailwindcss": "^1.1.4",
    "webpack": "^4.41.5",
    "webpack-cli": "^3.3.10"
  },
  "devDependencies": {
    "babel-eslint": "^10.0.3",
    "eslint": "^6.1.0",
    "eslint-config-airbnb": "^18.0.1",
    "eslint-loader": "^3.0.3",
    "eslint-plugin-import": "^2.20.0",
    "eslint-plugin-jsx-a11y": "^6.2.3",
    "eslint-plugin-react": "^7.18.0",
    "eslint-plugin-react-hooks": "^1.7.0",
    "webpack-dev-server": "^3.10.1",
    "write-file-webpack-plugin": "^4.5.1"
  }

测试：

{
import React from 'react';
import Enzyme, { shallow, mount } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import Button from '../src/components/utility/Button';

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

describe('<Button /> Testing', () => {
  it('renders Button without crashing', () => shallow(<Button />));
});
}

webpack.config.js：

const path = require('path');
const { HotModuleReplacementPlugin } = require('webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const WriteFilePlugin = require('write-file-webpack-plugin');

module.exports = (env, argv) => ({
  entry: ['@babel/polyfill', path.join(__dirname, 'src', 'index.js')],
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].bundle.css',
      chunkFilename: '[id].css',
    }),
    new WriteFilePlugin({
      // Write only files that have ".css" extension.
      test: /\.css$/,
      useHashIndex: true,
    }),
    new HotModuleReplacementPlugin(),
  ],
  devServer: {
    open: true,
    clientLogLevel: 'silent',
    contentBase: './dist',
    historyApiFallback: true,
    hot: true,
  },
  module: {
    rules: [
      {
        test: /\.(jsx|js)$/,
        include: path.resolve(__dirname, 'src'),
        exclude: /node_modules/,
        use: [{
          loader: 'babel-loader',
          options: {
            presets: [
              ['@babel/preset-env', {
                targets: {
                  node: '10',
                },
              }],
              '@babel/preset-react',
            ],
            plugins: ['@babel/plugin-proposal-class-properties'],
          },
        }, {
          loader: 'eslint-loader',
          options: {
            fix: true,
          },
        }],
      },
      {
        test: /\.css$/i,
        include: path.resolve(__dirname, 'src'),
        exclude: /node_modules/,
        use: [
          'style-loader',
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              hmr: argv.mode === 'development',
            },
          },
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1,
            },
          },
          'postcss-loader',
        ],
      },
    ],
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
});

Answer 1

我最终弄清楚了问题出在哪里。我们的巴别塔设置没有酶使用它的方式。这可以通过一个.babelrc文件来完成，在事后看来，使用这个文件可能更好。目前，我通过在package.json中添加babel的配置来解决这个问题。我相信有更好的方法可以做到这一点，可能是使用.babelrc，因为默认情况下，酶会从我能找到的东西中查找它。

"babel": { "presets": [ "@babel/preset-env", "@babel/preset-react" ], "plugins": [ "@babel/plugin-proposal-class-properties", "@babel/plugin-transform-runtime" ] },