Semantic-ui-react: Testing modals with enzyme

[Stieffers]

I'm trying to test a component that contains a modal, with some inputs inside the modal. The inputs have some basic inline functions in the onChange properties,. I'm trying to trigger the functions using enzyme.

...

beforeEach(() => {
  wrapper = mount(
    <ModalComponent trigger={<div id='trigger' />} />
  );
  wrapper.find('#trigger').simulate('click');
});

it("changes the input value", () => {
  wrapper.find('input').simulate('change');
});

I've had to use a pollyfill because it looks like the modal uses requestAnimationFrame when it opens. Despite trying a number of different pollyfill solutions, the contents of the modal never seem to appear and the wrapper.find('input') call always returns 0 results. When I pull the inputs out of the modal everything works well. I've also tried setting the modal to always be open, but it still can't find the elements.

Version
v0.67.2

[levithomason]

Modals must be rendered to the document body, so they are not present in the render tree where you rendered it. This technique is often referred to as a "portal. We render a Portal, which renders the Modal in the document body.

Lucky for you, we also use enzyme for testing so you can refer to our tests to see how we accomplished testing: https://github.com/Semantic-Org/Semantic-UI-React/tree/master/test/specs/modules/Modal. In short, you must mount the Modal and use real document queries to find and assert things about it.

React 16 will solve supposedly solve the need for Portals with a new first class API, Slot and Fill.