diff --git a/packages/react-reconciler/src/__tests__/ReactLazy-test.internal.js b/packages/react-reconciler/src/__tests__/ReactLazy-test.internal.js
index 2f79cdf653e..0f1164e0246 100644
--- a/packages/react-reconciler/src/__tests__/ReactLazy-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/ReactLazy-test.internal.js
@@ -867,6 +867,7 @@ describe('ReactLazy', () => {
return props.inner + props.outer;
};
Add = React.memo(Add);
+ Add.displayName = 'Add';
Add.propTypes = {
inner: PropTypes.number.isRequired,
innerWithDefault: PropTypes.number.isRequired,
@@ -882,6 +883,7 @@ describe('ReactLazy', () => {
return props.inner + props.outer;
};
Add = React.memo(Add);
+ Add.displayName = 'Add';
Add.propTypes = {
inner: PropTypes.number.isRequired,
};
@@ -945,7 +947,7 @@ describe('ReactLazy', () => {
expect(() => {
expect(Scheduler).toFlushAndYield(['Inner default text']);
}).toErrorDev(
- 'The prop `text` is marked as required in `T`, but its value is `undefined`',
+ 'The prop `text` is marked as required in `Memo(T)`, but its value is `undefined`',
);
expect(root).toMatchRenderedOutput('Inner default text');
@@ -958,7 +960,7 @@ describe('ReactLazy', () => {
);
expect(Scheduler).toFlushAndYield([null]);
}).toErrorDev(
- 'The prop `text` is marked as required in `T`, but its value is `null`',
+ 'The prop `text` is marked as required in `Memo(T)`, but its value is `null`',
);
expect(root).toMatchRenderedOutput(null);
});
@@ -1050,6 +1052,7 @@ describe('ReactLazy', () => {
Add.defaultProps = {
inner: 2,
};
+ Add.displayName = 'Add';
const LazyAdd = lazy(() => fakeImport(Add));
const root = ReactTestRenderer.create(
}>
diff --git a/packages/react-reconciler/src/__tests__/ReactMemo-test.js b/packages/react-reconciler/src/__tests__/ReactMemo-test.js
index 5be63d65a37..96d6f59f5fb 100644
--- a/packages/react-reconciler/src/__tests__/ReactMemo-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactMemo-test.js
@@ -365,7 +365,7 @@ describe('memo', () => {
expect(Scheduler).toFlushWithoutYielding();
}).toErrorDev(
// Outer props are checked in createElement
- 'Invalid prop `outer` of type `string` supplied to `FnInner`, expected `number`.',
+ 'Invalid prop `outer` of type `string` supplied to `Memo(FnInner)`, expected `number`.',
);
// Update
@@ -374,7 +374,7 @@ describe('memo', () => {
expect(Scheduler).toFlushWithoutYielding();
}).toErrorDev(
// Outer props are checked in createElement
- 'Invalid prop `outer` of type `boolean` supplied to `FnInner`, expected `number`.',
+ 'Invalid prop `outer` of type `boolean` supplied to `Memo(FnInner)`, expected `number`.',
);
});
@@ -408,8 +408,8 @@ describe('memo', () => {
);
expect(Scheduler).toFlushWithoutYielding();
}).toErrorDev([
- 'Invalid prop `outer` of type `string` supplied to `Inner`, expected `number`.',
- 'Invalid prop `middle` of type `string` supplied to `Inner`, expected `number`.',
+ 'Invalid prop `outer` of type `string` supplied to `Memo(Memo(Inner))`, expected `number`.',
+ 'Invalid prop `middle` of type `string` supplied to `Memo(Inner)`, expected `number`.',
'Invalid prop `inner` of type `string` supplied to `Inner`, expected `number`.',
]);
@@ -422,8 +422,8 @@ describe('memo', () => {
);
expect(Scheduler).toFlushWithoutYielding();
}).toErrorDev([
- 'Invalid prop `outer` of type `boolean` supplied to `Inner`, expected `number`.',
- 'Invalid prop `middle` of type `boolean` supplied to `Inner`, expected `number`.',
+ 'Invalid prop `outer` of type `boolean` supplied to `Memo(Memo(Inner))`, expected `number`.',
+ 'Invalid prop `middle` of type `boolean` supplied to `Memo(Inner)`, expected `number`.',
'Invalid prop `inner` of type `boolean` supplied to `Inner`, expected `number`.',
]);
});
@@ -532,7 +532,7 @@ describe('memo', () => {
ReactNoop.render(),
).toErrorDev(
'Warning: Failed prop type: The prop `required` is marked as required in ' +
- '`Foo`, but its value is `undefined`.\n' +
+ '`Bar`, but its value is `undefined`.\n' +
' in Foo (at **)',
);
});
diff --git a/packages/shared/getComponentName.js b/packages/shared/getComponentName.js
index 9f01c0be92b..d925ef231e2 100644
--- a/packages/shared/getComponentName.js
+++ b/packages/shared/getComponentName.js
@@ -30,10 +30,10 @@ function getWrappedName(
innerType: any,
wrapperName: string,
): string {
- const functionName = innerType.displayName || innerType.name || '';
+ const innerName = getComponentName(innerType) || '';
return (
(outerType: any).displayName ||
- (functionName !== '' ? `${wrapperName}(${functionName})` : wrapperName)
+ (innerName !== '' ? `${wrapperName}(${innerName})` : wrapperName)
);
}
@@ -85,7 +85,7 @@ function getComponentName(type: mixed): string | null {
case REACT_FORWARD_REF_TYPE:
return getWrappedName(type, type.render, 'ForwardRef');
case REACT_MEMO_TYPE:
- return getComponentName(type.type);
+ return getWrappedName(type, type.type, 'Memo');
case REACT_BLOCK_TYPE:
return getComponentName(type._render);
case REACT_LAZY_TYPE: {