diff --git a/CHANGELOG.md b/CHANGELOG.md
index d3e3025a0511..13b20390b701 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,7 @@
- `[expect]` Highlight substring differences when matcher fails, part 1 ([#8448](https://github.com/facebook/jest/pull/8448))
- `[jest-cli]` Improve chai support (with detailed output, to match jest exceptions) ([#8454](https://github.com/facebook/jest/pull/8454))
- `[*]` Manage the global timeout with `--testTimeout` command line argument. ([#8456](https://github.com/facebook/jest/pull/8456))
+- `[pretty-format]` Render custom displayName of memoized components
### Fixes
diff --git a/packages/pretty-format/src/__tests__/react.test.tsx b/packages/pretty-format/src/__tests__/react.test.tsx
index 6cce0ca290bc..e8711da2ea44 100644
--- a/packages/pretty-format/src/__tests__/react.test.tsx
+++ b/packages/pretty-format/src/__tests__/react.test.tsx
@@ -722,14 +722,41 @@ 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);
- }
+describe('React.memo', () => {
+ describe('without displayName', () => {
+ test('renders the component name', () => {
+ function Dog(props: any) {
+ return React.createElement('div', props, props.children);
+ }
+
+ expect(
+ formatElement(React.createElement(React.memo(Dog), null, 'cat')),
+ ).toEqual('\n cat\n');
+ });
+ });
- expect(
- formatElement(React.createElement(React.memo(Dog), null, 'cat')),
- ).toEqual('\n cat\n');
+ describe('with displayName', () => {
+ test('renders the displayName of component before memoizing', () => {
+ const Foo = () => React.createElement('div');
+ Foo.displayName = 'DisplayNameBeforeMemoizing(Foo)';
+ const MemoFoo = React.memo(Foo);
+
+ expect(formatElement(React.createElement(MemoFoo, null, 'cat'))).toEqual(
+ '\n cat\n',
+ );
+ });
+
+ test('renders the displayName of memoized component', () => {
+ const Foo = () => React.createElement('div');
+ Foo.displayName = 'DisplayNameThatWillBeIgnored(Foo)';
+ const MemoFoo = React.memo(Foo);
+ MemoFoo.displayName = 'DisplayNameForMemoized(Foo)';
+
+ expect(formatElement(React.createElement(MemoFoo, null, 'cat'))).toEqual(
+ '\n cat\n',
+ );
+ });
+ });
});
test('supports context Provider with a child', () => {
diff --git a/packages/pretty-format/src/plugins/ReactElement.ts b/packages/pretty-format/src/plugins/ReactElement.ts
index 5963a408c03c..75b2d7cfe0c5 100644
--- a/packages/pretty-format/src/plugins/ReactElement.ts
+++ b/packages/pretty-format/src/plugins/ReactElement.ts
@@ -61,7 +61,8 @@ const getType = (element: any) => {
}
if (ReactIs.isMemo(type)) {
- const functionName = type.type.displayName || type.type.name || '';
+ const functionName =
+ type.displayName || type.type.displayName || type.type.name || '';
return functionName !== '' ? 'Memo(' + functionName + ')' : 'Memo';
}