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

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

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

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

Answer 1

最后，我使用examples中给出的ReactTestUtils对Callout进行了测试：

    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选择器进行查询。

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

1 个答案: