为什么 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有效

这可能是由于您的应用程序在您断言所有内容都已加载后重新呈现。 希望我能像我必须找到那个简单的事实那样为其他人节省 3 天的痛苦......