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: {