Connected components loses its original name

[andolf]

It seems that connecting a component will mean that it loses its original name. Down below is a test case where I was able to reproduce it.

it('should not affect display name', () => {
  const Child = () => <div>Foo</div>;
  const ConnectedChild = connect(Object)(Child);
  expect(Child.name).toEqual('Child');
  expect(ConnectedChild.name).toEqual('Child'); // becomes "Wrapper"
});

The reason this is a problem for us is because we're using shallow render in some test cases to only render a certain amount of levels of depth to verify that a correct component was mounted, but unfortunately the name is lost unless we explicitly set displayName on the connected component before exporting and rendering it.

EDIT: Forgot to mention that is using Preact.

[orzechowskid]

I think that losing the original name of the component is to be expected, since connect returns a higher-order component. However, setting a displayName of "Wrapper" for every connected component doesn't seem great.

It's pretty easy to set the displayName of the Wrapper HOC to something more useful:

--- a/src/integrations/preact.js
+++ b/src/integrations/preact.js
@@ -43,6 +43,7 @@ export function connect(mapStateToProps, actions) {
                        };
                        this.render = props => h(Child, assign(assign(assign({}, boundActions), props), state));
                }
+               Wrapper.displayName = `connect(${Child.displayName || Child.name})`;
                return (Wrapper.prototype = new Component()).constructor = Wrapper;
        };
 }

But this causes an integration test to fail since unistore now compiles to a file which is larger than the 750B threshold specified by the test, so I don't know if I should open a PR or not (or even if this is the preferred approach to solve the problem).