From be1dda3d57d4b342f5ab69f0d765f540c4942432 Mon Sep 17 00:00:00 2001
From: Gustavo Bastos <me@gustavovinicius.com>
Date: Tue, 11 Jun 2019 11:34:05 +0200
Subject: [PATCH] fix(pretty-format): Render custom displayName of memoized
 components (#8546)

---
 CHANGELOG.md                                  |  1 +
 .../src/__tests__/react.test.tsx              | 41 +++++++++++++++----
 .../pretty-format/src/plugins/ReactElement.ts |  3 +-
 3 files changed, 37 insertions(+), 8 deletions(-)

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..e8711da2ea44 100644
--- a/packages/pretty-format/src/__tests__/react.test.tsx
+++ b/packages/pretty-format/src/__tests__/react.test.tsx
@@ -722,14 +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);
+
+      expect(formatElement(React.createElement(MemoFoo, null, 'cat'))).toEqual(
+        '<Memo(DisplayNameBeforeMemoizing(Foo))>\n  cat\n</Memo(DisplayNameBeforeMemoizing(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', () => {
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';
     }