Rob*_*sen 9 mocha.js jsdom reactjs
我刚开始使用mocha 2.3.3,jsdom 6.5.1和Node.js 4.1.1对React 0.10.0组件进行单元测试.我有这个用于我的单元测试:
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视图:
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;
当我运行测试时,我得到了这个堆栈跟踪:
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)
我有什么想法我做错了吗？
Rob*_*sen 24
我正在发布解决方案,以防它帮助其他任何人.这里详细解释,但简而言之:在Node的模块加载器加载React之前,必须确保DOM已准备就绪.您可以使用mocha的--require选项并指定包含jsdom设置的文件来强制执行此操作.
在我的例子中,我创建了一个setup.js在我的test目录中命名的文件,其中包含以下内容:
var jsdom = require('jsdom');
global.document = jsdom.jsdom('<!doctype html><html><body></body></html>');
global.window = document.defaultView;
global.navigator = {userAgent: 'node.js'};
现在我的测试使用此命令成功运行:
mocha --require ./test/setup.js
| 归档时间： |
|
| 查看次数： |
8374 次 |
| 最近记录： |