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?
