React Add Data Attribute To Each Render() With Component Name

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?

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

2. 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>
     )
   }
   

3. Wrap all component export statements with created hoc.

   export default withComponentName(YourShinyComponent)