reactjs - Unit testing React Bootstrap modal dialog

Question

I'm trying to unit test React Bootstrap modal dialog using Jasmine. But it is not working as expected.

Here is jsfiddle link using latest versions of React, React Bootstrap, Jasmine.: http://jsfiddle.net/30qmcLyf/3/

Test which fails:

line# 27-28

// This test fails. Find DOM Node.
var instanceDomNode = ReactDOM.findDOMNode(instance);
expect(instanceDomNode).not.toBe(null);

line# 39-40

//This test fails. Find modal header.
var headerComponents = TestUtils.scryRenderedComponentsWithType(component, ReactBootstrap.Modal.Header);
expect(headerComponents.length).not.toBe(0);

Also what is wrong with line#35-36. If I uncomment lines I get error shown in comments.

// Error: Did not find exactly one match for componentType:function ModalHeader()...
//var headerComponent = TestUtils.findRenderedComponentWithType(component, ReactBootstrap.Modal.Header);
//expect(headerComponent).not.toBe(null);

As per latest official documentation for test utilities (link), you are supposed to pass ReactComponent as first argument.

Can somebody tell me what is wrong?

Answer 1

Check out how the react-bootstrap team writes tests for this. The modal is rendered into a different subtree which is how it gets rendered to the document body and not directly as a child of its parent. In other words your srcying fails because the component is not in that Component tree.

You can use refs on the modal or look for the DOM nodes directly in the document.