Support React.memo in pretty-format (#7891)

Author: bensampaio

CHANGELOG.md

@@ -4,6 +4,7 @@
 
 - `[expect]`: Improve report when matcher fails, part 7 ([#7866](https://github.com/facebook/jest/pull/7866))
 - `[expect]`: Improve report when matcher fails, part 8 ([#7876](https://github.com/facebook/jest/pull/7876))
+- `[pretty-format]` Support `React.memo` ([#7891](https://github.com/facebook/jest/pull/7891))
 
 ### Fixes
 

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

@@ -709,6 +709,16 @@ 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);
+  }
+
+  expect(
+    formatElement(React.createElement(React.memo(Dog), null, 'cat')),
+  ).toEqual('<Memo(Dog)>\n  cat\n</Memo(Dog)>');
+});
+
 test('supports context Provider with a child', () => {
   const {Provider} = React.createContext('test');
 

packages/pretty-format/src/plugins/ReactElement.ts

@@ -19,6 +19,7 @@ const fragmentSymbol = Symbol.for('react.fragment');
 const forwardRefSymbol = Symbol.for('react.forward_ref');
 const providerSymbol = Symbol.for('react.provider');
 const contextSymbol = Symbol.for('react.context');
+const memoSymbol = Symbol.for('react.memo');
 
 // Given element.props.children, or subtree during recursive traversal,
 // return flattened array of children.
@@ -60,6 +61,12 @@ const getType = (element: any) => {
         ? 'ForwardRef(' + functionName + ')'
         : 'ForwardRef';
     }
+
+    if (type.$$typeof === memoSymbol) {
+      const functionName = type.type.displayName || type.type.name || '';
+
+      return functionName !== '' ? 'Memo(' + functionName + ')' : 'Memo';
+    }
   }
   return 'UNDEFINED';
 };