Why Jest is throwing "Unexpected token ILLEGAL" when testing React component?

Question

I followed the Jest - React tutorial to test a React component.

Unfortunately, Jest throws:

SyntaxError: /Users/mishamoroshko/react-playground/src/search-panel/questions/__tests__/questions-test.js: /Users/mishamoroshko/react-playground/src/search-panel/questions/questions.js: Unexpected token ILLEGAL
at Contextify.sandbox.run (/Users/mishamoroshko/react-playground/node_modules/jest-cli/node_modules/jsdom/node_modules/contextify/lib/contextify.js:12:24)
at JSDomEnvironment.runSourceText (/Users/mishamoroshko/react-playground/node_modules/jest-cli/src/JSDomEnvironment.js:108:22)
at Object.runContentWithLocalBindings (/Users/mishamoroshko/react-playground/node_modules/jest-cli/src/lib/utils.js:341:23)

To reproduce:

git clone [email protected]:SEEK-Jobs/react-playground.git
cd react-playground
npm install
npm test

Any ideas?

UPDATE 1:

I wonder whether the problem is that Jest doesn't know about ES6, and I need to use 6to5-jest.

Is there a way to specify 2 preprocessors in package.json?

"jest": {
  "rootDir": "src",
  "scriptPreprocessor": "../preprocessor.js",
  "unmockedModulePathPatterns": [
    "../node_modules/react"
  ]
}

Check this answer for an explanation.

reergymerej
– reergymerej

2015-12-30 04:00:35 +00:00
Commented Dec 30, 2015 at 4:00 — reergymerej
– reergymerej, Commented Dec 30, 2015 at 4:00

Misha Moroshko · Accepted Answer · 2015-02-03 12:21:28Z

1

Indeed, adding 6to5-jest solved the problem.

Here is how I implemented multiple scriptPreprocessors in Jest:

// preprocessor.js

var ReactTools = require('react-tools');
var to5 = require('6to5-jest').process;

module.exports = {
  process: function(src, filename) {
    return ReactTools.transform(to5(src, filename));
  }
};

If you have a better way to implement this, please leave a comment.

answered Feb 3, 2015 at 12:21

Misha Moroshko

172k231 gold badges521 silver badges762 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Brigand Over a year ago

ReactTools.transform(src, {harmony: true}) would give you some of the simpler parts of ES6 (arrow functions, class, etc.). Also, 6to5 understands JSX and is run against react's jsx tests. Unless I'm missing something, ReactTools.transform is just a very expensive noop in your code.

Misha Moroshko Over a year ago

@FakeRainBrigand You are right! I removed ReactTools.transform and all works fine. Thanks a lot for your tip!

Collectives™ on Stack Overflow

Why Jest is throwing "Unexpected token ILLEGAL" when testing React component?

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related