React 测试库 id 而不是 data-testid？

Question

id如果我使用 HTML属性而不是像这样的数据属性会有什么不同吗data-testid？

data-testid测试中使用参考：

https://testing-library.com/docs/queries/bytesid/

Answer 1

从表面上看，我没有看到任何技术差异。

但就可读性而言，data-testid其他开发人员可能会注意到这是专门用于测试用例的，而id可能是在样式方面。

id如果实现发生变化，或者选择器也class可以更频繁地更改。

参考：

使您的 UI 测试能够适应变化

Answer 2

id区分测试和常规测试至少有两个原因。如果他们都不关心你（以及将使用和维护该项目的人），那么你不会感觉有什么不同。

1. 组件复用

React 组件重用是该框架的核心概念之一。一般来说，组件可以在一个页面/视图中出现多次。这很容易导致id重复，进而有可能破坏页面进一步处理的逻辑。没有人喜欢重复的 ID。

2. 清理生产代码

data-testid在发布包之前使用任何删除属性的方法都很简单。但是，当您将测试 ID 保留在常规字段中时，很难确定您没有清除其他开发人员依赖的任何内容id。