[BUG] jest/testing-library Tests are breaking and tooltip content is not shown #1082
Description
Bug description
Jest tests are breaking and the tooltip is sometimes visible and sometimes not, when clicked with user-event. This makes our snapshot and text selector tests not working properly.
But I get an error from testing-library
Unable to find role="tooltip"
Ignored nodes: comments, script, style
Version of Package
5.20.0
To Reproduce
The component
import React, { useId } from "react";
import dayjs from "dayjs";
import { type ForecastAstronomy } from "../[...]/types/astronomy";
import { Tooltip } from "react-tooltip";
import { CloseButton, Grid, TooltipReference } from "./styles";
export type AstronomyTooltipProps = {
astronomy: ForecastAstronomy;
};
export const AstronomyTooltip: React.FC<AstronomyTooltipProps> = ({
astronomy,
}) => {
const id = useId();
const tooltipId = `astronomy-tooltip-${id}`;
return (
<TooltipReference data-tooltip-id={tooltipId} role="button">
{typeof astronomy.moonphase.value === "number" ? (
<span
className={`icon-moonphase-${astronomy.moonphase.value}`}
/>
) : null}
{astronomy.moonphase.text}
<span className="icon-help" />
<Tooltip id={tooltipId} place="bottom" openOnClick>
<CloseButton role="button">×</CloseButton>
Astronomie
<Grid>
<div>Mondaufgang:</div>
<div>
{astronomy.moonrise !== null
? `${dayjs(astronomy.moonrise).format("HH:ss")} Uhr`
: null}
</div>
<div>Monduntergang:</div>
<div>
{astronomy.moonset !== null
? `${dayjs(astronomy.moonset).format("HH:ss")} Uhr`
: null}
</div>
<div>Mondphase:</div>
<div>{astronomy.moonphase.text}</div>
<div>Tierkreiszeichen:</div>
<div>{astronomy.moonzodiac.text}</div>
</Grid>
</Tooltip>
</TooltipReference>
);
};The jest test
import forecastWeatherNearbyResponse from "../[...]/mockedResponses/forecastWeatherNearby.json";
import { render, waitFor } from "@testing-library/react";
import { AstronomyTooltip } from "./index";
import userEvent from "@testing-library/user-event";
describe("AstronomyTooltip", () => {
const astronomyData = {
...forecastWeatherNearbyResponse.data.items[0].summary.astronomy,
};
test("component should display astronomy data when button is clicked", async () => {
const wrapper = await render(
<AstronomyTooltip astronomy={astronomyData} />
);
const user = userEvent.setup();
await user.click(wrapper.getByRole("button"));
await waitFor(async () => {
expect(wrapper.getByRole("tooltip")).toBeInTheDocument();
expect(await wrapper.findByText(/Astronomie/)).toBeInTheDocument();
expect(await wrapper.findByText(/Mondaufgang/)).toBeInTheDocument();
expect(
await wrapper.findByText(/Monduntergang/)
).toBeInTheDocument();
expect(await wrapper.findByText(/Mondphase/)).toBeInTheDocument();
expect(
await wrapper.findByText(/Tierkreiszeichen/)
).toBeInTheDocument();
expect(wrapper).toMatchSnapshot();
});
});
});Expected behavior
Tests should be always working
Smartphone (please complete the following information if possible or delete this section):
- Frameworks Next.js 13
Additional context
n/a