为什么 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 天的痛苦......