加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

reactjs – 在react material-ui菜单中测试嵌套菜单项

发布时间:2020-12-15 05:04:23 所属栏目:百科 来源:网络整理
导读:我想测试具有嵌套菜单项的菜单.我希望能够模拟嵌套菜单项上的单击并查看是否调用了它的处理程序.我已经得到了没有嵌套菜单项的测试. 这是我正在尝试构建的测试的简单版本: describe("menu",() = { it("should click on nested nested menu items",() = { co
我想测试具有嵌套菜单项的菜单.我希望能够模拟嵌套菜单项上的单击并查看是否调用了它的处理程序.我已经得到了没有嵌套菜单项的测试.

这是我正在尝试构建的测试的简单版本:

describe("menu",() => {
 it("should click on nested nested menu items",() => {
    const testOnClickSpy = Sinon.spy(() => {});
    const component = mount(
      <MuiThemeProvider><Menu>
        <MenuItem 
          primaryText={<span id="test">test</span>} onTouchTap={testOnClickSpy}
          menuItems={ <MenuItem  primaryText={<span id="nested">nested</span>} /> }/>
        </Menu></MuiThemeProvider>
    );

    simulateEvent(component.find("#test"),"touchTap");

    expect(component.find("#test").exists()).toBe(true);  // Works fine.
    expect(testOnClickSpy.callCount).toBe(1); // Works fine.
    component.update(); // <--- Does not seem to do anything?
    expect(component.find("#nested").exists()).toBe(true); // <--- Because this item cannot be found?
  }) 
})

我正在使用此simulateEvent来模拟触摸式点击:

require("react-tap-event-plugin")();
function simulateEvent(wrappedTarget,eventType) {
    const domNode = findDOMNode(wrappedTarget["node"]);
    Simulate[eventType](domNode);
}

我使用的是React 15.6.1,material-ui 0.18.6,Enzyme 2.9.1 Jest 20.0.4

也许相关? React,Jest and Material-UI: How to test for content rendered in a modal or popover

在了解了一些关于酶的知识之后,我发现他们正在使用 jsdom来实现与实际DOM一起实现的无头浏览器.我用来解决问题的方法是用document.findElementById(‘#nested’)替换component.find(“#nested”)方法.之后,测试可以找到子组件和通行证.

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读