diff --git a/CHANGELOG.md b/CHANGELOG.md
index d486997c2912..a82d5ef3f82d 100644
--- a/CHANGELOG.md
+++ b/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
diff --git a/packages/pretty-format/src/__tests__/react.test.tsx b/packages/pretty-format/src/__tests__/react.test.tsx
index 44d33d4b083e..0f3c3a4f173a 100644
--- a/packages/pretty-format/src/__tests__/react.test.tsx
+++ b/packages/pretty-format/src/__tests__/react.test.tsx
@@ -709,6 +709,16 @@ test('supports forwardRef with a child', () => {
).toEqual('\n mouse\n');
});
+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('\n cat\n');
+});
+
test('supports context Provider with a child', () => {
const {Provider} = React.createContext('test');
diff --git a/packages/pretty-format/src/plugins/ReactElement.ts b/packages/pretty-format/src/plugins/ReactElement.ts
index aa05d4ebf72e..36fc15f3deee 100644
--- a/packages/pretty-format/src/plugins/ReactElement.ts
+++ b/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';
};