React add data attribute to each render() with component name

Question

To make e2e testing easier I would like to add to each react component data-component= attribute with component name. I would like to have it done "automatically" (without adjusting render() functions everywhere).

Anyone knows how to do it reliably for both class and function based components?

It's difficult to give a clear answer without seeing any code. A couple of ideas pop up in my head. First off, to add attributes like that programatically you would need some event to happen like onChange or whatever and then do something like (event) => event.target.setNamedItem('data-component'), event.target.getNamedItem(''data-component').value = event.target.id (or whatever data is available). A little more info about your problem would be helpful :) — MstrQKN
– MstrQKN, Commented Nov 13, 2019 at 11:36
@MstrQKN I need this to be reliable, so need to be on first render and not async events. I simply want to have easy searching via document.querySelector for react components to aid in writing e2e tests. — Damaon
– Damaon, Commented Nov 13, 2019 at 20:00

Dima Vishnyakov · Accepted Answer · 2019-11-13 12:46:16Z

5

Component name is set via static property displayName for each component. You need to set it manually.

Create hoc (higher order component), to wrap component with div (or any other html tag) which will have required attribute.

const withComponentName(WrappedComponent) => { 
  const displayName = WrappedComponent.displayName || WrappedComponent.name || 'UnnamedComponent';
  return props => (
    <div data-component={displayName}><WrappedComponent {...props} /><div>
  )
}

Wrap all component export statements with created hoc.

export default withComponentName(YourShinyComponent)

edited Nov 13, 2019 at 12:46

answered Nov 13, 2019 at 12:40

Dima Vishnyakov

1,56011 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

parties · Accepted Answer · 2021-08-13 18:01:28Z

1

Another option is to use this Webpack plugin to do it for you:

https://github.com/lemonmade/babel-plugin-react-component-data-attribute

If you're using create-react-app:

If you've ejected already then just follow the docs on the plugin's page ☝️

However, if you have not ejected already, then you can use either of these solutions to customize your build for a create-react-app project:

answered Aug 13, 2021 at 18:01

parties

112 bronze badges

Collectives™ on Stack Overflow

React add data attribute to each render() with component name

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related