2

When I run the code below I get a repeated error trying to use enzyme with jest on the first JSX component <. So far, I haven't been able to find anything on this occurring with React and not React-Native. So I have followed many tutorials I have found, listened to all the advice, but to no avail.
What could the problem be? Sorry for so much code, but it is all needed for context.

Dependencies:

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

Test: 

{
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',
  },
});
Stephen P
  • 14,422
  • 2
  • 43
  • 67
ET13
  • 21
  • 2
  • Does this answer your question? [Jest tests on React components: Unexpected token "<"](https://stackoverflow.com/questions/56952728/jest-tests-on-react-components-unexpected-token) – Dan O Feb 08 '20 at 00:29
  • Do you have a babel configuration file? – izambl Feb 08 '20 at 03:39

1 Answers1

0

I ended up figuring out what the issue was. We didn't have our babel setup in a way that Enzyme would use it. This can be done through a .babelrc file which in hindsight is probably better to use. At present I resolved it by adding configuration for babel into the package.json. I'm sure there's a better way to do this, probably with a .babelrc since Enzyme looks for that by default from what I could find.

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

ET13
  • 21
  • 2