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

[begincalendar]

There is no issue per se, it's more of that the React test utils give you DOM elements, whereas Enzyme gives you wrappers and pseudo elements.

I.e. The whole library is designed to work with these wrappers/pseudoelements, e.g. for making simulate() calls.
So getting back DOM elements from React test utils, means that Enzyme can't really be utilised completely.

[claydiffrient]

Right. I actually really like Enzyme and have used it frequently in other projects. I don't see any reason that you couldn't use Enzyme when testing a component that uses react-modal.

[begincalendar]

But you need to extract the portal property to get access to child elements, right?

As far as I'm aware, with Enzyme, once you take out the reference to the portal property, you can't then go do things such as: render the child elements, render the text of the child elements, find sub-child elements, etc.

Am I missing something?

[claydiffrient]

Hmmm... I'd have to put together an example of this to be sure. I don't have time at the moment, but I'll see if I can't put something together soon.

[cool-acid]

I'm also interested on how to test with Enzyme. I've been struggling with this for a while.

[oliversong]

Bump. We're currently struggling this as well. Has anyone figured out a reasonable pattern for testing with enzyme?

[pzmudzinski]

Anyone.. ?

[asborisov]

#291

[bethcodes]

With enzyme, shallow supports portal components while mount does not. If you absolutely must use mount, you can use ref={(ref) => { this.namedRef = ref; } in order to access the element and then wrap it in an enzyme ReactWrapper.

[Cory-Christensen]

Here's an example where I used enzyme to test a component with react-modal. The modal is used to confirm a user wants to go forward, and tests to see if confirmed() was called.

confirm_modal.jsx

import React from 'react';
import ReactModal from 'react-modal';
import PropTypes from 'prop-types';

export default class ConfirmModal extends React.Component {

  static propTypes = {
    closeModal: PropTypes.func.isRequired,
    isOpen: PropTypes.bool.isRequired,
  }

  confirmed() {
    console.log('PASSED');
  }

  modalContent() {
    return (
      <div>
        <div className="c-modal__main">
          Do you wish to proceed?
        </div>
        <div className="c-modal__bottom">
          <button
            type="button"
            className="c-btn c-btn--gray"
            onClick={this.props.closeModal}
          >
            No
          </button>
          <button
            type="button"
            className="c-btn c-btn--blue"
            onClick={() => this.confirmed()}
          >
            Yes
          </button>
        </div>
      </div>
    );
  }

  render() {

    return (
      <ReactModal
        isOpen={this.props.isOpen}
        onRequestClose={this.props.closeModal}
        contentLabel="Modal"
        overlayClassName="c-modal__background"
        className="c-modal is-open"
      >
        {this.modalContent()}
      </ReactModal>
    );
  }
}

confirm_modal.spec.jsx

import React from 'react';
import { shallow } from 'enzyme';
import ConfirmModal from './confirm_modal';

describe('confirm modal', () => {
  let props;
  beforeEach(() => {
    props = {
      closeModal: () => {},
      isOpen: true,
    };
  });

  it('confirms user wants to proceed', () => {
    spyOn(ConfirmModal.prototype, 'confirmed');
    const wrapper = shallow(<ConfirmModal {...props} />);
    const content = wrapper.instance().modalContent();
    const modalContent = shallow(content);
    modalContent.find('.c-btn--blue').simulate('click');
    expect(wrapper.instance().confirmed).toHaveBeenCalled();
  });

  it('renders modalContent', () => {
    spyOn(ConfirmModal.prototype, 'modalContent');
    const wrapper = shallow(<ConfirmModal {...props} />);
    expect(wrapper.instance().modalContent).toHaveBeenCalled();
  });
});

Hopefully that helps you guys out 👍

[dy-dx]

This blog post has some examples for testing react-modal with enzyme: http://remarkablemark.org/blog/2017/05/17/testing-react-modal/

[ramusus]

@dy-dx thanks for great solution, but it doesn't work with the last enzyme

    "enzyme": "3.1.1",
    "enzyme-adapter-react-15": "1.0.5",

Do you have any workaround?

[techrah]

@ramusus I too am unable to get this to work with enzyme 3 and enzyme-adapter-react-15. If you've come up with a workaround, please share.

I've tried react-dom/test-utils renderIntoDocument then ReactDOM.findDOMNode and scryRenderedDOMComponentsWithClass as recommended here with little to no success.

I've also tried the examples from the blog post recommended by @dy-dx with limited success. I've been able to get a reference to the portal component but it doesn't seem to contain any HTML. (Yes, I've set isOpen to true.)

I've tried using both shallow and mount from enzyme and despite @bethcodes' experience with shallow, I actually got further with mount. With shallow I had no luck finding any portal.

[ramusus]

@ryanhomer, found solution - do not use ReactWrapper or any other hacks - content of modals get rendered into the main wrapper, properly in place where it should be logically (but not in the real DOM).

So everything becomes more simple and easy to test, just not forget to do wrapper.update() ...

[aaronvanston]

@ramusus Are you able to post an example? I'm still have issues rendering modal content without ReactWrapper.

[ramusus]

// ModalContainer.js
import React, { Component } from 'react';
import ReactModal from 'react-modal';

export default class ModalContainer extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isModalOpen: false
    };
    this.toggleModal = this.toggleModal.bind(this);
  }

  toggleModal() {
    this.setState({
      isModalOpen: !this.state.isModalOpen
    });
  }

  render() {
    return (
      <div>
        <button onClick={this.toggleModal}>
          Open Modal
        </button>
        <ReactModal
          {...this.props}
          isOpen={this.state.isModalOpen}
          onRequestClose={this.toggleModal}
        >
          <div>Content</div>
        </ReactModal>
      </div>
    );
  }
}

// ModalContainer.spec.js
import React from 'react';
import ReactModal from 'react-modal';
import ModalContainer from './ModalContainer';
import { mount } from 'enzyme';

describe('<ModalContainer>', () => {
  it('opens modal and render it\'s content when button is clicked', () => {
    const wrapper = mount(<ModalContainer />);
    wrapper.find('button').simulate('click');
    expect(wrapper.find(ReactModal).text()).toBe('Content');
  });
});

[hng0]

@ramusus The example above no longer works for me. I got this error

1. opens modal and render it's content when button is clicked:
   TypeError: Cannot read property 'textContent' of null
   at ReactWrapper. (node_modules/enzyme/build/ReactWrapper.js:799:43)
   at ReactWrapper.single (node_modules/enzyme/build/ReactWrapper.js:1534:25)
   at ReactWrapper.text (node_modules/enzyme/build/ReactWrapper.js:798:21)
   at Context. (src/a/test.spec.js:14:37)

I'm using react-modal 3.4.4 and enzyme 3.3.0. Is there anything that I miss?
Update: If I shallow render the modal, then its children is rendered.