Kiểm tra thành phần React Modal

Question

Tôi xin lỗi, nhưng tôi đã có thời gian khó khăn nhất để thử kiểm tra Chế độ phản ứng bằng cách nhấp vào nút. Các phương thức đơn giản như có thể được, và tôi đã thử tất cả mọi thứ tôi có thể nghĩ hoặc tìm, nhưng tôi vẫn không thể truy vấn con cái của nó.

Các phương thức thành phần:

var React = require('react'); 
var Modal = require('react-bootstrap').Modal; 
var Button = require('react-bootstrap').Button; 

var MyModal = React.createClass({ 
    ... 
    render: function() { 
    return (
     <Modal className="my-modal-class" show={this.props.show}> 
     <Modal.Header> 
      <Modal.Title>My Modal</Modal.Title> 
     </Modal.Header> 
     <Modal.Body> 
      Hello, World! 
     </Modal.Body> 
     <Modal.Footer> 
      <Button onClick={this.props.onHide}>Close</Button> 
     </Modal.Footer> 
     </Modal> 
    ); 
    } 
}); 

Mục tiêu của tôi là để kiểm tra xem rằng nút Close bắn các onHide() hàm khi nó được nhấp.

tập tin thử nghiệm của tôi:

describe('MyModal.jsx', function() { 
    it('tests the Close Button', function() { 
    var spy = sinon.spy(); 
    var MyModalComponent = TestUtils.renderIntoDocument(
     <MyModal show onHide={spy}/> 
    ); 

    // This passes 
    TestUtils.findRenderedComponentWithType(MyModalComponent, MyModal); 

    // This fails 
    var CloseButton = TestUtils.findRenderedDOMComponentWithTag(MyModalComponent, 'button'); 

    // Never gets here 
    TestUtils.Simulate.click(CloseButton); 
    expect(spy.calledOnce).to.be.true; 
    }); 
}); 

Không có vấn đề gì tôi cố gắng, tôi dường như không thể tìm ra nút Close.

Answer 1

Tôi đã viết jsFiddle bằng cách sử dụng React Base Fiddle (JSX) để tìm hiểu những gì đang diễn ra trong thử nghiệm của bạn (tôi tạo 'gián điệp' của riêng mình mà chỉ cần đăng nhập vào bảng điều khiển khi được gọi).

Tôi phát hiện ra rằng lý do bạn không thể tìm thấy nút của mình là do nó không tồn tại nơi bạn có thể mong đợi.

Bootstrap Modal Component (<Modal/>) thực sự được chứa trong một thành phần phương thức React-Overlays (được gọi là BaseModal trong mã, là từ here). Điều này lần lượt làm cho một thành phần được gọi là Portal có render method chỉ đơn giản là trả lại null. Giá trị này là null bạn đang cố gắng tìm các thành phần được hiển thị.

Do phương thức không được hiển thị theo cách phản ứng truyền thống, React không thể xem phương thức để sử dụng TestUtils. Nút con <div/> riêng biệt được đặt trong phần thân document và <div/> mới được sử dụng để xây dựng phương thức này. Vì vậy, để cho phép bạn mô phỏng một lần nhấp bằng cách sử dụng React TestUtils (trình xử lý nhấp chuột trên nút vẫn còn bị ràng buộc với sự kiện nhấp của nút), bạn có thể sử dụng các phương thức JS chuẩn để tìm kiếm DOM thay thế. Thiết lập thử nghiệm của bạn như sau:

describe('MyModal.jsx', function() { 
    it('tests the Close Button', function() { 
    var spy = sinon.spy(); 
    var MyModalComponent = TestUtils.renderIntoDocument(
     <MyModal show onHide={spy}/> 
    ); 

    // This passes 
    TestUtils.findRenderedComponentWithType(MyModalComponent, MyModal); 

    // This will get the actual DOM node of the button 
    var closeButton = document.body.getElementsByClassName("my-modal-class")[0].getElementsByClassName("btn btn-default")[0]; 

    // Will now get here 
    TestUtils.Simulate.click(CloseButton); 
    expect(spy.calledOnce).to.be.true; 
    }); 
}); 

Chức năng getElementsByClassName trả về một tập hợp các yếu tố với lớp đó vì vậy bạn phải đi đầu tiên (và trong trường hợp thử nghiệm của bạn, chỉ có một) của mỗi bộ sưu tập.

Bài kiểm tra của bạn giờ đây sẽ vượt qua^_^

Answer 2

Đây là giải pháp mà tôi đã kết thúc. Nó tóm tắt cách React ám một phương thức để chỉ hiển thị một <div> thay thế.

test-utils.js:

var sinon = require('sinon'); 
var React = require('react'); 
var Modal = require('react-bootstrap').Modal; 

module.exports = { 
    stubModal: function() { 
    var createElement = React.createElement; 
    modalStub = sinon.stub(React, 'createElement', function(elem) { 
     return elem === Modal ? 
     React.DOM.div.apply(this, [].slice.call(arguments, 1)) : 
     createElement.apply(this, arguments); 
    }); 
    return modalStub; 
    }, 
    stubModalRestore: function() { 
    if (modalStub) { 
     modalStub.restore(); 
     modalStub = undefined; 
    } else { 
     console.error('Cannot restore nonexistent modalStub'); 
    } 
    } 
}; 

modal-test.jsx

var testUtils = require('./test-utils'); 

describe('test a Modal!', function() { 
    before(testUtils.stubModal); 
    after(testUtils.stubModalRestore); 

    it('renders stuff', function() { 
    var MyModalComponent = TestUtils.renderIntoDocument(
     <MyModal show/> 
    ); 
    // Do more stuff you normally expect you can do 
    }); 
});