Menu
I'm just getting started unit testing a React 0.10.0 component with mocha 2.3.3, jsdom 6.5.1, and Node.js 4.1.1. I have this for my 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 the controller', function() {
it('when the name field changes', function() {
TestUtils.Simulate.change(this.nameInput);
expect(nameChangedStub.called).to.be.true;
});
});
});
And this is my 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 your name'
}),
React.DOM.input({
id: 'nameInput',
onChange: this.props.nameChanged
}),
React.DOM.button({
id: 'doneButton'
})
]
})
}
});
module.exports = StudentNameView;
When I run the test, I get this stack trace:
TypeError: Cannot read property 'addEventListener' of undefined
at Object.EventListener.listen (node_modules/react/lib/EventListener.js:21:15)
at Object.merge.ensureScrollValueMonitoring (node_modules/react/lib/ReactEventEmitter.js:315:21)
at Object.ReactMount._registerComponent (node_modules/react/lib/ReactMount.js:282:23)
at Object.<anonymous> (node_modules/react/lib/ReactMount.js:305:36)
at Object._renderNewRootComponent (node_modules/react/lib/ReactPerf.js:57:21)
at Object.ReactMount.renderComponent (node_modules/react/lib/ReactMount.js:359:32)
at Object.renderComponent (node_modules/react/lib/ReactPerf.js:57:21)
at Object.ReactTestUtils.renderIntoDocument (node_modules/react/lib/ReactTestUtils.js:57:18)
at Context.<anonymous> (test/student-name-view-test.js:19:44)
Any ideas what I'm doing wrong?
763
I'm posting the solution in case it helps anyone else. It's explained in detail here, but in a nutshell: You must ensure that the DOM is ready before React is loaded by Node's module loader. You can force this by using mocha's --require option and specifying a file that contains the jsdom setup.
In my case, I created a file named setup.js in my test directory with the 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 now my test runs successfully with this command:
mocha --require ./test/setup.js
148
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With