React测试库：测试布尔状态

Question

我目前正在使用Testing-library/React软件包编写测试。

在我的测试的第二次点击中，文本不应在文档中，而应在文档中。

这是我正在测试的组件：

import { useState } from 'react'
import { InfoType } from '../../constants'

type Props = {
    type: InfoType
}

const HelpWidget = ({ type }: Props) => {
    const [isHover, setHover] = useState<boolean>(false)

    return (
        <div className="help-widget">
            <img
                src={require('../../../public/images/info.svg')}
                onMouseEnter={() => setHover(true)}
                onMouseOut={() => setHover(false)}
                onClick={() => setHover(!isHover)}
            />
            {isHover ? <div className="info">{type}</div> : <div></div>}
        </div>
    )
}

export default HelpWidget

这是我写的测试：

import React from 'react'
import { screen, render, waitFor } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import HelpWidget from '../components/helpWidget/helpWidget'


// Testing if the HelpWidget conditionally renders based on the isHover boolean state.
test('helpWidget conditionally renders to the page', () => {
    const epk4Post = 'Select a persona to post this'
    render(<HelpWidget type={epk4Post} />)
    const imageElement = screen.getByRole("img")
    userEvent.click(imageElement)
    screen.debug()
    expect(screen.getByText(/select a persona to post this/i)).toBeInTheDocument()
    userEvent.click(imageElement)
    screen.debug()
});

这是我运行screen.debug（）查看DOM输出时得到的。在这里，您可以清楚地看到，在第二次单击时，当文档应 不是 BE时，文本仍在文档中。

请分享您的想法！谢谢。