Testing the React Modal Component

Question

Sorry, but I had the most difficult time to check the closure of my React Modal by pressing a button. The modal is as simple as it can be, and I tried everything I could think of or find, but I still can’t ask his children.

Modal component:

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

My goal is to check if the Close button onHide() when I click onHide() .

My test file:

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

No matter what I try, I cannot find the Close button.

Answer 1

I wrote jsFiddle using a React Base Fiddle (JSX) to find out what happened (I created my own "spy" that just went to the console when called).

I found out that the reason you cannot find your button is because it does not exist where you might expect it.

The modular Bootstrap component ( <Modal/> ) is actually contained in the React-Overlays modular component (called BaseModal in the code that is from here ). This, in turn, displays a component called Portal , the render method simply returns null . This is the null value that you are trying to find the displayed components.

Due to the fact that modal is not used in the traditional way of React, React cannot see the modal to use TestUtils on. A completely separate child <div/> node is placed in the body of the document , and this new <div/> used to create the modal.

So, so that you can simulate a click using React TestUtils (the button click handler is still attached to the button click event), you can use standard JS methods to find the DOM. Set up your test as follows:

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

The getElementsByClassName function returns a collection of elements with this class, so you must transfer the first (and to your test case, your only one) from each collection.

Your test should now pass ^ _ ^

Answer 2

This is the solution I came across. It drowns out how React renders the modification to just display the <div> .

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