Es tut mir leid, aber ich hatte die größte Mühe, das Schließen meines React Modal durch Klicken auf eine Schaltfläche zu testen. Der Modal ist so einfach wie möglich, und ich habe alles versucht, was mir einfällt, aber ich kann seine untergeordneten Elemente immer noch nicht abfragen.

Die modale Komponente:

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

Mein Ziel ist es zu testen, ob diese Schaltfläche "Schließen" das @ auslösonHide() Funktion, wenn darauf geklickt wird.

Meine Testdatei:

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

Egal was ich versuche, ich kann den Schließen-Button nicht finden.