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

Posted

技术标签:

【中文标题】在 react material-ui 菜单中测试嵌套菜单项【英文标题】:Testing nested menu items in react material-ui menu 【发布时间】:2018-02-09 08:44:15 【问题描述】:

我想测试包含嵌套菜单项的菜单。我希望能够模拟对嵌套菜单项的单击并查看它的处理程序是否被调用。我已经对未嵌套的菜单项进行了测试。

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

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

【问题讨论】:

【参考方案1】:

在了解了 Enzyme 之后,我发现他们使用 jsdom 来实现一个使用实际 DOM 的无头浏览器。我为解决我的问题所做的就是用 document.findElementById('#nested') 替换 component.find("#nested") 方法。之后,测试可以找到子组件并通过。

【讨论】:

以上是关于在 react material-ui 菜单中测试嵌套菜单项的主要内容,如果未能解决你的问题,请参考以下文章

为 SelectField 显示空白菜单项的正确方法是啥(material-ui,react)

React Material-UI 下拉菜单不起作用

如何在 React 测试库中获取 Material-UI 密码输入

想要改变 React Material-UI DataGrid 过滤器菜单弹出的位置

React + Jest单元测试中的Material-UI排版错误

如何在 Material-UI 菜单中使用自定义功能组件