Jest Enzyme test throws unexpected token error

Question

When I run the test, it thorws "unexpected token error at the code:

const wrapper = shallow(<WelcomeMessage/>");

The error is thrown at "(<". I have looked at a number of answers from stackoverflow and github but somehow I still cannot get it to work.

I have written jest tests. This is my first time writing a test case using enzyme and react. So I am not familar with the setup. I have installed: babel jest, react-dom, babel-plugin-transform-export-extensions, enzyme-adapter-react-16, react-test-renderer, @babel/preset-env, and @babel/core

package.json:

{
  "private": true,
  "version": "0.0.0",
  "name": "example-jquery",
  "devDependencies": {
    "@babel/core": "*",
    "@babel/preset-env": "^7.4.4",
    "babel-jest": "^24.8.0",
    "babel-plugin-transform-export-extensions": "^6.22.0",
    "enzyme": "^3.9.0",
    "enzyme-adapter-react-16": "^1.12.1",
    "jest": "^24.8.0",
    "jest-dom": "^3.1.4",
    "jest-useragent-mock": "0.0.3"
  },
  "dependencies": {
    "jest-puppeteer": "^4.1.1",
    "jquery": "^3.4.1",
    "jsdom": "^15.0.0",
    "puppeteer": "^1.15.0",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-test-renderer": "^16.8.6"
  },
  "scripts": {
    "test": "jest --verbose"
  },
  "jest": {
    "transform": {
      "^.+\\.jsx?$": "babel-jest"
    }
  }
}

jest.config.js:

module.exports = {
  preset: 'jest-puppeteer',
  "bail": 0,
  setupFiles: ['<rootDir>/enzyme.config.js'],
  moduleFileExtensions: ['js', 'json', 'jsx'],
  transformIgnorePatterns: ['<rootDir>/node_modules/']
}

enzyme.config.js:

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

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

.babelrc:

{
  "presets": ["@babel/preset-env"],
  "plugins": ["transform-export-extensions"],
  "only": [
        "./**/*.js",
        "node_modules/jest-runtime"
      ]
}

WelcomeMessage.test.js:

import React from 'react';
import { shallow } from 'enzyme';

// Components
import WelcomeMessage from './WelcomeMessage';

function setup() {
  const props = {
    imgPath: 'some/image/path/to/a/mock/image',
  };
  const wrapper = shallow(<WelcomeMessage />);
  return { wrapper, props };
}

describe('WelcomeMessage Test Suite', () => {
  it('Should have an image', () => {
    const { wrapper } = setup();
    expect(wrapper.find('img').exists()).toBe(true);
  });
});

checkout this link - github.com/facebook/jest/issues/6933 I am no pro at it, but it looks like this link contains solution to your issue. — Anuradha Kumari

Brian Adams Brian Adams · Accepted Answer · 2019-05-09T01:26:11

This line:

<WelcomeMessage />

is JSX which "just provides syntactic sugar for the React.createElement function".

Since JSX isn't actually valid JavaScript code it must be compiled into React.createElement calls.

This is done by the Babel plugin @babel/plugin-transform-react-jsx which is included as part of @babel/preset-react.

Add @babel/preset-react to your Babel config and that should resolve the issue.

Jest Enzyme test throws unexpected token error

1 Answers