Modals cannot be tested with React's TestUtil

[baer]

react-modal is acting outside of the purview of any of React's test utilities.

renderedModal.getDomNode()
// => <noscript data-reactid=".0"></noscript>

React.scryRenderedDOMComponentsWithClass(renderedModal, "my-modal-class");
// => []

I see there are some work arounds that were developed circa React 0.12 but I can't figure out why that is necessary. If I was guessing I would say that this has to do with how you mount to the DOM to properly apply the overlay. If this is true, maybe a small wrapper around those helpers as a part of the release would be a helpful thing for us app devs who want to write lots of tests :)

https://github.com/rackt/react-modal/blob/master/specs/helper.js

[dviramontes]

Having trouble testing this as well.
👍 thanks for the pointer @baer !

[jkimbo]

@baer I guess this is because the modal creates a "portal" by mounting the actual modal in a new div at the bottom of the page. You can see in the Modal.js component the render method is not actually returning anything: https://github.com/rackt/react-modal/blob/1ff6a02c689e9fdc03616c4ab82ec53317f14c69/lib/components/Modal.js#L74

To get around this you need to access the .portal property (https://github.com/rackt/react-modal/blob/1ff6a02c689e9fdc03616c4ab82ec53317f14c69/lib/components/Modal.js#L70) on the renderedModal to access the correct React tree to run the TestUtils on. So React.scryRenderedDOMComponentsWithClass(renderedModal.portal, "my-modal-class"); should work.

Hope that makes sense!

[ArthurCideron]

@jkimbo that sounded promising, unfortunately that didn't do the trick for me. I get an undefined on renderedModal.portal. Do you get the React tree on that ?

[jkimbo]

@ArthurCid I've written up a passing test for you using mocha and jsdom: https://gist.github.com/jkimbo/872f42732e6c772bf8e1

[gbrassey]

I'm still having trouble with this. I've tried react-modal@0.6.1 w/ react@0.14.2 and react-modal@0.5.0 w/ react@0.13.3. Testing with karma, karma-chrome and mocha.

the .portal property exists and renders but it appears to have no children

import React from 'react';
import ReactDOM from 'react-dom';
import TestUtils from 'react-addons-test-utils';
import { expect } from 'chai';

import Modal from 'react-modal';

describe('component - common - Modal', () => {
  it('renders without problems', () => {
    const renderedModal = TestUtils.renderIntoDocument(
      <Modal>
        <div className="my-modal-class">
          <h1>Hi!</h1>
        </div>
      </Modal>
    );

    // passing
    expect(ReactDOM.findDOMNode(renderedModal.portal).tagName).to.equal('DIV');
    expect(ReactDOM.findDOMNode(renderedModal.portal).children).to.be.empty;

    const divs = TestUtils.scryRenderedDOMComponentsWithClass(renderedModal.portal, 'my-modal-class');
    // fails
    expect(divs.length).to.equal(1);
  });
});

[jkimbo]

@gbrassey you need to set isOpen={true} on the modal component for it to render it's children.

[gbrassey]

wow thanks @jkimbo 😵 🔫

[ArthurCideron]

@jkimbo I figured out my issue. You example worked fine so it was indeed an issue on my side.
I was rendering from an external module like

var  renderedModal = TestUtils.renderIntoDocument(
      <MyModule
           props1:{stubblabla}
      />
    );

and calling MyModule.portal, which was obviously wrong, I needed the Modal.portal
So for whoever is in trouble like I was: remember to get the Modal component !

TestUtils.findRenderedComponentWithType(component, Modal);

[jkimbo]

@ArthurCid glad you figured it out!

[claydiffrient]

There hasn't been much traction on this issue in over a year. I'm assuming that this is no longer an issue, especially given that #136 was merged. If it is, please feel free to re-open.

[begincalendar]

I know this issue is about React test utils, but is it possible to make testing work with Enzyme.js?

Enzyme.js provides a simpler/cleaner API over React test utils (in my opinion) and it would be handy to be able to utilise that when testing code regarding react-modal.

[claydiffrient]

@begincalendar Is there a specific issue with using Enzyme? In theory it should "just work" assuming the notes about testing from the read me are followed. If there's a specific issue where it fails, please file an issue for it