Тестирование компонентов всплывающего окна с помощью библиотеки тестирования для реагирования

Question

Я использую У меня есть кнопка, которая при наведении курсора отображает меню Popover. Я пытаюсь проверить наличие некоторых компонентов меню Popover, но мне кажется, что меню Popover не отображается должным образом:

// Displays market menu popover
const marketMenu: JSX.Element = (
  <Menu>
    <Tabs>
      <Tab id={APPLE} title="Apple" />
      <Tab id={ORANGE} title="Orange" />
      <Tab id={BANANA} title="Banana" />
    </Tabs>
  </Menu>
);
return (
  <Popover
    className="market-selector-popover"
    popoverClassName="market-selector-popover"
    content={marketMenu}
  >
    <AnchorButton
      className="market-selector-btn"
      rightIcon="chevron-down"
      text="Fruits"
    />
  </Popover>
);



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

    fireEvent.mouseEnter(getByRole("button"));

    const { getByText } = within(
      container.querySelector(".market-selector-popover")
    );
    expect(getByText("Banana")).toBeInTheDocument();
  });