Support React.memo in pretty-format

CHANGELOG.md

@@ -10,6 +10,7 @@
 - `[jest-cli]` Refactor `-o` and `--coverage` combined ([#7611](https://github.com/facebook/jest/pull/7611))
 - `[expect]` Fix custom async matcher stack trace ([#7652](https://github.com/facebook/jest/pull/7652))
 - `[jest-changed-files]` Improve default file selection for Mercurial repos ([#7880](https://github.com/facebook/jest/pull/7880))
+- `[pretty-format]` React.memo with snapshot testing results in <UNDEFINED> ([#7891](https://github.com/facebook/jest/pull/7891))
 
 ### Chore & Maintenance
 

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';
 };