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

小编典典

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

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)

有什么想法我做错了吗？

阅读 235

2020-07-22

共1个答案

小编典典

我会发布解决方案，以防其他人使用。它的详细解释在这里，但简而言之：你必须确保DOM准备反应过来之前由Node的模块加载器加载。您可以使用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

2020-07-22