![](/img/trans.png)
[英]OfficeDev / office-ui-fabric-react - ChoiceGroup component
[英]How to test using jest office-ui-fabric-react CallOut component?
我一直在尝试在我的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());
我需要帮助,如何测试以下方案?
Callout.calloutClass1
找到.clickForSomeAction
按钮并模拟点击 office-fabric-ui中有类似的组件(例如:DropDown,上下文菜单),可在文档中而不是在当前组件HTML中呈现HTML。
最后,我使用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选择器进行查询。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.