CODEWITHSUNDEEP
javascriptreactjstypescriptenzymejestjs
SeBe
SeBe

Reputation: 1036

in jest test enzyme.shallow throws Unexpected token < error

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

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?

Upvotes: 1

Views: 4041

Answers (2)

sajadab
sajadab

Reputation: 453

First install ts-jest then use this command

npx ts-jest config:init

This work for me.

Upvotes: 0

trixn
trixn

Reputation: 16354

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.

Upvotes: 1

Related Questions