时间戳

首页 > 解决方案 > 为什么 .simulate("mouseover") 在 Jest / Enzyme 测试中不起作用？

javascript - 为什么 .simulate("mouseover") 在 Jest / Enzyme 测试中不起作用？

问题描述

我有一个简单的材料 ui 示例ListItem，我将鼠标悬停在该材料上，然后在事件中出现一个Popper包含另一个材料 ui 的材料。这工作正常，但我无法复制相关 Jest/Enzyme 测试中的行为。ListItemonMouseOver

在此处减少测试失败的示例。

编辑 priceless-bose-6hi04

组件片段 

export default function MyPopoutMenu() {
  const [popoverAnchorElement, setPopoverAnchorElement] = useState(null);
  const handleMouseEnter = event => {
    console.log("onMouseEnter - " + event.currentTarget.textContent);
    setPopoverAnchorElement(event.currentTarget);
  };

  const handleClose = (event, index) => {
    console.log("closing");
    setPopoverAnchorElement(null);
  };

  let isPopoverOpen = Boolean(popoverAnchorElement);
  return (
    <div className="App">
      <List style={{ maxWidth: "250px" }}>
        <ListItem button>
          <ListItemIcon>
            <FolderIcon />
          </ListItemIcon>
          <ListItemText onMouseEnter={handleMouseEnter}>
            Hover on me
          </ListItemText>
        </ListItem>
      </List>
      <Popper
        open={isPopoverOpen}
        onClose={handleClose}
        anchorEl={popoverAnchorElement}
        className="popper-item"
      >
        <ListItem button>
          <ListItemIcon>
            <KeyboardArrowRightIcon />
          </ListItemIcon>
          <ListItemText>I Appear</ListItemText>
        </ListItem>
      </Popper>
    </div>
  );
}

测试片段

/** Interaction tests testing user interaction with PilzButton */
test("Check that popover appears on hover", () => {
  const wrapper = mount(<MyPopoutMenu />);
  console.log("wrapper DEBUG - " + wrapper.debug());

  //1. Find the menu item to hover on
  const foundListItem = wrapper
    .find(".MuiListItemText-root")
    .filterWhere(item => item.contains("Hover on me"));
  expect(foundListItem).toHaveLength(1);

  //2. Hover on the item
  foundListItem.prop("onMouseEnter")({
    currentTarget: {
      textContent: "Hover on me"
    }
  });
  act(() => {
    //Now try to find the Popover
    const foundPopoverListItem = wrapper
      .find(".MuiListItemText-root")
      .filterWhere(item => item.contains("I Appear"));

    expect(foundPopoverListItem).toHaveLength(1);
  });
});

标签： javascriptjestjsmaterial-uidom-eventsenzyme

解决方案

你应该看看这个关于使用的讨论simulate：

https://github.com/airbnb/enzyme/issues/1606

因此，简而言之，建议根本不使用它，而是按以下方式操作：

foundListItem.prop('onMouseEnter')();

您甚至可以将模拟事件传递给handleMouseEnter函数，如下所示：

foundListItem.prop('onMouseEnter')({
  currentTarget: {
    textContent: 'I Appear'
  }
});

希望这可以帮助！

推荐阅读