Ant 设计和 React 测试库答案

【问题标题】：Ant Design and React Testing LibraryAnt 设计和 React 测试库
【发布时间】：2020-01-31 12:20:08
【问题描述】：

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

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

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

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

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

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

对于这个问题，Ant Design 团队有什么可以做的吗？

【问题讨论】：

【解决方案1】：

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

另外，只要你选择的库，有 ID 属性，你可以做到以下几点：

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

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

【讨论】：

我知道data-testid 是可配置的，问题不在于data-testid 的配置。问题是来自 Ant Design 库的组件将呈现 data-testid 而其他一些则不会。我觉得这很奇怪，我想知道为什么或可以立即做些什么......
我已经解释了如何获得它。你注意到了吗？使用上面容器中的查询选择器。
@AKFourSeven 这个问题解决了吗，如果解决了，请标记为答案。
我忘记了这篇文章，就像我说这不是问题一样，id 永远不会传递给渲染的组件，所以没有多少 data-test-id 或任何其他名称给 id 会改变这一点。实际上没有直接的解决方案，我们还是停止使用 Ant Design。但是，有些人认为您的答案相关（因为通常这正是应该做的）所以我会标记它！