我正在编写一个react组件的测试。当我点击该组件时,它的内容会被隐藏。下面是测试代码:
it('Click to hide minitoc root', async () => {
const { app } = render(<App />);
const inThisPage = screen.getByTitle('click here to fold/unfold the mini table of contents')
const minitocRoot = screen.getByTitle('minitoc root')
// console.log(inThisPage) // shows <ref *1> HTMLDivElement {...
// console.log( minitocRoot) // shows <ref *1> HTMLParagraphElement {...
fireEvent.click(inThisPage)
console.log('aaaaaa')
await waitFor(() => {
()=> {
console.log('rrrrrrrrrrrrrrrrrr') // this never shows
expect(getComputedStyle(minitocRoot).display).toBe('none')
}
}
);
expect(getComputedStyle(minitocRoot).display).toBe('none') // this triggers an error
console.log('zzzzzz')
});
代码似乎从未进入waitFor部分。console.log('rrrrrrrrrrrrrrrrrr')
从未显示。
- 如果省略第二个expect,测试就会通过。
- 如果我包含第二个expect,则测试失败(期望“block”,而不是“none”)
inThisPage是一个JSX div标记,minitocRoot是一个JSX p标记(使用console.log验证)
下面是该组件的JSX代码:
<div
id='minitoc'
className={foldedOrNotCSS()}
style={{ width: widthInPageForToc - 20 }}
>
{/* These p tags are hidden, they are like a message board to pass values from React to jQuery */}
<p id='contentSelector' className='passValueFromReactToJquery'>
{contentSelector}
</p>
<p id='levelsToShow' className='passValueFromReactToJquery'>
{levelsToShow}
</p>
<p id='widthInPageForToc' className='passValueFromReactToJquery'>
{widthInPageForToc}
</p>
<p id='tagsToHideToc' className='passValueFromReactToJquery'>
{JSON.stringify(tagsToHideToc)}
</p>
{/* The "In this page" header of the minitoc, where the user clicks to fold/unfold */}
<p
title='click here to fold/unfold the mini table of contents'
onClick={handleOpenClose}
className='inThisPage'
>
In this page:{' '}
<span className='openCloseIcon'> {openCloseIcon()} </span>
</p>
{/* This is where the minitoc is going to build */}
<div id='minitoc_root' title='minitoc root'></div>
</div>
1条答案
按热度按时间jgwigjjp1#
这对我很有效