使用测试库测试弹出组件以进行反应

Question

I'm using I have a button, which when hovered over, displays a Popover menu. I'm trying to test the existence of some of the components of the Popover menu, but it seems like the Popover menu is not being rendered properly:

// 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();
  });

Answer 1

Late reply but I just ran into a similar issue and I fixed it by using findByText .

So in your case I would change the code to:

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

    // Using the text to select like a user would    
    fireEvent.mouseEnter(getByText("Fruits"));
    expect(await findByText("Banana")).toBeInTheDocument();
  });

Using userEvent from @testing-library/user-event and screen

it("Selects Spot tab and displays it", async () => {
   renderWithProviders(<MarketSelector />); 
   userEvent.hover(screen.getByText("Fruits"));
   expect(await screen.findByText("Banana")).toBeInTheDocument();
});