Unable to render react-tooltip v5 using React Testing Library

Question

With prior versions of react-tooltip, I was able to simply render the tooltip without even having to trigger a user interaction, with v5.28, even with userEvents, I am still unable to get the tooltip div to appear.

  it('should render tooltip', async () => {
const user = userEvent.setup();

const SampleComponent = () => (
  <>
    <div
      data-tooltip-id="sample-tooltip"
      data-tooltip-content="Test Tooltip popup"
      role="button"
      data-testid="sample-field-help"
    >
      Tooltip Content
    </div>
    <ReactTooltip
      id="sample-tooltip"
      role="tooltip"
      delayShow={100}
      clickable
      globalCloseEvents={{ clickOutsideAnchor: true, scroll: true }}
      openOnClick
      render={
        dataTip => (
          <div className="tooltip-content" data-testid="tooltip-content">
            <div className="tooltip-text" data-testid="tooltip-text">
              {dataTip.content}
            </div>
          </div>
        )
      }
    />
  </>
);

render(<SampleComponent />);
const anchorElement = screen.getByTestId('sample-field-help');
await user.click(anchorElement);

// none of the below works
// await user.hover(anchorElement);
// await userEvent.dblClick(anchorElement);

screen.debug()
  });

The issue was solved, but the initial debug rendered just the sibling div. — fernando91
– fernando91, Commented Jan 23 at 3:31

fernando91 · Accepted Answer · 2025-01-23 03:30:51Z

0

Mocking window.ResizeObserver caused the tooltip to render.

 window.ResizeObserver =
  window.ResizeObserver ||
  jest.fn().mockImplementation(() => ({
    disconnect: jest.fn(),
    observe: jest.fn(),
    unobserve: jest.fn(),
  }));

answered Jan 23 at 3:30

fernando91

131 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Unable to render react-tooltip v5 using React Testing Library

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related