From 7ee717d5bf255872ec180346189d17b8ebec6d02 Mon Sep 17 00:00:00 2001
From: David Zilburg <davidzilburg@gmail.com>
Date: Fri, 17 Jan 2020 02:22:28 -0800
Subject: [PATCH] Fix pretty-format to respect displayName on forwardRef.
 (#9422)

Unlike React DevTools, Jest ignores a custom displayName set on forwardRef components. We should align serialization with DevTools, so change behavior.
---
 CHANGELOG.md                                  |  1 +
 .../src/__tests__/ReactElement.test.ts        | 52 +++++++++++++++++++
 .../pretty-format/src/plugins/ReactElement.ts |  4 ++
 3 files changed, 57 insertions(+)
 create mode 100644 packages/pretty-format/src/__tests__/ReactElement.test.ts

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3a8e77e9d40b..d18808196c8e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -42,6 +42,7 @@
 - `[@jest/test-result]` Create method to create empty `TestResult` ([#8867](https://github.com/facebook/jest/pull/8867))
 - `[jest-worker]` [**BREAKING**] Return a promise from `end()`, resolving with the information whether workers exited gracefully ([#8206](https://github.com/facebook/jest/pull/8206))
 - `[jest-reporters]` Transform file paths into hyperlinks ([#8980](https://github.com/facebook/jest/pull/8980))
+- `[pretty-format]` Fix pretty-format to respect displayName on forwardRef ([#9422](https://github.com/facebook/jest/pull/9422))
 
 ### Fixes
 
diff --git a/packages/pretty-format/src/__tests__/ReactElement.test.ts b/packages/pretty-format/src/__tests__/ReactElement.test.ts
new file mode 100644
index 000000000000..70e5c119910b
--- /dev/null
+++ b/packages/pretty-format/src/__tests__/ReactElement.test.ts
@@ -0,0 +1,52 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates. All Rights Reserved.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+import setPrettyPrint from './setPrettyPrint';
+import prettyFormat from '..';
+
+const {ReactElement} = prettyFormat.plugins;
+
+setPrettyPrint([ReactElement]);
+
+describe('ReactElement Plugin', () => {
+  let forwardRefComponent: {
+    (_props: any, _ref: any): any;
+    displayName?: string;
+  };
+
+  let forwardRefExample: ReturnType<typeof React.forwardRef>;
+
+  beforeEach(() => {
+    forwardRefComponent = (_props, _ref) => null;
+
+    forwardRefExample = React.forwardRef(forwardRefComponent);
+
+    forwardRefExample.displayName = undefined;
+  });
+
+  test('serializes forwardRef without displayName', () => {
+    forwardRefExample = React.forwardRef((_props, _ref) => null);
+    expect(React.createElement(forwardRefExample)).toPrettyPrintTo(
+      '<ForwardRef />',
+    );
+  });
+
+  test('serializes forwardRef with displayName', () => {
+    forwardRefExample.displayName = 'Display';
+    expect(React.createElement(forwardRefExample)).toPrettyPrintTo(
+      '<Display />',
+    );
+  });
+
+  test('serializes forwardRef component with displayName', () => {
+    forwardRefComponent.displayName = 'Display';
+    expect(React.createElement(forwardRefExample)).toPrettyPrintTo(
+      '<ForwardRef(Display) />',
+    );
+  });
+});
diff --git a/packages/pretty-format/src/plugins/ReactElement.ts b/packages/pretty-format/src/plugins/ReactElement.ts
index 0a8bd5a8e6ea..eda1a992523d 100644
--- a/packages/pretty-format/src/plugins/ReactElement.ts
+++ b/packages/pretty-format/src/plugins/ReactElement.ts
@@ -53,6 +53,10 @@ const getType = (element: any) => {
     }
 
     if (ReactIs.isForwardRef(element)) {
+      if (type.displayName) {
+        return type.displayName;
+      }
+
       const functionName = type.render.displayName || type.render.name || '';
 
       return functionName !== ''