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

Question

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)"?

Answer 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

2. Using mouseMove instead of mouseOver event

3. 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))

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