CODEWITHSUNDEEP
javascriptunit-testingjestjsbabeljsenzyme
Phoenix Yu
Phoenix Yu

Reputation: 61

Jest Enzyme test throws unexpected token error

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);
  });
});

Upvotes: 2

Views: 1257

Answers (1)

Brian Adams
Brian Adams

Reputation: 45810

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.

Upvotes: 2

Related Questions