Question

我刚开始使用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)

任何想法我做错了什么？

Answer 1

我正在发布解决方案，以防它帮助其他人。它详细解释了here，但简而言之：在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

mocha + jsdom + React TypeError：无法读取未定义的属性'addEventListener'

1 个答案: