React-testing-library getByRole 执行速度非常慢

Question

我们注意到我们的单元测试执行速度非常慢，罪魁祸首似乎是getByRole查询按钮元素等。以下是今天给我们带来问题的查询示例：

userEvent.click(screen.getAllByRole('button', { name: 'Accept' })[0]);

我们console.time()测量该查询的执行时间为 12782 毫秒。切换到getByText查询后需要 14 毫秒，这意味着getByRole花费了近 1000 倍的时间（!!!）。

我知道getByRole预计会运行得更慢，但这似乎有些极端。我在网上找到了一些线程，详细说明了某些测试如何花费了 5 倍的时间，但没有像这样的。作为选项添加hidden: true会加快速度，但速度不会太快。

我无法共享正在测试的代码，因为它是私有的。我不会将该组件描述为特别复杂，尽管它由一些较低级别的组件组成并使用模拟的网络请求。

是否有任何已知的原因导致像这样的查询运行缓慢，或者我们有什么方法可以在不牺牲所提供的信心的情况下加快执行速度getByRole？

Answer 1

查询getByRole需要遍历整个可访问性树并进行可见性检查（就可访问性而言），这涉及到不可忽略的样式计算和aria-*计算。

这里也讨论了缓慢的情况https://github.com/testing-library/dom-testing-library/issues/552#issuecomment-625172052

我认为这是黑白信心（相信您的页面可访问）和测试速度的权衡。

一种加快速度的快速方法是配置defaultHidden测试库配置，我看到速度提高了约 4 倍，但这又是一种权衡，因为它不检查可访问性树中的目标元素可见性。