React Tooltip测试用例失败原因及通过所需修改方案咨询

手动hover图标后，在元素检查中能看到id为doc_entry的div，但编写测试用例时断言失败，无法校验tooltip内的内容。相关代码如下：

测试代码 #

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() // 此处断言失败
    expect(tooltip).toHaveTextContent(/doc_entry/i)
  })
})

ToolTip组件代码 #

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

核心问题是react-tooltip会将tooltip元素渲染到全局document.body中，而非组件的container内部，导致用container.querySelector无法定位到目标元素。可通过以下修改让测试通过：

• 替换查找方式：用document.querySelector替代container.querySelector来定位tooltip元素
• 添加测试清理：测试结束后触发鼠标移出事件，移除tooltip，避免影响其他测试用例

修改后的测试代码：

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 = document.querySelector('#doc_entry')
    expect(tooltip).toBeInTheDocument()
    expect(tooltip).toHaveTextContent(/doc_entry/i)
  })

  // 测试后清理tooltip
  fireEvent.mouseOut(labelElement)
  await waitFor(() => {
    const tooltip = document.querySelector('#doc_entry')
    expect(tooltip).not.toBeInTheDocument()
  })
})

内容的提问来源于stack exchange，提问作者Chandler Bing