mocha + jsdom + Loại phản hồiLỗi: Không thể đọc thuộc tính 'addEventListener' không xác định

Tôi chỉ đang bắt đầu thử nghiệm đơn vị thành phần React 0.10.0 với mocha 2.3.3, jsdom 6.5.1 và Node.js 4.1.1 . Tôi có điều này cho kiểm tra đơn vị của tôi:mocha + jsdom + Loại phản hồiLỗi: Không thể đọc thuộc tính 'addEventListener' không xác định

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

    }); 

});

Và đây là đơn giản xem Phản ứng của tôi:

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;

Khi tôi chạy thử nghiệm, tôi nhận được đống này dấu vết:

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)

Bất kỳ ý tưởng những gì tôi đang làm sai?

Nguồn

2015-10-03 Rob Johansen

Phiên bản nào của jsdom bạn đang sử dụng? –

Tôi đã cập nhật câu hỏi để có tất cả các số phiên bản. –

Điều gì sẽ xảy ra nếu bạn thay đổi từ 'jsdom.jsdom(). ParentWindow' thành' jsdom.jsdom(). DefaultView'? –

Tôi đăng giải pháp trong trường hợp nó giúp bất kỳ ai khác. Nó được giải thích chi tiết here, nhưng tóm lại: Bạn phải đảm bảo rằng DOM đã sẵn sàng trước khi React được nạp bởi trình nạp mô-đun của Node. Bạn có thể ép buộc điều này bằng cách sử dụng tùy chọn --require của mocha và chỉ định tệp chứa cài đặt jsdom.

Trong trường hợp của tôi, tôi đã tạo một file có tên setup.js trong thư mục test của tôi với các nội dung sau:

var jsdom = require('jsdom'); 

global.document = jsdom.jsdom('<!doctype html><html><body></body></html>'); 
global.window = document.defaultView; 
global.navigator = {userAgent: 'node.js'};

Và bây giờ thử nghiệm của tôi chạy thành công với lệnh này:

mocha --require ./test/setup.js

Nguồn

2015-10-07 17:54:55

Đối với những người sử dụng es2015, đừng nhập jsdom. Tôi đã dành một vài giờ cố gắng để có được điều này để làm việc, và sử dụng yêu cầu thay vì nhập khẩu làm cho nó hoạt động. Tôi không biết tại sao, tôi chỉ hạnh phúc cuối cùng nó hoạt động ... – nhjk

Tôi đang sử dụng jsdom với cú pháp 'import' tốt. Nó phụ thuộc vào cấu hình Babel của bạn. –

Tại sao không 'global.navigator = global.window.navigator'? –

mocha + jsdom + Loại phản hồiLỗi: Không thể đọc thuộc tính 'addEventListener' không xác định

Trả lời

Các vấn đề liên quan