File tree Expand file tree Collapse file tree 3 files changed +38
-2
lines changed Expand file tree Collapse file tree 3 files changed +38
-2
lines changed Original file line number Diff line number Diff line change @@ -120,6 +120,11 @@ export function createContext<T>(
120120 return context . Consumer ;
121121 } ,
122122 } ,
123+ displayName : {
124+ get ( ) {
125+ return context . displayName ;
126+ } ,
127+ } ,
123128 } ) ;
124129 // $FlowFixMe: Flow complains about missing properties because it doesn't understand defineProperty
125130 context . Consumer = Consumer ;
Original file line number Diff line number Diff line change 1818let PropTypes ;
1919let React ;
2020let ReactDOM ;
21+ let ReactDOMServer ;
2122let ReactTestUtils ;
2223
2324describe ( 'ReactContextValidator' , ( ) => {
@@ -27,6 +28,7 @@ describe('ReactContextValidator', () => {
2728 PropTypes = require ( 'prop-types' ) ;
2829 React = require ( 'react' ) ;
2930 ReactDOM = require ( 'react-dom' ) ;
31+ ReactDOMServer = require ( 'react-dom/server' ) ;
3032 ReactTestUtils = require ( 'react-dom/test-utils' ) ;
3133 } ) ;
3234
@@ -671,4 +673,26 @@ describe('ReactContextValidator', () => {
671673 'Warning: ComponentB: Function components do not support contextType.' ,
672674 ) ;
673675 } ) ;
676+
677+ it ( 'should honor a displayName if set on the context type' , ( ) => {
678+ const Context = React . createContext ( null ) ;
679+ Context . displayName = 'MyContextType' ;
680+ function Validator ( ) {
681+ return null ;
682+ }
683+ Validator . propTypes = { dontPassToSeeErrorStack : PropTypes . bool . isRequired } ;
684+
685+ expect ( ( ) => {
686+ ReactDOMServer . renderToStaticMarkup (
687+ < Context . Provider >
688+ < Context . Consumer > { ( ) => < Validator /> } </ Context . Consumer >
689+ </ Context . Provider > ,
690+ ) ;
691+ } ) . toErrorDev (
692+ 'Warning: Failed prop type: The prop `dontPassToSeeErrorStack` is marked as required in `Validator`, but its value is `undefined`.\n' +
693+ ' in Validator (at **)\n' +
694+ ' in MyContextType.Consumer (at **)\n' +
695+ ' in MyContextType.Provider (at **)' ,
696+ ) ;
697+ } ) ;
674698} ) ;
Original file line number Diff line number Diff line change @@ -24,6 +24,7 @@ import {
2424 REACT_BLOCK_TYPE ,
2525} from 'shared/ReactSymbols' ;
2626import { refineResolvedLazyComponent } from 'shared/ReactLazyComponent' ;
27+ import type { ReactContext , ReactProviderType } from 'shared/ReactTypes' ;
2728
2829function getWrappedName (
2930 outerType : mixed ,
@@ -37,6 +38,10 @@ function getWrappedName(
3738 ) ;
3839}
3940
41+ function getContextName ( type : ReactContext < any > ) {
42+ return type . displayName || 'Context' ;
43+ }
44+
4045function getComponentName ( type : mixed ) : string | null {
4146 if ( type == null ) {
4247 // Host root, text node or just invalid type.
@@ -73,9 +78,11 @@ function getComponentName(type: mixed): string | null {
7378 if ( typeof type === 'object' ) {
7479 switch ( type . $$typeof ) {
7580 case REACT_CONTEXT_TYPE :
76- return 'Context.Consumer' ;
81+ const context : ReactContext < any > = ( type : any ) ;
82+ return getContextName ( context ) + '.Consumer' ;
7783 case REACT_PROVIDER_TYPE :
78- return 'Context.Provider' ;
84+ const provider : ReactProviderType < any > = ( type : any ) ;
85+ return getContextName ( provider . _context ) + '.Provider' ;
7986 case REACT_FORWARD_REF_TYPE :
8087 return getWrappedName ( type , type . render , 'ForwardRef' ) ;
8188 case REACT_MEMO_TYPE :
You can’t perform that action at this time.
0 commit comments