reactjs - mocha + jsdom + React TypeError: Cannot read property 'addEventListener' of undefined -
i'm getting started unit testing react 0.10.0 component mocha 2.3.3, jsdom 6.5.1, , node.js 4.1.1. have unit test:
var react = require('react/addons'); var testutils = react.addons.testutils; var sinon = require('sinon'); var expect = require('chai').expect; var jsdom = require('jsdom'); var view = require('../student-name-view.js'); describe('the student name view', function() { var renderedcomponent = null; var namechangedstub = sinon.stub(); var namesubmittedstub = sinon.stub(); before(function() { global.document = jsdom.jsdom('<!doctype html><html><body></body></html>'); global.window = document.parentwindow; this.renderedcomponent = testutils.renderintodocument( view({ namechanged: namechangedstub, namesubmitted: namesubmittedstub }) ); this.nameinput = testutils.findrendereddomcomponentwithtag(renderedcomponent, 'input').getdomnode(); }); describe('should notify controller', function() { it('when name field changes', function() { testutils.simulate.change(this.nameinput); expect(namechangedstub.called).to.be.true; }); }); });
and simple react view:
var react = require('react'); var studentnameview = react.createclass({ render: function() { return react.dom.div({ id: 'name-container', children: [ react.dom.p({ children: 'enter name' }), react.dom.input({ id: 'nameinput', onchange: this.props.namechanged }), react.dom.button({ id: 'donebutton' }) ] }) } }); module.exports = studentnameview;
when run test, stack trace:
typeerror: cannot read property 'addeventlistener' of undefined @ object.eventlistener.listen (node_modules/react/lib/eventlistener.js:21:15) @ object.merge.ensurescrollvaluemonitoring (node_modules/react/lib/reacteventemitter.js:315:21) @ object.reactmount._registercomponent (node_modules/react/lib/reactmount.js:282:23) @ object.<anonymous> (node_modules/react/lib/reactmount.js:305:36) @ object._rendernewrootcomponent (node_modules/react/lib/reactperf.js:57:21) @ object.reactmount.rendercomponent (node_modules/react/lib/reactmount.js:359:32) @ object.rendercomponent (node_modules/react/lib/reactperf.js:57:21) @ object.reacttestutils.renderintodocument (node_modules/react/lib/reacttestutils.js:57:18) @ context.<anonymous> (test/student-name-view-test.js:19:44)
any ideas i'm doing wrong?
i'm posting solution in case helps else. it's explained in detail here, in nutshell: must ensure dom ready before react loaded node's module loader. can force using mocha's --require
option , specifying file contains jsdom setup.
in case, created file named setup.js
in test
directory following contents:
var jsdom = require('jsdom'); global.document = jsdom.jsdom('<!doctype html><html><body></body></html>'); global.window = document.defaultview; global.navigator = {useragent: 'node.js'};
and test runs command:
mocha --require ./test/setup.js
Comments
Post a Comment