score:26

Accepted answer

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

score:1

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

score:2

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

score:4

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

Related Query

More Query from same tag