Issue with Jest and renderIntoDocument

[davisboy]

Hi there, I've run into an odd issue with the unit tests. For the most part they work, but the renderIntoDocument seems to choke.

Here's the code for the test:

jest.dontMock('../Header.react');

describe('Header component', function () {

it('renders provided header text', function () {
    var React = require('react');
    var ReactDOM = require('react-dom');
    var TestUtils = require('react-addons-test-utils');
    var Header = require('../Header.react');


    var header = TestUtils.renderIntoDocument(
        <Header text="Testing..." />
    );

    var actualHeaderText = ReactDOM.findDOMNode(header).textContent;

    expect(actualHeaderText).toBe("Testing...");

    var defaultHeader = TestUtils.renderIntoDocument(
        <Header />
    );

    var actualDefaultHeaderText = ReactDOM.findDOMNode(defaultHeader).textContent;

    expect(actualDefaultHeaderText).toBe("Default header");
    expect(actualDefaultHeaderText).not.toBe(actualHeaderText);

});

});

Here are the relevant lines from the dev dependencies in package,json:

"jest-cli": "^0.7.1",
"react-addons-test-utils": "^0.14.2",

Most of the other test succeed but this one (and the button tests) throw a syntax error. Unexpected token <. I assume is choking on the JSX. Have you seen this before?

[zpenka]

Having a similar problem. I made sure I'm on node v0.10.40 and using all the same devDep versions as the example app

[rubenve]

Same problem here:

Using Jest CLI v0.7.1
FAIL source/components/tests/Header-test.js
● Runtime Error
SyntaxError: /Users/ruben/Documents/Work/ReactEssentials/snapterest/source/components/tests/Header-test.js: Unexpected token (13:12)
11 |
12 | var header = TestUtils.renderIntoDocument(>
13 |

| ^
14 | );
15 |
16 | var actualHeaderText = ReactDOM.findDOMNode(header).textContent;

[rubenve]

It turns out to be caused by a problem with the newer version (>6) of babel-jest. I fixed it by going back to an earlier version:

"babel-jest": "^5.3.0",

[adasfan]

thanks. downgrading babel-jest also worked for me, but it is bad that we have to downgrade. This issue with babel-jest seems relevant...Anybody has anything new?

[adam-cowley]

After a bit of digging on this one, I came across the following steps to get these tests working with the latest version of babel-jest. Turns out jest needs a little more configuration...

Firstly, I'm requiring the following devDependencies:

  "devDependencies": {
    "babel-jest": "^6.0.1",
    "babel-preset-react": "^6.3.13",
    "babelify": "^7.2.0",
    "browserify": "^12.0.1",
    "gulp": "^3.9.0",
    "jest-cli": "^0.8.2",
    "react-addons-test-utils": "^0.14.5",
    "vinyl-source-stream": "^1.1.0"
  },

Create a new .babelrc file in the root directory and add the react preset (or you can define this the babel key of package.json).

{
  "presets": [
     "react"
  ]
}

https://babeljs.io/docs/plugins/preset-react/

Then add the following to unmockedModulePathPatterns to jest configuration to stop jest mocking other React modules and remove the cannot call method on undefined error.

  "jest": {
    "scriptPreprocessor": "<rootDir>/node_modules/babel-jest",
    "testFileExtensions": [
      "es6",
      "js"
    ],
    "unmockedModulePathPatterns": [
      "<rootDir>/node_modules/react",
      "<rootDir>/node_modules/react-dom",
      "<rootDir>/node_modules/react-addons-test-utils",
      "<rootDir>/node_modules/fbjs"
    ]
  }

Now run npm test and everything should run smoothly...

jestjs/jest#554
https://github.com/babel/babel-jest/issues/49

[pranthiks]

Thanks @adam-cowley that did it for me.

[ioan-ghisoi-cko]

as @rubenve mentioned, while in /snapterest folder do:
sudo npm install --save-dev jest-cli [email protected]

then you can do npm test and all should work fine.