为什么 fireEvent 可以工作，而 userEvent 却不能工作？

Question

简而言之，我有一个带有 onclick 事件的表行。我通过以下方式得到这个

const row = screen.getByRole('row', { name: /My row/i })
await userEvent.click(row)

这不会触发事件处理程序。但是，如果我这样做：

const row = screen.getByRole('row', { name: /My row/i })
fireEvent.click(row)

这很好用。

我知道 userEvent 使用更多事件来模拟行单击，但事件处理程序在实时应用程序中也可以正常工作。有什么原因可能userEvent无法工作吗？

Answer 1

就像大多数非常奇怪的事情一样，问题出在其他地方。但出于文档目的，这是由于应用程序在执行我的断言时重新渲染所致。会发生的是这样的：

• 应用程序渲染，进行大量 API 调用
• 我的测试 API 调用完成，比如说，获取用户
• findByText('My User')传递并获取我的 DOM 元素
• 另一个 API 调用完成，重新渲染组件以显示此数据
• 结果findByText不再是当前活动的 DOM 元素
• click火灾
• 由于它不再出现在文档中，因此无法单击/触发事件

在获取我的行之前，我更改了之前的行以检查所有数据加载，并且它似乎始终有效。这意味着我必须断言与我的测试无关的事情，但这可能是因为我的应用程序的用户体验很差，加载时会弹出一些东西？

不管怎样，我不是 100% 确信这是原因，但如果

• userEvent.click没有触发事件，或者
• toBeInTheDocument即使成功了，还是失败findBy了

这可能是由于您断言所有内容均已加载后应用程序重新渲染所致。希望我可以拯救别人三天的痛苦，就像我必须找到这个简单的事实一样......