react-tooltip
react-tooltip copied to clipboard
Test tooltip with react-testing-libarary
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!
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!
Thanks @LissetteIbnz !
So basically you say that regular fireEvent
not working in this case? interesting why?
I'm sorry, I wouldn't know to say you. I always use this library for user events by default.
Thanks @LissetteIbnz, you saved me a lot of time!!
I was stuck at this for hours. @LissetteIbnz Thanks so much.
Working : )