如何使用 react-testing-library 测试 React 列表项移动

Question

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

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设置数据成功，但最后一次断言失败。我知道重新渲染会花费时间，但我也注意到 @testing-library/react 已为其渲染 api 包装了 act。在搜索 github 个问题和 Whosebug 之后，我仍然卡在这个测试用例中。

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

Answer 1

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

如何使用 react-testing-library 测试 React 列表项移动

How to test react list item move with react-testing-library

react-testing-library