Testing Library userEvent操作滞后，表单填充后校验报错数量不符

核心问题 #

1. 所有userEvent交互未添加await前缀：userEvent v14及以上版本所有交互方法均为异步返回Promise，不加await时代码会直接向后执行，查询DOM时输入、选择操作还未完成，表单状态没有更新，校验逻辑自然不会触发。你注释任意部分操作仍然返回2条错误，本质上就是所有交互操作都没有实际执行，表单一直停留在初始空值状态。
2. 错误节点查询放在了waitFor外部：你在选择操作执行后立刻调用queryAllByText获取了当时的错误节点，后续表单状态更新后这个变量不会自动刷新，waitFor内断言的永远是操作刚执行完时的旧节点长度。

修正后测试代码 #

const title = screen.getByRole('textbox', {name: 'title'})
const kind = screen.getByRole('textbox', {name: 'kind'})
const errors = await screen.findAllByText('Can not be blank!')
expect(errors).toHaveLength(2)

// 所有userEvent操作添加await
await userEvent.type(title, 'abc')
await userEvent.click(kind)
const menuItem = await screen.findByText('first option')
await userEvent.click(menuItem)

// 错误查询放在waitFor内部，每次断言都会重新拉取最新DOM节点
await waitFor(() => {
  const newErrors = screen.queryAllByText('Can not be blank!')
  expect(newErrors).toHaveLength(0)
})

可选排查点 #

如果修正后仍有问题，可以按以下方向排查：

• 确认Yup校验规则和Autocomplete绑定值的格式匹配：如果你给Autocomplete绑定的是完整选项对象，Yup规则要对应校验对象结构；如果绑定的是选项的单个值字段，要对应校验值的类型
• 在waitFor前添加screen.debug()打印DOM，确认Autocomplete选择后对应字段的错误提示确实已从DOM中移除

内容的提问来源于stack exchange，提问作者Burak Gündüz