Reactjs 如何在jest和测试/库中测试工具提示标题

我想测试工具提示标题是否等于特定文本。 这是我的antd工具提示，我想为此编写一个测试：

<Tooltip
  title={
     this.props.connection ? "Connected" : "Disconnected (Try again)"
         }>
  <Badge status="default" data-testid="connection-sign" />
</Tooltip>

---

但此测试失败，无法找到具有此标题的元素。如何测试工具提示是否包含“断开连接（重试）”？

测试中存在多个错误

将组件类型而不是组件实例传递到

渲染

使用同步方法搜索工具提示而不是异步

综上所述，在修复所有错误后，测试应如下所示：

import React from "react";
import { render, fireEvent } from "@testing-library/react";
import App from "./App";

test("Show error title in tooltip", async () => {
  const baseDom = render(<cardComponent />);

  fireEvent.mouseOver(baseDom.getByTestId("connection-sign"));

  expect(
    await baseDom.findByText("Disconnected (Try again)")
  ).toBeInTheDocument();
});

从“React”导入React；
从“@testing library/react”导入{render，firevent}”；
从“/App”导入应用程序；
测试（“在工具提示中显示错误标题”，异步（）=>{
const baseDom=render（）；
firevent.mouseOver（baseDom.getByTestId（“连接符号”）；
期待(
等待baseDom.findByText（“断开连接（重试）”）
).toBeInTheDocument（）；
});

除了公认的答案之外，重要的是要确保您是否为

Antd

工具提示设置了prop

getPopupContainer

，弹出窗口对于react testing library可能不可见，因为在我的例子中就是这样，因为在测试组件时，DOM容器集可能在主体中不可用，尤其是在单元测试的情况下。e、 g

就我而言，我有

<Popover
   getPopupContainer={() => document.getElementById('post--component-drawer')}
   content={<h1>Hello world</h1>}>
      <span data-testid="symbol-input--color-input">Click me</span>
</Popover>

---

工具提示

组件来自何处？它是定制的还是来自材料用户界面或其他地方？这是来自antd。我打赌工具提示正在渲染，因为我可以使用数据testid找到它。但是我想得到标题文本，并检查它的文本是否与“断开连接”相等。这是我的问题。谢谢。完成并清除：）事实上，该点是“mouseOver”。@Rostyslav我想在取消工具提示后检查工具提示内容是否不在文档中。我发现内容元素仍然存在于dom中。如何处理这种情况？@Subro您可以尝试

等待
此工具提示消失。这里是另一个例子，否则我将不得不查看代码，因为很难说。简而言之，我想知道
waitFor
和
wait
之间的区别。我将尝试使用
waitFor
。
baseDom.getByTitle("Disconnected (Try again)"); // wrong, because, the prop on the Tooltip is called 'title' but it is actually text as 'getByTitle' looks for HTML title attribute

baseDom.getByText("Disconnected (Try again)"); // right, because you are actually looking for text not HTML title attribute (but wrong see (4))

baseDom.getByText("Disconnected (Try again)");  // wrong, because, Tooltip is added dynamically to the DOM

await baseDom.findByText("Disconnected (Try again)"); // right

import React from "react";
import { render, fireEvent } from "@testing-library/react";
import App from "./App";

test("Show error title in tooltip", async () => {
  const baseDom = render(<cardComponent />);

  fireEvent.mouseOver(baseDom.getByTestId("connection-sign"));

  expect(
    await baseDom.findByText("Disconnected (Try again)")
  ).toBeInTheDocument();
});


<Popover
   getPopupContainer={() => document.getElementById('post--component-drawer')}
   content={<h1>Hello world</h1>}>
      <span data-testid="symbol-input--color-input">Click me</span>
</Popover>

jest.mock('antd', () => {
  const antd = jest.requireActual('antd');

  /** We need to mock Popover in order to override getPopupContainer to null. getPopContainer
   * sets the DOM container and if this prop is set, the popup div may not be available in the body
   */
  const Popover = (props) => {
    return <antd.Popover {...props} getPopupContainer={null} />;
  };

  return {
    __esModule: true,
    ...antd,
    Popover,
  };
});


test('popver works', async () => {
  render(<MyComponent/>);
  fireEvent.mouseOver(screen.getByTestId('symbol-input--color-input'));

  await waitFor(() => {
    expect(screen.getByRole('heading', {level: 1})).toBeInTheDocument();
  });
});