React, Jest and Material-UI: How to test for content rendered in a modal or popover

Question

There are a few material-ui components that do not render their results in the same place as the component is placed by their parent. Among these we have the Dialog

Answer 1

The Menu won't be rendered until state changes, so you can simulate a click on the Button, let its handler setState, trigger a rerender, and find the specific MenuItem.

Also, this can probably be done without fully mounting:

it('renders some menu items', () => {
  const wrapper = shallow();

  // find the Menu Button
  const button = wrapper.findWhere(node => node.is(Button) && n.prop('children') === 'Menu');

  // simulate a click event so that state is changed
  button.simulate('click');

  // find the Home MenuItem
  const menuItem = wrapper.findWhere(node => node.is(MenuItem) && n.prop('label') === 'Home');

  // make sure it was rendered
  expect(menuItem.exists()).toBe(true);
});