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

【问题标题】：Testing nested menu items in react material-ui menu在 react material-ui 菜单中测试嵌套菜单项
【发布时间】：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

【问题讨论】：

标签： reactjs testing material-ui jestjs enzyme

【解决方案1】：

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

【讨论】：