react-tooltip icon indicating copy to clipboard operation
react-tooltip copied to clipboard

Test tooltip with react-testing-libarary

Open OriAmir opened this issue 3 years ago • 4 comments

HI, it looks like we cant test the tooltip with react-testing-libarary.

Test:

  test("tooltip, async () => {
    render(
      <>
        <span data-for={"test-id"} data-tip={"tooltip data"}>
          click to see tooltip
        </span>
        <ReactTooltip id={"test-id"} delayHide={50000} />
      </>
    );
    fireEvent.mouseOver(screen.getByText("click to see tooltip"));

    await waitFor(() => {
      expect(screen.getByText("tooltip data")).toBeInTheDocument();
    });
  });

It's failed to find the tooltip data text after the mouseover event. From the error it looks like it's really not rendering to the screen, that's how the DOM looks like:

<body>
  <div>
    <span
      currentitem="false"
      data-for="test-id"
      data-tip="tooltip data"
    >
      click to see tooltip
    </span>
    <div
      class="__react_component_tooltip tf13f33d3-5f4f-4b89-81bb-68884c2cec7d place-top type-dark"
      data-id="tooltip"
      id="test-id"
    >
      <style
        aria-hidden="true"
      >
        
  	.tf13f33d3-5f4f-4b89-81bb-68884c2cec7d {
	    color: #fff;
	    background: #222;
	    border: 1px solid transparent;
  	}

  	.tf13f33d3-5f4f-4b89-81bb-68884c2cec7d.place-top {
        margin-top: -10px;
    }
    .tf13f33d3-5f4f-4b89-81bb-68884c2cec7d.place-top::before {
        border-top: 8px solid transparent;
    }
    .tf13f33d3-5f4f-4b89-81bb-68884c2cec7d.place-top::after {
        border-left: 8px solid transparent;
        border-right: 8px solid transparent;
        bottom: -6px;
        left: 50%;
        margin-left: -8px;
        border-top-color: #222;
        border-top-style: solid;
        border-top-width: 6px;
    }

    .tf13f33d3-5f4f-4b89-81bb-68884c2cec7d.place-bottom {
        margin-top: 10px;
    }
    .tf13f33d3-5f4f-4b89-81bb-68884c2cec7d.place-bottom::before {
        border-bottom: 8px solid transparent;
    }
    .tf13f33d3-5f4f-4b89-81bb-68884c2cec7d.place-bottom::after {
        border-left: 8px solid transparent;
        border-right: 8px solid transparent;
        top: -6px;
        left: 50%;
        margin-left: -8px;
        border-bottom-color: #222;
        border-bottom-style: solid;
        border-bottom-width: 6px;
    }

    .tf13f33d3-5f4f-4b89-81bb-68884c2cec7d.place-left {
        margin-left: -10px;
    }
    .tf13f33d3-5f4f-4b89-81bb-68884c2cec7d.place-left::before {
        border-left: 8px solid transparent;
    }
    .tf13f33d3-5f4f-4b89-81bb-68884c2cec7d.place-left::after {
        border-top: 5px solid transparent;
        border-bottom: 5px solid transparent;
        right: -6px;
        top: 50%;
        margin-top: -4px;
        border-left-color: #222;
        border-left-style: solid;
        border-left-width: 6px;
    }

    .tf13f33d3-5f4f-4b89-81bb-68884c2cec7d.place-right {
        margin-left: 10px;
    }
    .tf13f33d3-5f4f-4b89-81bb-68884c2cec7d.place-right::before {
        border-right: 8px solid transparent;
    }
    .tf13f33d3-5f4f-4b89-81bb-68884c2cec7d.place-right::after {
        border-top: 5px solid transparent;
        border-bottom: 5px solid transparent;
        left: -6px;
        top: 50%;
        margin-top: -4px;
        border-right-color: #222;
        border-right-style: solid;
        border-right-width: 6px;
    }
  
      </style>
    </div>
  </div>
</body>

Any ideas? thanks!

OriAmir avatar Aug 23 '21 09:08 OriAmir

Hi @OriAmir !

I can test my tooltip with User Event library.

I added a tooltip role in the ReactTooltip component to make it more accessible. There is my sample test:

// Component.tsx
···
<ReactTooltip effect="solid" role="tooltip" />
// Component.test.tsx

import userEvent from "@testing-library/user-event";
···
  userEvent.hover(screen.getByLabelText("Irrelevant label text"));

  await waitFor(() => {
    expect(screen.getByRole("tooltip", { name: "some_awesome_file.ext", hidden: true })).toBeVisible();
  });

I hope that this helps you!

LissetteIbnz avatar Aug 27 '21 10:08 LissetteIbnz

Thanks @LissetteIbnz ! So basically you say that regular fireEvent not working in this case? interesting why?

OriAmir avatar Aug 29 '21 10:08 OriAmir

I'm sorry, I wouldn't know to say you. I always use this library for user events by default.

LissetteIbnz avatar Aug 29 '21 12:08 LissetteIbnz

Thanks @LissetteIbnz, you saved me a lot of time!!

myugen avatar Aug 01 '22 10:08 myugen

I was stuck at this for hours. @LissetteIbnz Thanks so much.

jv18creator avatar May 16 '23 09:05 jv18creator

Working : )

KlentyVishalM avatar Nov 02 '23 11:11 KlentyVishalM