Support React forwardRef in pretty-format

CHANGELOG.md

@@ -133,6 +133,7 @@
   ([#5968](https://github.com/facebook/jest/pull/5968))
 * `[jest-config]` Ensure that custom resolvers are used when resolving the
   configuration ([#5976](https://github.com/facebook/jest/pull/5976))
+* `[pretty-format]` Handle React.forwardRef
 * `[website]` Fix website docs
   ([#5853](https://github.com/facebook/jest/pull/5853))
 

packages/pretty-format/src/__tests__/react.test.js

@@ -14,17 +14,22 @@ const renderer = require('react-test-renderer');
 
 const elementSymbol = Symbol.for('react.element');
 const fragmentSymbol = Symbol.for('react.fragment');
+const forwardRefSymbol = Symbol.for('react.forward_ref');
 const testSymbol = Symbol.for('react.test.json');
 
 const prettyFormat = require('..');
-const {ReactElement, ReactTestComponent} = prettyFormat.plugins;
+const {
+  ReactElement,
+  ReactTestComponent,
+  ReactForwardRef,
+} = prettyFormat.plugins;
 
 const formatElement = (element: any, options?: OptionsReceived) =>
   prettyFormat(
     element,
     Object.assign(
       ({
-        plugins: [ReactElement],
+        plugins: [ReactElement, ReactForwardRef],
       }: OptionsReceived),
       options,
     ),
@@ -327,6 +332,16 @@ test('supports a fragment with element child', () => {
   ).toEqual('<React.Fragment>\n  <div>\n    test\n  </div>\n</React.Fragment>');
 });
 
+test('supports forwardRef with name', () => {
+  function Cat(props) {
+    return React.createElement('div', props);
+  }
+
+  expect(formatElement({$$typeof: forwardRefSymbol, render: Cat})).toEqual(
+    '<ForwardRef(Cat) … />',
+  );
+});
+
 test('supports a single element with React elements with a child', () => {
   assertPrintedJSX(
     React.createElement('Mouse', {

packages/pretty-format/src/index.js

@@ -35,6 +35,7 @@ import DOMElement from './plugins/dom_element';
 import Immutable from './plugins/immutable';
 import ReactElement from './plugins/react_element';
 import ReactTestComponent from './plugins/react_test_component';
+import ReactForwardRef from './plugins/react_forward_ref';
 
 const toString = Object.prototype.toString;
 const toISOString = Date.prototype.toISOString;
@@ -490,6 +491,7 @@ prettyFormat.plugins = {
   DOMElement,
   Immutable,
   ReactElement,
+  ReactForwardRef,
   ReactTestComponent,
 };
 

packages/pretty-format/src/plugins/react_forward_ref.js

@@ -0,0 +1,39 @@
+/**
+ * Copyright (c) 2014-present, Facebook, Inc. 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.
+ *
+ * @flow
+ */
+
+import type {Config, NewPlugin, Printer, Refs} from 'types/PrettyFormat';
+
+import {printElementAsLeaf} from './lib/markup';
+
+const forwardRefSymbol = Symbol.for('react.forward_ref');
+
+const getType = element => {
+  if (element.$$typeof === forwardRefSymbol) {
+    const functionName =
+      element.render.displayName || element.render.name || '';
+
+    return functionName !== ''
+      ? 'ForwardRef(' + functionName + ')'
+      : 'ForwardRef';
+  }
+  return 'UNDEFINED';
+};
+
+export const serialize = (
+  element: any,
+  config: Config,
+  indentation: string,
+  depth: number,
+  refs: Refs,
+  printer: Printer,
+): string => printElementAsLeaf(getType(element), config);
+
+export const test = (val: any) => val && val.$$typeof === forwardRefSymbol;
+
+export default ({serialize, test}: NewPlugin);