in jest test enzyme.shallow throws Unexpected token < error

Question

I am currently setting up unit tests with usage of following stack:

• react (v15) components are written with typescript (.tsx)
• test setup is done with jest(v21) and enzyme(v3)
• test files are written as plain js-files

Unfortunately something seems to go wrong with enzyme as I keep getting an error:

 wrapper = enzyme.shallow(<Stepper>bla</Stepper>)
                             ^

SyntaxError: Unexpected token <

  at new Script (vm.js:51:7)
      at Generator.next (<anonymous>)
      at new Promise (<anonymous>)

Test Suites: 1 failed, 1 total

The respective test file looks like this:

var React = require('react');
var enzyme = require('enzyme');
var Stepper = require('./Stepper').default;

var wrapper;

describe('Stepper', () => {
  beforeEach(() => {
    wrapper = enzyme.shallow(<Stepper>bla</Stepper>)
  });

  test('has bla', () => {
    expect(wrapper.contains('bla')).toBeTruthy();
  });
});

I configured jest as followed in my package.json:

"jest": {
  "transform": {
    "^.+\\.(tsx|ts)$": "typescript-babel-jest"
  },
  "moduleFileExtensions": [
    "ts",
    "tsx",
    "js"
  ],
  "testMatch": [
    "<rootDir>/src/**/**/*.test.js"
  ],
  "moduleNameMapper": {
    "\\.(css|scss)$": "identity-obj-proxy"
  },
  "setupTestFrameworkScriptFile": "<rootDir>/setupTests.js"
}

And my setupTests.js file looks like this:

var enzyme = require('enzyme');
var Adapter = require('enzyme-adapter-react-15');

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

I am running out of ideas what could be causing the issue, does anyone know a solution to this?

Waterside

The error is not specifically caused by enzyme. It's because the jsx <Stepper>bla</Stepper> is not correctly interpreted as if React was not correctly imported into this scope. Is there a certain reason you are using requirejs instead of es6 modules? – Repetition

How should react be imported correctly then? If I am not using es5 syntax I am getting tones of syntax errors such as for 'import' – Waterside

Btw if I am putting e.g. <div></div> instead of <Stepper></Stepper> I am still getting the same error. Also I am getting the same error no matter if I use enzyme's 'enzyme.shallow' or jest's 'renderer.create' – Waterside

yeah because <div></div> is also jsx and you can only write jsx if React was correctly imported. I guess the reason is, that babel needs to run on your test file which has a .js ending, but you are only transforming .tsx and .ts. Try to add .js to your jest transforms in your package.json. I can only strongly recommend you to make yourself familiar with webpack + babel and es6 as it makes your life much easier writing code. – Repetition

@trinx but how is it correctly imported? How is var React = require('react); not sufficient? Or do I need to import it at another place, too? – Waterside

Answer 1

You need your test file to be transpiled by babel because it contains jsx. Using jsx requires to have React imported and the file to be transpiled by babel.

At the moment you do only transpile files ending with .tsx or .ts as definded in your package.json. Add .js as your test file ends on .js:

  "transform": {
    "^.+\\.(tsx|ts|js)$": "typescript-babel-jest"
  },

Alternatively write your test file in typescript and use .tsx as the file ending.

Repetition

@Waterside your welcome. Btw: you should also be able to use es6 syntax inside your tests if you transpile them. – Repetition

Answer 2

First install ts-jest then use this command

npx ts-jest config:init

This work for me.

Aggrandize