摩卡+ jsdom + React TypeError:无法读取未定义的属性'addEventListener' [英] mocha + jsdom + React TypeError: Cannot read property 'addEventListener' of undefined
问题描述
我刚刚开始使用Mocha 2.3.3，jsdom 6.5.1和Node.js 4.1.1对React 0.10.0组件进行单元测试.我的单元测试用到了这个
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;
});
});
});
这是我简单的React视图:
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?
推荐答案
我正在发布解决方案，以防其他人受益.在此处中对此进行了详细说明，但简而言之:在通过以下方式加载React之前，您必须确保DOM已准备就绪节点的模块加载器.您可以使用mocha的--require选项并指定一个包含jsdom设置的文件来强制执行此操作.
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.
对于我来说，我在test目录中创建了一个名为setup.js的文件，其内容如下:
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
这篇关于摩卡+ jsdom + React TypeError:无法读取未定义的属性'addEventListener'的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
