why react tooltip test case fails?

Question

Checkout the codesandbox

Hover on the icon and inspect element, you'll see a div with an id of doc_entry, but this fails when I write test for it.

it('render tooltip content', async () => {
  const {container} = render(<ToolTip />)

  const labelElement = container.querySelector(
    `span[data-tooltip-id="doc_entry"]`,
  )
  expect(labelElement).toBeInTheDocument()

  fireEvent.mouseOver(labelElement)

  await waitFor(() => {
    const tooltip = container.querySelector('#doc_entry')
    expect(tooltip).toBeInTheDocument() // Fails here
    expect(tooltip).toHaveTextContent(/doc_entry/i)
  })
})

ToolTip component

import {Tooltip as ReactTooltip} from 'react-tooltip'

const ToolTip = () => {
  return (
    <>
      <h1>
        Hover =>
        <span data-tooltip-id="doc_entry" role="img" aria-label="goat">
          
        </span>
      </h1>
      <ReactTooltip tabIndex="-1" id={'doc_entry'} place="bottom">
        doc_entry
      </ReactTooltip>
    </>
  )
}

export default ToolTip

What changes are requried to pass this test and check the content inside of the tooltip?

Answer 1

Fixed here at react-tooltip issues: https://github.com/ReactTooltip/react-tooltip/issues/716#issuecomment-907109769