时间戳

首页 > 解决方案 > Ant 设计和 React 测试库

reactjs - Ant 设计和 React 测试库

问题描述

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

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

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

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

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

其他人是否偶然发现了同样的问题？你是怎么解决这个问题的？

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

标签： reactjsunit-testingtestingantdreact-testing-library

解决方案

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

https://testing-library.com/docs/dom-testing-library/api-configuration

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

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

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

推荐阅读