diff --git a/packages/react-reconciler/src/__tests__/ReactIncrementalPerf-test.internal.js b/packages/react-reconciler/src/__tests__/ReactIncrementalPerf-test.internal.js index 0b460675d2721..0833624fc0aaa 100644 --- a/packages/react-reconciler/src/__tests__/ReactIncrementalPerf-test.internal.js +++ b/packages/react-reconciler/src/__tests__/ReactIncrementalPerf-test.internal.js @@ -571,6 +571,7 @@ describe('ReactDebugFiberPerf', () => { const MemoFoo = React.memo(function Foo() { return
; }); + MemoFoo.displayName = 'Foo'; ReactNoop.render( diff --git a/packages/react-reconciler/src/__tests__/ReactLazy-test.internal.js b/packages/react-reconciler/src/__tests__/ReactLazy-test.internal.js index 4e80064514006..7daf8be101e6a 100644 --- a/packages/react-reconciler/src/__tests__/ReactLazy-test.internal.js +++ b/packages/react-reconciler/src/__tests__/ReactLazy-test.internal.js @@ -776,6 +776,7 @@ describe('ReactLazy', () => { Add.defaultProps = { innerWithDefault: 42, }; + Add.displayName = 'Add'; await verifyInnerPropTypesAreChecked(Add); }); @@ -787,6 +788,7 @@ describe('ReactLazy', () => { Add.propTypes = { inner: PropTypes.number.isRequired, }; + Add.displayName = 'Add'; await verifyInnerPropTypesAreChecked(Add); }); @@ -847,7 +849,7 @@ describe('ReactLazy', () => { expect(() => { expect(Scheduler).toFlushAndYield(['Inner default text']); }).toWarnDev( - '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'); @@ -860,7 +862,7 @@ describe('ReactLazy', () => { ); expect(Scheduler).toFlushAndYield([null]); }).toWarnDev( - '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); }); diff --git a/packages/react-reconciler/src/__tests__/ReactMemo-test.internal.js b/packages/react-reconciler/src/__tests__/ReactMemo-test.internal.js index b7e9d7e4e8800..d83367e622b60 100644 --- a/packages/react-reconciler/src/__tests__/ReactMemo-test.internal.js +++ b/packages/react-reconciler/src/__tests__/ReactMemo-test.internal.js @@ -363,7 +363,7 @@ describe('memo', () => { expect(Scheduler).toFlushWithoutYielding(); }).toWarnDev( // 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 @@ -372,7 +372,7 @@ describe('memo', () => { expect(Scheduler).toFlushWithoutYielding(); }).toWarnDev( // 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`.', ); }); @@ -398,8 +398,8 @@ describe('memo', () => { ReactNoop.render(); expect(Scheduler).toFlushWithoutYielding(); }).toWarnDev([ - '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`.', ]); @@ -410,8 +410,8 @@ describe('memo', () => { ); expect(Scheduler).toFlushWithoutYielding(); }).toWarnDev([ - '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`.', ]); }); diff --git a/packages/shared/getComponentName.js b/packages/shared/getComponentName.js index cbea431c8f7a8..86eee5728ba71 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) ); } @@ -80,7 +80,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_LAZY_TYPE: { const thenable: LazyComponent = (type: any); const resolvedThenable = refineResolvedLazyComponent(thenable);