Material-ui: Content of Popover component isn't available in test

Created on 29 Jan 2017 · 1Comment · Source: mui-org/material-ui

Similar question was asked several times on stackoverflow but no answer was recieved.
like this or this

So i am asking here cos you should know the answer as soon as you created this project.

So i have this mini app. Some details was omitted. Pretend it works correctly.

class NotificationsPopoverContainer extends React.Component {

  constructor(props) {
    super(props);
    this.handleTouchTap = this.handleTouchTap.bind(this);
    this.handleRequestClose = this.handleRequestClose.bind(this);
    this.markAsReadAndClose=this.markAsReadAndClose.bind(this);

    this.state = {
      open: false,
    };
  }

  handleTouchTap(e) {
    e.preventDefault();

    this.setState({
      open: true,
      anchorEl: event.currentTarget,
    });
  }

  handleRequestClose() {
    this.setState({
      open: false,
    });
  };

markAsReadAndClose() 
    // pretend component is connected to redux store
    const { dispatch } = this.props;

    dispatch(markSeveralNotificationsAsRead(5))
    this.handleRequestClose();
  }

  render() {
      // chunk is Immutable.List  of Immutable.Map
      const chunk = getLastSeveral(notifications, 5);

    return (
    <NotificationsPopover
        {...this.state}
        chunk={chunk}
        handleTouchTap={this.handleTouchTap}
        handleRequestClose={this.handleRequestClose}
        markAsReadAndClose={this.markAsReadAndClose}
    />
    );
  }
}

function NotificationsPopover({ 
    open, 
    anchorEl, 
    chunk,
    handleTouchTap, 
    handleRequestClose,
    markAsReadAndClose
}) {
    return (
        <div>
        <RaisedButton
            onTouchTap={handleTouchTap}
            label="Click me"
        />
        <Popover
            open={open}
            anchorEl={anchorEl}
            anchorOrigin={{horizontal: 'left', vertical: 'bottom'}}
            targetOrigin={{horizontal: 'left', vertical: 'top'}}
            onRequestClose={handleRequestClose}
        >
            <NotificationsMenu 
                chunk={chunk} 
                markAsReadAndClose={markAsReadAndClose}
            />
        </Popover>
    </div>
    );
}

function NotificationsMenu({ chunk }) {
    return (
        const menuItems = chunk.map(n => 
            <MenuItem style={{ lineHeight: '32px' }} key={n.get('id')}>
                <div style={styles.title}>{n.get('title')}</div>
                <div style={styles.datetime}>{moment(n.get('datetime')).fromNow()}</div>
            </MenuItem>
        );
        const link = (
            <div style={styles.linkHolder}>
                <a style={styles.link} id="all-link" onTouchTap={markAsReadAndClose}>...all</a>
            </div>
        );

        return (
            <div>
                <Menu>
                    {menuItems}
                </Menu>
                {chunk.length ? link : ''}
            </div>
        );
    );
}

and this is part of test file which fails

import React, { PropTypes } from 'react';
import { mount } from 'enzyme';
import { Simulate } from 'react-addons-test-utils'
import { List, Map } from 'immutable';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import injectTapEventPlugin from 'react-tap-event-plugin';

import muiThemeConfig from '../muiThemeConfig';
import { NotificationsAreaContainer } from '../containers/NotificationsAreaContainer';


describe('<NotificationsAreaContainer />', () => {

  injectTapEventPlugin();

  function setup() {
    const props = {
      notifications: List([]),
      dispatch: jest.fn(),
    };
    const options = { 
      context: { muiTheme: getMuiTheme(muiThemeConfig) },
      childContextTypes: { muiTheme: PropTypes.object }
    };

    const wrapper = mount(<NotificationsAreaContainer {...props} />, options);

    return {
      props,
      wrapper,
    };
  }


  it('should mark notifications as read and close popover on link touch tap', () => {
    const { wrapper } = setup();
    wrapper.setState({ open: true });

    // fails here because inners of <Popover /> ported to other part of page after dom rendering
    const link = wrapper.find('#all-link').getDOMNode();
    Simulate.touchTap(link);

    expect(wrapper.state().open).toBe(false);
  });
});