如何在 jest 和 testing/library 中测试工具提示标题

Question

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

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

这是我开玩笑的测试：

 test("Show error title in tooltip", async () => {
    baseDom = render(cardComponent);
    fireEvent.mouseMove(await baseDom.findByTestId("connection-sign")); //To hover element and show tooltip
    expect(
      baseDom.getByTitle(
        "Disconnected (Try again)"
      )
    ).toBeInTheDocument();
  });

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

Answer 1

你的测试有多个错误。

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

baseDom = render(cardComponent); // this is wrong, passing component type
baseDom = render(<cardComponent />); // this is right, passing component instance created with JSX

使用 mouseMove 而不是 mouseOver 事件
按标题搜索元素并传递文本而不是按文本搜索

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

Answer 2

除了已接受的答案外，重要的是要确保您是否为 Antd 工具提示设置了道具 getPopupContainer，弹出窗口可能对 React 测试库不可见，因为它发生在我的情况是因为 DOM 容器集在测试组件时可能在主体中不可用，特别是如果它是单元测试。例如

就我而言，我有

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

div post--component-drawer 不适用于该单元测试。所以我不得不模拟 Popover 以确保我将 prop getPopupContainer 覆盖为 null 以便弹出窗口可见

所以在我的测试文件的开头，我嘲笑了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();
  });
});

Answer 3

I was tried many ways but didn't work, therefore I tried mouse enter instead of mouseOver or mouseMove and it's worked for me. here is a solution to test tooltip content, like as:

import { render, cleanup, waitFor, fireEvent, screen } from '@testing-library/react';

// Timeline component should render correctly with tool-tip
test('renders TimeLine component with mouse over(tool-tip)', async () => {

  const { getByTestId, getByText, getByRole } = render(
        <TimeLine
          items={timeLineItems()}
          currentItem={currentTimeLineItem()}
          onTimeLineItemChange={() => {}}
        />
    );

  const courseTitle = "Course collection-3";

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

  await waitFor(() => getByText(courseTitle));
  expect(screen.getByText(courseTitle)).toBeInTheDocument();
});

Answer 4

我发现这是最新的方式。您必须在测试中执行 async() 然后等待 findByRole，因为它不是即时的！

    render(<LogoBar />);
    fireEvent.mouseEnter(screen.getByLabelText('DaLabel'));
    await screen.findByRole(/tooltip/);
    expect(screen.getByRole(/tooltip/)).toBeInTheDocument();

如何在 jest 和 testing/library 中测试工具提示标题

How to test for tooltip title in jest and testing/library

unit-testing

reactjs

jestjs

react-testing-library