Jest.js react测试中的waitFor-未输入库

inb24sb2 于 2023-01-18 发布在 Jest

关注(0)|答案(1)|浏览(164)

我正在编写一个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'>&nbsp;{openCloseIcon()}&nbsp;</span>
            </p>

            {/* This is where the minitoc is going to build  */}
            <div id='minitoc_root' title='minitoc root'></div>
        </div>

jestjs

来源：https://stackoverflow.com/questions/75146510/waitfor-in-react-testing-library-not-entered

1条答案

按热度按时间

jgwigjjp1#

这对我很有效

import { useState } from 'react'

const App = () => {
  const [collapsed, setCollapsed] = useState(false)
  const handleOpenClose = () => {
    console.log('open close')
    setCollapsed(!collapsed)
  }

  return (
    <div id="minitoc">
      <p
        title="click here to fold/unfold the mini table of contents"
        onClick={handleOpenClose}
        className="inThisPage"
      >
        openCloseIcon
      </p>
      <div
        id="minitoc_root"
        title="minitoc root"
        style={{ display: collapsed ? 'none' : 'block' }}
      ></div>
    </div>
  )
}

export default App

import { render, screen, waitFor, fireEvent } from '@testing-library/react'
import App from './MiniTock'

test('renders learn react link', async () => {
  render(<App />)
  const inThisPage = screen.getByTitle('click here to fold/unfold the mini table of contents')
  const minitocRoot = screen.getByTitle('minitoc root')
  expect(getComputedStyle(minitocRoot).display).toBe('block') // this triggers an error
  fireEvent.click(inThisPage)
  await waitFor(() => {
    expect(getComputedStyle(minitocRoot).display).toBe('none')
  })
})

赞(0）回复(0）举报 2023-01-18

我来回答

Jest.js react测试中的waitFor-未输入库

1条答案

相关问题

热门标签

最新问答