How to test using jest office-ui-fabric-react CallOut component?

Question

I've been trying to test Callout component in my react project.

For simplification, following is React render component:

    <div className="UserInfoDiv">
        <div ref={this.menuButtonElement}>
            <ActionButton id="toggleCallout"
                onClick={changeIsCallOutVisibleProptoTrue}
                text="Show Callout" />
        </div>
        <Callout
            className="calloutClass1"
            target={this.menuButtonElement.current}
            hidden={!this.props.isCalloutVisible}>
            <div id="callOutContainer">
                <span>Need to test items here.<span>
                <button className="clickForSomeAction">Simulate Click on this</button>
            </div>
        </Callout>
    </div>

This works absolutely fine in UI. For testing in jest, I tried following:

    userMenu = mount(<UserInfoDivComponent {...props} />);
    UserInfoDiv.find("button#toggleCallout").simulate('click');
    expect(changeIsCallOutVisibleProptoTrue.mock.calls.length).toBe(1); 
    userMenu.setProps({isCalloutVisible: true });

    // Following only gives html(included UserInfoDiv,toggleCallout)  `without html from callout`:
    console.log(userMenu.html());

I need help on, How to test following scenarios?

1. Callout is Visible?
2. Find .clickForSomeAction button inside Callout.calloutClass1 and simulate click

There are similar component (ex: DropDown, Contextual Menu) from office-fabric-ui which renders HTML in document and not in current component HTML.

Answer 1

Finally, I did testing of Callout using ReactTestUtils as given in examples :

    let component:any;
    const container = document.createElement('div');
    document.body.appendChild(container);
    let threwException = false;
    try {
        component = ReactTestUtils.renderIntoDocument(<UserInfoDivComponent {...itemProps} />);
    } catch (e) {
        threwException = true;
    } 
    expect(threwException).toEqual(false); 
    const UserInfoDiv= ReactTestUtils.findRenderedDOMComponentWithClass(component, "UserInfoDiv");


    const clickForSomeAction = ReactTestUtils.findRenderedDOMComponentWithClass(component, "clickForSomeAction");
    ReactTestUtils.Simulate.click(clickForSomeAction);

it works as expected, which few glitches as we can not query ReactTestUtils directly by querySelectors.

Edit 1

we can query using XML selectors.