Почему .simulate ("mouseover") не работает в тесте Jest / Enzyme? - PullRequest
Новая
       137

Почему .simulate ("mouseover") не работает в тесте Jest / Enzyme?

1 голос
/ 24 февраля 2020

У меня есть простой пример Material-UI ListItem, на который я наведу курсор мыши, и Material-UI Popper, содержащий еще один ListItem, затем появляется на событии onMouseOver. Это работает нормально, но я не могу повторить поведение в связанном тесте Jest / Enzyme.

Сокращенный пример с ошибочным тестом здесь.

Edit 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);
  });
});

Ответы [ 2 ]

1 голос
/ 25 февраля 2020

Обновите оболочку перед тем, как действовать

Тесты, проходящие в песочнице здесь: https://codesandbox.io/s/festive-leaf-7ko8v

1 голос
/ 25 февраля 2020

Вы должны взглянуть на эту дискуссию об использовании simulate:

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

Итак, в двух словах, рекомендация не чтобы использовать его вообще, а вместо этого сделать следующее: 

foundListItem.prop('onMouseEnter')();

Вы можете даже передать фиктивное событие в функцию handleMouseEnter следующим образом: 

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

Надеюсь, это поможет!

...