时间戳

首页 > 解决方案 > 使用测试库测试弹出组件以进行反应

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

问题描述

我正在使用我有一个按钮，将鼠标悬停在该按钮上时，会显示一个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();
  });

标签： reactjsreact-testing-library

解决方案

回复晚了，但我刚刚遇到了类似的问题，我使用findByText.

因此，在您的情况下，我会将代码更改为：

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

使用userEvent来自 @testing-library/user-event 和screen

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

推荐阅读