Ant Design 和 React 测试库

Question

我最近开始使用 Ant Deisgn，并且非常喜欢使用它。

然而，我似乎偶然发现了一个我很难解决的问题。

使用 react-testing-library 进行测试，我在测试一些 Ant Design 组件时遇到了问题。

原因之一是由于某些未知原因，某些组件（例如菜单、Menu.Item、下拉列表等）不呈现自定义属性 data-testid，因此无法定位特定元素DOM.

这会降低测试的性能和准确性。

其他人是否偶然发现了同样的问题？您是如何解决这个问题的？

Ant Design 团队有什么可以解决这个问题的吗？

Answer 1

data-testid 属性可配置为您想要的任何属性。

此外，只要您选择的库具有 ID 属性，您就可以执行以下操作：

  const {container} = render(<Foo />) ;
  const button = container.querySelector('#idValue'); // returns react element
  fireEvent.click(button);

P. S：移动编辑。请忽略格式

Ant Design and React Testing Library