Correctly mock all components by setting the displayName

Summary:
In the next react sync we removed the `displayName` from forwardRef and useMemo components ([PR here](facebook/react#18495 )).

This means we need to manually add the displayName in the mock.

Changelog: [General] [Fixed] Fix test renderer mocks to use the displayName more often.

Reviewed By: TheSavior

Differential Revision: D22775470

fbshipit-source-id: 1390dc325e34f7ccea32bbdf1c6a8f6efea3a080

Libraries/Modal/__tests__/Modal-test.js

@@ -27,7 +27,7 @@ describe('<Modal />', () => {
     expect(instance).toMatchSnapshot();
   });
 
-  it('should shallow render as <Component> when mocked', () => {
+  it('should shallow render as <Modal> when mocked', () => {
     const output = render.shallow(
       <Modal>
         <View />

Libraries/Modal/__tests__/__snapshots__/Modal-test.js.snap

@@ -61,13 +61,13 @@ exports[`<Modal /> should render as <RCTModalHostView> when not mocked 1`] = `
 </RCTModalHostView>
 `;
 
-exports[`<Modal /> should shallow render as <Component> when mocked 1`] = `
-<Component
+exports[`<Modal /> should shallow render as <Modal> when mocked 1`] = `
+<Modal
   hardwareAccelerated={false}
   visible={true}
 >
   <View />
-</Component>
+</Modal>
 `;
 
 exports[`<Modal /> should shallow render as <Modal> when not mocked 1`] = `

jest/mockComponent.js

@@ -16,17 +16,19 @@ module.exports = (moduleName, instanceMethods) => {
   const SuperClass =
     typeof RealComponent === 'function' ? RealComponent : React.Component;
 
+  const name =
+    RealComponent.displayName ||
+    RealComponent.name ||
+    (RealComponent.render // handle React.forwardRef
+      ? RealComponent.render.displayName || RealComponent.render.name
+      : 'Unknown');
+
+  const nameWithoutPrefix = name.replace(/^(RCT|RK)/, '');
+
   const Component = class extends SuperClass {
     static displayName = 'Component';
 
     render() {
-      const name =
-        RealComponent.displayName ||
-        RealComponent.name ||
-        (RealComponent.render // handle React.forwardRef
-          ? RealComponent.render.displayName || RealComponent.render.name
-          : 'Unknown');
-
       const props = Object.assign({}, RealComponent.defaultProps);
 
       if (this.props) {
@@ -42,14 +44,12 @@ module.exports = (moduleName, instanceMethods) => {
         });
       }
 
-      return React.createElement(
-        name.replace(/^(RCT|RK)/, ''),
-        props,
-        this.props.children,
-      );
+      return React.createElement(nameWithoutPrefix, props, this.props.children);
     }
   };
 
+  Component.displayName = nameWithoutPrefix;
+
   Object.keys(RealComponent).forEach(classStatic => {
     Component[classStatic] = RealComponent[classStatic];
   });