mocha + jsdom + React TypeError：未定義のプロパティ 'addEventListener'を読み取ることができません

mocha 2.3.3、jsdom 6.5.1、およびNode.js 4.1.1でReact 0.10.0コンポーネントのユニットテストを始めています。私はユニットテストのためにこれを持っている：私は、テストを実行すると、私はこのスタックトレースを取得mocha + jsdom + React TypeError：未定義のプロパティ 'addEventListener'を読み取ることができません

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)

どれ

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; 
     }); 

    }); 

});

そして、これが私のシンプルでは、ビューに反応します私が間違ってやっているアイデア？

出典

2015-10-03 Rob Johansen

どのバージョンあなたは使用していますか？ –

すべてのバージョン番号を持つように質問を更新しました。 –

'jsdom.jsdom（）。parentWindow'から' jsdom.jsdom（）。defaultView'に変更するとどうなりますか？ –

他の人に役立つ場合に備えて、私は解決策を投稿しています。詳細はhereで説明されていますが、要点は次のとおりです。NodeのモジュールローダーによってReactがロードされる前にDOMが準備完了していることを確認する必要があります。これを強制的に行うには、mochaの--requireオプションを使用し、jsdom設定を含むファイルを指定します。

は、私の場合、私は、次の内容で、私のtestディレクトリ内setup.jsという名前のファイルを作成：

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

出典

2015-10-07 17:54:55

es2015を使用している場合は、jsdomをインポートしないでください。私はこれを動作させるために数時間を費やしました。インポートの代わりにrequireを使用すると動作しました。私はなぜ、私はそれが最終的に働くことを嬉しく思っています... – nhjk

私はjsdomを 'import'構文で使っています。それはあなたのバベルの構成によります。 –

なぜ 'global.navigator = global.window.navigator'ですか？ –

mocha + jsdom + React TypeError：未定義のプロパティ 'addEventListener'を読み取ることができません

答えて

関連する問題