From 5d61eee4bcd05738f90ee8f2751e99d19086e033 Mon Sep 17 00:00:00 2001
From: Gustavo Bastos <me@gustavovinicius.com>
Date: Mon, 10 Jun 2019 13:37:38 +0200
Subject: [PATCH 1/2] Render custom displayName of memoized components

---
 CHANGELOG.md                                        |  1 +
 packages/pretty-format/src/__tests__/react.test.tsx | 10 ++++++++++
 packages/pretty-format/src/plugins/ReactElement.ts  |  3 ++-
 3 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index d3e3025a0511..13b20390b701 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,7 @@
 - `[expect]` Highlight substring differences when matcher fails, part 1 ([#8448](https://github.com/facebook/jest/pull/8448))
 - `[jest-cli]` Improve chai support (with detailed output, to match jest exceptions) ([#8454](https://github.com/facebook/jest/pull/8454))
 - `[*]` Manage the global timeout with `--testTimeout` command line argument. ([#8456](https://github.com/facebook/jest/pull/8456))
+- `[pretty-format]` Render custom displayName of memoized components
 
 ### Fixes
 
diff --git a/packages/pretty-format/src/__tests__/react.test.tsx b/packages/pretty-format/src/__tests__/react.test.tsx
index 6cce0ca290bc..b6da583308ef 100644
--- a/packages/pretty-format/src/__tests__/react.test.tsx
+++ b/packages/pretty-format/src/__tests__/react.test.tsx
@@ -732,6 +732,16 @@ test('supports memo with a child', () => {
   ).toEqual('<Memo(Dog)>\n  cat\n</Memo(Dog)>');
 });
 
+test('supports memo with displayName', () => {
+  const Foo = () => React.createElement('div');
+  const MemoFoo = React.memo(Foo);
+  MemoFoo.displayName = 'MyDisplayName(Foo)';
+
+  expect(formatElement(React.createElement(MemoFoo, null, 'cat'))).toEqual(
+    '<Memo(MyDisplayName(Foo))>\n  cat\n</Memo(MyDisplayName(Foo))>',
+  );
+});
+
 test('supports context Provider with a child', () => {
   const {Provider} = React.createContext('test');
 
diff --git a/packages/pretty-format/src/plugins/ReactElement.ts b/packages/pretty-format/src/plugins/ReactElement.ts
index 5963a408c03c..75b2d7cfe0c5 100644
--- a/packages/pretty-format/src/plugins/ReactElement.ts
+++ b/packages/pretty-format/src/plugins/ReactElement.ts
@@ -61,7 +61,8 @@ const getType = (element: any) => {
     }
 
     if (ReactIs.isMemo(type)) {
-      const functionName = type.type.displayName || type.type.name || '';
+      const functionName =
+        type.displayName || type.type.displayName || type.type.name || '';
 
       return functionName !== '' ? 'Memo(' + functionName + ')' : 'Memo';
     }

From 474fc07631f947fbafee6c33926ee86bcf79af14 Mon Sep 17 00:00:00 2001
From: Gustavo Bastos <me@gustavovinicius.com>
Date: Tue, 11 Jun 2019 10:47:02 +0200
Subject: [PATCH 2/2] Add more test cases for memoized displayName

---
 .../src/__tests__/react.test.tsx              | 47 +++++++++++++------
 1 file changed, 32 insertions(+), 15 deletions(-)

diff --git a/packages/pretty-format/src/__tests__/react.test.tsx b/packages/pretty-format/src/__tests__/react.test.tsx
index b6da583308ef..e8711da2ea44 100644
--- a/packages/pretty-format/src/__tests__/react.test.tsx
+++ b/packages/pretty-format/src/__tests__/react.test.tsx
@@ -722,24 +722,41 @@ test('supports forwardRef with a child', () => {
   ).toEqual('<ForwardRef(Cat)>\n  mouse\n</ForwardRef(Cat)>');
 });
 
-test('supports memo with a child', () => {
-  function Dog(props: any) {
-    return React.createElement('div', props, props.children);
-  }
+describe('React.memo', () => {
+  describe('without displayName', () => {
+    test('renders the component name', () => {
+      function Dog(props: any) {
+        return React.createElement('div', props, props.children);
+      }
+
+      expect(
+        formatElement(React.createElement(React.memo(Dog), null, 'cat')),
+      ).toEqual('<Memo(Dog)>\n  cat\n</Memo(Dog)>');
+    });
+  });
 
-  expect(
-    formatElement(React.createElement(React.memo(Dog), null, 'cat')),
-  ).toEqual('<Memo(Dog)>\n  cat\n</Memo(Dog)>');
-});
+  describe('with displayName', () => {
+    test('renders the displayName of component before memoizing', () => {
+      const Foo = () => React.createElement('div');
+      Foo.displayName = 'DisplayNameBeforeMemoizing(Foo)';
+      const MemoFoo = React.memo(Foo);
 
-test('supports memo with displayName', () => {
-  const Foo = () => React.createElement('div');
-  const MemoFoo = React.memo(Foo);
-  MemoFoo.displayName = 'MyDisplayName(Foo)';
+      expect(formatElement(React.createElement(MemoFoo, null, 'cat'))).toEqual(
+        '<Memo(DisplayNameBeforeMemoizing(Foo))>\n  cat\n</Memo(DisplayNameBeforeMemoizing(Foo))>',
+      );
+    });
 
-  expect(formatElement(React.createElement(MemoFoo, null, 'cat'))).toEqual(
-    '<Memo(MyDisplayName(Foo))>\n  cat\n</Memo(MyDisplayName(Foo))>',
-  );
+    test('renders the displayName of memoized component', () => {
+      const Foo = () => React.createElement('div');
+      Foo.displayName = 'DisplayNameThatWillBeIgnored(Foo)';
+      const MemoFoo = React.memo(Foo);
+      MemoFoo.displayName = 'DisplayNameForMemoized(Foo)';
+
+      expect(formatElement(React.createElement(MemoFoo, null, 'cat'))).toEqual(
+        '<Memo(DisplayNameForMemoized(Foo))>\n  cat\n</Memo(DisplayNameForMemoized(Foo))>',
+      );
+    });
+  });
 });
 
 test('supports context Provider with a child', () => {