如何使用 jest office-ui-fabric-react CallOut 组件进行测试？

Question

我一直在尝试在我的 react 项目中测试 Callout 组件。

为简单起见，以下是 React 渲染组件：

    <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>

这在 UI 中工作得非常好。为了开玩笑地进行测试，我尝试了以下操作：

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

我需要帮助，如何测试以下场景？

1. 标注可见？
2. 在Callout.calloutClass1中找到.clickForSomeAction按钮并模拟点击

office-fabric-ui 中有类似的组件（例如：DropDown、上下文菜单）在文档中呈现 HTML，而不是在当前组件 HTML 中呈现。

Answer 1

最后，我使用ReactTestUtils 对标注进行了测试，如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);

它按预期工作，因为我们无法通过 querySelectors 直接查询ReactTestUtils，所以几乎没有故障。

编辑 1

我们可以使用 XML 选择器进行查询。