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

Question

我一直试图在我的react项目中测试呼号组件。

为了简化，以下是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. 在.clickForSomeAction中查找Callout.calloutClass1按钮并模拟单击

office-fabric-ui中有类似的组件(ex: DropDown，上下文菜单)，它在文档中呈现HTML，而不是在当前组件HTML中。

Answer 1

最后，我使用ReactTestUtils测试了示例中给出的标注。

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

由于我们不能通过ReactTestUtils直接查询querySelectors，所以很少会出现故障。

编辑1

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