时间戳

首页 > 解决方案 > 如何使用 react-testing-library 测试反应列表项的移动

react-testing-library - 如何使用 react-testing-library 测试反应列表项的移动

问题描述

尝试测试一个呈现字符串列表的简单组件，单击时每个项目都会移到顶部。

const Component = p => {
  const [data, setData] = React.useState(p.data)
  const moveToTop = from => {
    const nextData = [...data]
    const target = nextData.splice(from, 1)[0]
    nextData.unshift(target)
    setData(nextData)
  }
  console.log(data, 'data')
  return (
    <ul>
      {data.map((d, i) => (
        <li
          aria-label="li"
          key={d}
          onClick={() => {
            moveToTop(i)
          }}
        >
          {d}
        </li>
      ))}
    </ul>
  )
}

// ... test ...

test('move element', async () => {
  render(<Component data={['a', 'b', 'c']} />)
  const liArr = screen.getAllByLabelText('li')
  expect(liArr.length).toBe(3)
  expect(liArr[0].textContent).toBe('a')
  fireEvent.click(liArr[2])
  expect(liArr[0].textContent).toBe('c')
})

在codesandbox中，log显示clickEvent设置数据成功，但最后一次assert失败。我知道反应重新渲染需要时间，但我也注意到它的渲染 api@testing-library/react已经包装好了。act在搜索 github 问题和 stackoverflow 之后，我仍然卡在这个测试用例中。

需要您的帮助，任何文档和示例都有意义，谢谢！

标签： react-testing-library

解决方案

顺序发生了li变化，但您没有断言新结构。在点击事件之后再做一次screen.getAllByLabelText('li')并断言。

推荐阅读