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

Question

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

这是我尝试进行的测试的简单版本uild:

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

Answer 1

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

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

Testing nested menu items in react material-ui menu

testing

reactjs

jestjs

material-ui

enzyme