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

【问题标题】：How to test react list item move with react-testing-library如何使用 react-testing-library 测试反应列表项的移动
【发布时间】：2020-07-23 06:58:27
【问题描述】：

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

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失败。我知道 react 重新渲染需要时间，但我也注意到 @testing-library/react 已经为它的渲染 api 包装了 act。在搜索了github问题和stackoverflow之后，我仍然卡在这个测试用例中。

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

【问题讨论】：

标签： react-testing-library

【解决方案1】：

li 的顺序发生了变化，但您并未断言新结构。在单击事件之后执行另一个 screen.getAllByLabelText('li') 并对其进行断言。

【讨论】：