Jest(react testing tool) error - Parse Error: Line 1: Illegal import declaration

Question

I'm now using node.js(0.10.x) version, jest(0.4.x) version to test react.js.

Before I decided to test my react components, I have used node.js 0.12.x version. Change through nvm to 0.10.x.

I rebuilded the all the modules and restarted the test.

The error is below.

Using Jest CLI v0.4.17
 PASS  __tests__/unit/app.test.js (0.058s)
 PASS  __tests__/unit/preprocessor.js (0.68s)
 FAIL  __tests__/unit/mypage.test.js
Error: /Users/nuko/WebstormProjects/pliky/__tests__/unit/mypage.test.js: /Users/nuko/WebstormProjects/pliky/__tests__/unit/preprocessor.js: Parse Error: Line 1: Illegal import declaration
  at throwError (/Users/nuko/WebstormProjects/pliky/node_modules/react-tools/node_modules/jstransform/node_modules/esprima-fb/esprima.js:2813:21)
  at throwErrorTolerant (/Users/nuko/WebstormProjects/pliky/node_modules/react-tools/node_modules/jstransform/node_modules/esprima-fb/esprima.js:2825:24)
  at parseSourceElement (/Users/nuko/WebstormProjects/pliky/node_modules/react-tools/node_modules/jstransform/node_modules/esprima-fb/esprima.js:6390:17)
  at parseProgramElement (/Users/nuko/WebstormProjects/pliky/node_modules/react-tools/node_modules/jstransform/node_modules/esprima-fb/esprima.js:6446:16)
  at parseProgramElements (/Users/nuko/WebstormProjects/pliky/node_modules/react-tools/node_modules/jstransform/node_modules/esprima-fb/esprima.js:6478:29)
  at parseProgram (/Users/nuko/WebstormProjects/pliky/node_modules/react-tools/node_modules/jstransform/node_modules/esprima-fb/esprima.js:6491:16)
  at Object.parse (/Users/nuko/WebstormProjects/pliky/node_modules/react-tools/node_modules/jstransform/node_modules/esprima-fb/esprima.js:7653:23)
  at getAstForSource (/Users/nuko/WebstormProjects/pliky/node_modules/react-tools/node_modules/jstransform/src/jstransform.js:251:21)
  at transform (/Users/nuko/WebstormProjects/pliky/node_modules/react-tools/node_modules/jstransform/src/jstransform.js:274:11)
  at innerTransform (/Users/nuko/WebstormProjects/pliky/node_modules/react-tools/main.js:94:10)
  at Object.module.exports.transform (/Users/nuko/WebstormProjects/pliky/node_modules/react-tools/main.js:20:18)
  at Object.module.exports.process (/Users/nuko/WebstormProjects/pliky/__tests__/unit/preprocessor.js:5:27)
  at Object.readAndPreprocessFileContent (/Users/nuko/WebstormProjects/pliky/node_modules/jest-cli/src/lib/utils.js:432:33)
  at Loader._execModule (/Users/nuko/WebstormProjects/pliky/node_modules/jest-cli/src/HasteModuleLoader/HasteModuleLoader.js:209:11)
  at Loader.requireModule (/Users/nuko/WebstormProjects/pliky/node_modules/jest-cli/src/HasteModuleLoader/HasteModuleLoader.js:914:12)
  at Loader.requireModuleOrMock (/Users/nuko/WebstormProjects/pliky/node_modules/jest-cli/src/HasteModuleLoader/HasteModuleLoader.js:935:17)
  at /Users/nuko/WebstormProjects/pliky/__tests__/unit/mypage.test.js:4:14
  at Object.runContentWithLocalBindings (/Users/nuko/WebstormProjects/pliky/node_modules/jest-cli/src/lib/utils.js:485:17)
  at Loader._execModule (/Users/nuko/WebstormProjects/pliky/node_modules/jest-cli/src/HasteModuleLoader/HasteModuleLoader.js:245:9)
  at Loader.requireModule (/Users/nuko/WebstormProjects/pliky/node_modules/jest-cli/src/HasteModuleLoader/HasteModuleLoader.js:914:12)
  at jasmineTestRunner (/Users/nuko/WebstormProjects/pliky/node_modules/jest-cli/src/jasmineTestRunner/jasmineTestRunner.js:292:16)
  at /Users/nuko/WebstormProjects/pliky/node_modules/jest-cli/src/TestRunner.js:376:12
  at tryCatcher (/Users/nuko/WebstormProjects/pliky/node_modules/jest-cli/node_modules/bluebird/js/main/util.js:26:23)
  at Promise._settlePromiseFromHandler (/Users/nuko/WebstormProjects/pliky/node_modules/jest-cli/node_modules/bluebird/js/main/promise.js:503:31)
  at Promise._settlePromiseAt (/Users/nuko/WebstormProjects/pliky/node_modules/jest-cli/node_modules/bluebird/js/main/promise.js:577:18)
  at Promise._settlePromises (/Users/nuko/WebstormProjects/pliky/node_modules/jest-cli/node_modules/bluebird/js/main/promise.js:693:14)
  at Async._drainQueue (/Users/nuko/WebstormProjects/pliky/node_modules/jest-cli/node_modules/bluebird/js/main/async.js:123:16)
  at Async._drainQueues (/Users/nuko/WebstormProjects/pliky/node_modules/jest-cli/node_modules/bluebird/js/main/async.js:133:10)
  at Async.drainQueues (/Users/nuko/WebstormProjects/pliky/node_modules/jest-cli/node_modules/bluebird/js/main/async.js:15:14)
  at process._tickCallback (node.js:448:13)

1 test failed, 2 tests passed (3 total)
Run time: 2.189s
npm ERR! Test failed.  See above for more details.
npm ERR! not ok code 0

My preprocessor.js code.(same as the official document script)

    var ReactTools = require('react-tools');

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

My mypage.test.js code.

jest.dontMock('../../React/mypage.js');

var React = require('react/addons'),
    Mypage = require('../../React/mypage.js'),
    TestUtils = React.addons.TestUtils;

describe('mypage', function() {

    var MypageElement = TestUtils.renderIntoDocument(<Mypage />);

    var list = TestUtils.scryRenderedDOMComponentsWithTag(MypageElement, 'option');


    it('has 3 default items', function() {
        expect(list.props.children.length).toEqual(5);
    });
});

And I added this part to package.json file.

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

Where is this error come from and how can I fix this? Please let me know. Thank you.

Answer 1

Presumably your mypage.js component has as its first line something like import React from 'react' or something similar. That is ES6 syntax and by default ReactTools is only compatible with ES5 code, the equivalent being var React = require('react').

To fix this enable harmony mode during your transform.

var ReactTools = require('react-tools');

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

JSTransform documentation here