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

I want to test that the tooltip title is equal to a specific text or not. This is my antd tooltip I want to write a test for that:

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

and this is my test in jest:

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

but this test failed and unable to find an element with this title. How can I test that my tooltip contain "Disconnected (Try again)"?

reactjsunit-testingjestjsreact-testing-library


Solution 1:[1]

There are multiple mistakes in your test.

  1. Passing component type instead of component instance to render
baseDom = render(cardComponent); // this is wrong, passing component type
baseDom = render(<cardComponent />); // this is right, passing component instance created with JSX

  1. Using mouseMove instead of mouseOver event

  2. Searching element by title and passing text instead of searching by text

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))
  1. Using sync method for Tooltip search instead of async
baseDom.getByText("Disconnected (Try again)");  // wrong, because, Tooltip is added dynamically to the DOM

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

To sum up, with all mistakes fixed the test should look like this:

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

Solution 2:[2]

In addition to the accepted answer, it's important to make sure if you set the prop getPopupContainer for an Antd tooltip, the popup might not be visible to react testing library as it happened in my case since the DOM container set may not be available in the body when testing the component especially if it's a unit test. e.g

In my case I had

<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 was not available for that unit test. So I had to mock Popover to make sure I override prop getPopupContainer to null so that the popup would be visible

So at the beginning of my test file, I mocked 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();
  });
});

Solution 3:[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();
});

Solution 4:[4]

I found this to be the most up to date way. You've got to do async() on the test and then await a findByRole since it isn't instantaneous!

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Rostyslav
Solution 2 theTypan
Solution 3 Akshay Pal
Solution 4 httpete

Related Questions