JSX вызывает ошибки с Jest и Enzyme - PullRequest
Новая
       4

JSX вызывает ошибки с Jest и Enzyme

2 голосов
/ 08 февраля 2020

Когда я запускаю приведенный ниже код, я получаю повторяющуюся ошибку, пытаясь использовать фермент с шуткой на первом компоненте JSX <. До сих пор я не смог ничего найти по этому поводу с помощью React, а не 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',
  },
});

1 Ответ

0 голосов
/ 11 февраля 2020

Я понял, в чем проблема. У нас не было настройки для бабла таким образом, чтобы Энзим использовал ее. Это можно сделать с помощью файла .babelr c, который в ретроспективе, вероятно, лучше использовать. В настоящее время я решил это, добавив конфигурацию для babel в пакет. json. Я уверен, что есть лучший способ сделать это, вероятно, с помощью .babelr c, так как Enzyme ищет это по умолчанию из того, что я мог найти.

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

...