如何自动为React中的所有元素添加唯一的数据属性？

Question

我正在使用 Selenium IDE 测试我的 React 应用程序，并希望向所有元素添加唯一的 ID（例如“data-testid”），以便我能够轻松选择它们。

到目前为止，我遇到了通过添加一些代码（例如react-html-id）来实现这一点的库，但我正在寻找一种在构建时自动添加这些数据属性的解决方案。

例如：

给定一个组件

<SomeComponent /> // returns <span>Hello World<span>

构建 React 应用程序时，结果应该是：

<span data-testid="123">Hello World</span>