Jest: Jest throwing error: TypeError: Cannot read property 'object' of undefined

[hawflau]

Hi, I was basically learning how to use react by following https://github.com/RisingStack/react-way-getting-started. When I run Jest, I get the following:

Using Jest CLI v0.8.2, jasmine1
 FAIL  src/app/components/__tests__/Item.spec.js
● Runtime Error
TypeError: Cannot read property 'object' of undefined

This is my package.json:

{
  "name": "learn-react",
  "version": "1.0.0",
  "private": true,
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "jest",
    "start": "node src/server/index.js",
    "postinstall": "webpack --config config/webpack.js",
    "webpack": "webpack --config config/webpack.js",
    "webpack-watch": "webpack --config config/webpack.js --watch --colors"
  },
  "devDependencies": {
    "babel-core": "^6.4.0",
    "babel-jest": "^6.0.1",
    "babel-loader": "^6.2.1",
    "babel-preset-es2015": "^6.3.13",
    "babel-preset-react": "^6.3.13",
    "jest-cli": "^0.8.2",
    "react-addons-test-utils": "^0.14.6",
    "webpack": "^1.12.10"
  },
  "dependencies": {
    "debug": "^2.2.0",
    "express": "^4.13.3",
    "react": "^0.14.6",
    "react-dom": "^0.14.6"
  },
  "jest": {
    "scriptPreprocessor": "<rootDir>/node_modules/babel-jest",
    "unmockedModulePathPatterns": [
      "<rootDir>/node_modules/react",
      "<rootDir>/node_modules/react-dom",
      "<rootDir>/node_modules/fbjs",
      "<rootDir>/node_modules/react-addons-test-utils"
    ]
  }
}

This is my test script:

jest.dontMock('../Item');

import React from 'react';
import ReactTestUtils from 'react-addons-test-utils';

const Item = require('../Item');

var itemProp = {
  title: 'Item 1',
  price: 12
};

describe('Item', () => {

  it('renders properly', () => {
    var item = ReactTestUtils.renderIntoDocument(
      <Item item={itemProp} />
    );

    var li = ReactTestUtils.findRenderedDOMComponentWithTag(item, 'li');

    expect(li.getDOMNode().textContent).toEqual('Item 1 - $12');
  });
});

And Item.js:

import React from 'react';

/**
 * @class Item
 * @extends React.Component
 */
class Item extends React.Component {

  /**
   * @method shouldComponentUpdate
   * @returns {Boolean}
   */
  shouldComponentUpdate () {
    return React.addons.PureRenderMixin.shouldComponentUpdate.apply(this, arguments);
  }

  /**
   * @method render
   * @returns {JSX}
   */
  render () {
    return <li className="item">{this.props.item.title} - ${this.props.item.price}</li>;
  }
}

Item.propTypes = {
  item: React.propTypes.object.isRequired,
};

export default Item;

And .babelrc:

{
  "presets": [
    "es2015",
    "react"
  ]
}

Any idea on how to solve this problem? Thanks

[cpojer]

If you are using babel 6, for now you'll have to do require('Item').default in your test. This is annoying and going to be fixed soon.

[AlexJuarez]

additionally you have a typo in your item.js, PropTypes should be capitalized.

your Item.spec.js becomes

jest.dontMock('../Item.js');

import ReactTestUtils from 'react-addons-test-utils';
import React from 'react';
const Item = require('../Item.js').default;

var itemProp = {
  title: 'Item 1',
  price: 12
};

describe('Item', () => {

  it('renders properly', () => {
    var item = ReactTestUtils.renderIntoDocument(
      <Item item={itemProp} />
    );

    var li = ReactTestUtils.findRenderedDOMComponentWithTag(item, 'li');

    expect(li.textContent).toEqual('Item 1 - $12');
  });
});

[hawflau]

it works now. Thanks!

[delgiudices]

Is this solved already?

[ashokrse2020]

Getting this error when i run npm test

[sampurcell93]

Any update on this? It's making jest waaaay more cumbersome than it needs to be.

[alyahmedaly]

any update, i have the same issue with typescript

[safurabahrami]

I'm getting "TypeError: Cannot read property 'node' of undefined" when I run npm test

"react": "^16.0.0-alpha.12",
"react-dom": "^16.0.0-alpha.12",
"react-native": "^0.48.4"
"jest": "20.0.4"