react-loadable icon indicating copy to clipboard operation
react-loadable copied to clipboard

Add support for adding a displayName property for the returned Loadable component

Open backyardcoder opened this issue 4 years ago • 2 comments

The primary reason to introduce this change is to provide a way to aid the testing of components that consumes a Loadable component. For example:

// In source code file:
const MyComponent = Loadable({
  displayName: 'MyComponent', // same as the import name and guaranteed to be unique in the "sut"
  loader: () => ...,
  loading: () => ...
});

// In test file
import MyComponent from '../my-path';

fakeLoader.withArgs({
   displayName: 'MyComponent',
   loader: sinon.match.func,
   loading: sinon.match.func
}).returns(MyComponent);

With the help of displayName, one can use a package like proxyquire to set up the correct fake loader stub to return expected components.

backyardcoder avatar Mar 09 '20 20:03 backyardcoder

What do you think about adding this support, @jamiebuilds @tajo?

backyardcoder avatar Mar 09 '20 21:03 backyardcoder

It would be super cool to have this as part of the project. For a certain project, I am relying on the component displayName to help pick out certain components from children. Since we have moved to use react-loadable we have not been able to do this.

StefanMcCready avatar Jul 01 '20 18:07 StefanMcCready