React-modal: Test Modals with enzyme 3

[ramusus]

Continue discussion started here https://github.com/reactjs/react-modal/issues/71#issuecomment-344373836

After upgrading enzyme from version 2 to latest 3.2.0 my related to retrieving subtree of Modal component tests gets broken.

I'm using solution from here http://remarkablemark.org/blog/2017/05/17/testing-react-modal/

const portalWrapper = new ReactWrapper(wrapper.find(ReactModal).node.portal, true);
console.log(portalWrapper.debug());

After upgrade portalWrapper is empty even with is_open={true} (before it has full subtree), so It became impossible to retrieve content. Any solution for this problem?

I tested with react 15 and 16

[ramusus]

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() ...

[cgalbiati]

This seems to be the most common solution, but it appears the node prop has been deprecated. Using React 16.2 and enzyme 3.1, I am seeing this error:

Attempted to access ReactWrapper::node, which was previously a private property on
Enzyme ReactWrapper instances, but is no longer and should not be relied upon.
Consider using the getElement() method instead.

Is anyone else seeing this? BTW, getElement() does not seem to return portal as a prop.

Example:

const wrapper = mount(
      <div>
          <Provider store={store}>
              <MyModal isOpen={true} />
          </Provider>
      </div>
);
console.log('modal node', wrapper.find(ReactModal).node) // error
console.log('modal element', wrapper.find(ReactModal).getElement(0)) // ReactModal element with props, etc, but no portal
console.log('from query', document.querySelector(`.ReactModalPortal`)) // Finds it, but I would rather not do it this way

[alabeduarte]

Hi there,

On top of what @ramusus suggested, here's the code that worked for me, it might be helpful:

Assuming I have the following Modal:

<Modal isOpen={isOpen} {...props}>
  <div className="my-modal-window">
    Hello World
  </div>
</Modal>

My tests were like this:

function getPortalWrapper(props) {
  const wrapper = mount(
    <div id="root">
      <Component {...props} />
    </div>
  );

  const { portal } = wrapper.find(ReactModal).first();
  return new ReactWrapper(portal, true);
}

// ...

it("renders modal when open flag is true", () => {
  const wrapper = getPortalWrapper({ isOpen: true });
   expect(wrapper.find(".my-modal-window").exists()).toEqual(true);
});

Now my tests look like this:

it('renders modal when open flag is true', () => {
  const props = { isOpen: true }; 
  const wrapper = mount(
    <div id="root">
      <Component {...props} />
    </div>
  );

  wrapper.update();

  expect(wrapper.find('.my-modal-window').exists()).toEqual(true);
  expect(wrapper.text()).toContain('Hello World');
});

Thanks a lot, @ramusus and @cgalbiati

[sergesemashko]

Actually, I have multiple tests with react-modal and document.querySelector('.ReactModalPortal') always returns the reference to the mounted modal from the first test.

In order to get access to the right react-modal I ended up with the following code:

import ReactModal from 'react-modal';

it('renders modal when open flag is true', () => {
  const wrapper = mount(
    <div id="root">
      <Component {...props} />
    </div>
  );
  const modal = wrapper.find(ReactModal).instance().portal.content; // 
  // Then depending on the environment you can query items within modal:

  // 1. if tests are running in browser environment
  expect(wrapper.querySelector('.title').innerHTML).toEqual('Page title');

  // 2. otherwise, any library that can query the string like cheerio can be used (I did not test this)
  expect(cheerio.load(modal).find('.title').text()).toEqual('Page title');
}