添加唯一的数据属性以使用 webpack 来响应 dom 元素进行开发

Question

I am looking to add a certain data attribute to all my DOM elements on react for example

 <input
            hidden={this.props.hidden}
            // auto attribute
            data-testid={'uniqueAttribute45454'}
          />

I want this data-testid followed by a unique string for all my DOM elements (input, dropdown, checkbox) . I want to do this via webpack so that I can segregate my webpack dev and webpack prod (I want this on dev only). Any webpack plugins available for this? I have been researching for quite a while but haven't found anything.

Answer 1

I've found a Babel plugin that you can use:

https://github.com/shawnxusy/babel-plugin-react-generate-property

Readme says:

A plugin to automatically generate and add properties (for example data attributes) for all JSX open tags, especially styled components (Emotion, Styled Components, etc)

Exactly what I was looking for!