Testando um componente React Modal
Sinto muito, mas estou tendo dificuldades para testar o fechamento do meu React Modal clicando em um botão. O Modal é o mais simples possível, e eu tentei tudo o que posso pensar ou encontrar, mas ainda não consigo consultar seus filhos.
O componente Modal:
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>
);
}
});
Meu objetivo é testar se esse botão Fechar aciona oonHide()
função quando é clicado.
Meu arquivo de teste:
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;
});
});
Não importa o que eu tente, não consigo encontrar o botão Fechar.