У меня есть компонент 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();
});