Show wrapped component in displayName

Author: sheepsteak

src/__tests__/__snapshots__/index.js.snap

@@ -7,12 +7,12 @@ exports[`perf higher-order component does not wrap the passed in component when
 `;
 
 exports[`perf higher-order component wraps the passed in component when not in production 1`] = `
-<Perf
+<perf(MyComp)
   testProp="1">
   <MyComp
     testProp="1">
     <div
       className="my-comp" />
   </MyComp>
-</Perf>
+</perf(MyComp)>
 `;

src/__tests__/index.js

@@ -33,6 +33,13 @@ describe('perf higher-order component', () => {
     expect(toJson(result)).toMatchSnapshot();
   });
 
+  it('shows wrapped component in displayName', () => {
+    const MyComp = () => <div className="my-comp" />;
+    const MyCompPerf = perf(MyComp);
+
+    expect(MyCompPerf.displayName).toContain(MyComp.name);
+  });
+
   it('starts ReactPerf on mount', () => {
     const MyComp = () => <div className="my-comp" />;
     const MyCompPerf = perf(MyComp);

src/index.js

@@ -39,5 +39,6 @@ export default function perf(Target) {
     }
   }
 
+  Perf.displayName = `perf(${Target.displayName || Target.name || 'Component'})`;
   return Perf;
 }