Popover можно захватить и протестировать при событии щелчка, но не при событии mouseOver. - PullRequest
0 голосов
/ 29 мая 2020

У меня есть компонент Popover, основанный на Popper. js, который отображается при наведении курсора мыши на кнопку. Когда я пытаюсь протестировать его, появляется сообщение об ошибке, в котором говорится, что он не может найти этот элемент, хотя я уверен, что он наводит курсор на этот компонент.

Однако, , если я изменяю компонент, который будет отображаться, когда я нажимаю кнопку вместо этого, и обновляю тест с fireEvent.click до fireEvent.mouseOver, тест успешно проходит.

НЕУДАЧИ ТЕСТИРОВАНИЯ:

<Popover
  popoverClassName="market-selector-popover"
  content={marketMenu}
  interactionKind={PopoverInteractionKind.HOVER}
>
  <AnchorButton
    onMouseEnter={() => console.log("FIRE!")}
    data-testid="market-selector-btn"
    className="market-selector-btn"
    rightIcon="chevron-down"
    text="Button"
  />
</Popover>

it("Selects Spot tab and displays it", () => {
  const { getByTestId, getByText } = renderWithProviders(<MarketSelector />);

  fireEvent.mouseOver(getByTestId("market-selector-btn")); // FIRE!
  expect(getByText("Spot")).toBeInTheDocument();           // FAIL
});

ПРОЙДЕТ ТЕСТ:

<Popover
 popoverClassName="market-selector-popover"
 content={marketMenu}
>
  <AnchorButton
    data-testid="market-selector-btn"
    className="market-selector-btn"
    rightIcon="chevron-down"
    text="Button"
  />
</Popover>

it("Selects Spot tab and displays it", () => {
  const { getByTestId, getByText } = renderWithProviders(<MarketSelector />);

  fireEvent.click(getByTestId("market-selector-btn")); 
  expect(getByText("Spot")).toBeInTheDocument(); 
});
...