From 4b935ae95f09e4a1eb1e5ac8089eb258222a0f8b Mon Sep 17 00:00:00 2001
From: Rick Hanlon <rickhanlonii@fb.com>
Date: Tue, 28 Jul 2020 13:06:03 -0700
Subject: [PATCH] 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](https://github.com/facebook/react/pull/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       |  2 +-
 .../__snapshots__/Modal-test.js.snap          |  6 ++---
 jest/mockComponent.js                         | 24 +++++++++----------
 3 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/Libraries/Modal/__tests__/Modal-test.js b/Libraries/Modal/__tests__/Modal-test.js
index db45cd2fe6ade9..33cbb19dd50af8 100644
--- a/Libraries/Modal/__tests__/Modal-test.js
+++ b/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 />
diff --git a/Libraries/Modal/__tests__/__snapshots__/Modal-test.js.snap b/Libraries/Modal/__tests__/__snapshots__/Modal-test.js.snap
index 807bc29ca552b9..d6272a92fb5fbe 100644
--- a/Libraries/Modal/__tests__/__snapshots__/Modal-test.js.snap
+++ b/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`] = `
diff --git a/jest/mockComponent.js b/jest/mockComponent.js
index 28e222123961ba..42a30c8c6e68ac 100644
--- a/jest/mockComponent.js
+++ b/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];
   });