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.

Author: DiZy

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
 

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) />',
+    );
+  });
+});

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 !== ''