feat: honor displayName of context types

facebook · Feb 13, 2020 · 21a87a4 · 21a87a4
1 parent 24b5fd0
commit 21a87a4
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 4 deletions.
diff --git a/packages/react/src/ReactContext.js b/packages/react/src/ReactContext.js
@@ -120,6 +120,11 @@ export function createContext<T>(
           return context.Consumer;
         },
       },
+      displayName: {
+        get() {
+          return context.displayName;
+        },
+      },
     });
     // $FlowFixMe: Flow complains about missing properties because it doesn't understand defineProperty
     context.Consumer = Consumer;

diff --git a/packages/react/src/__tests__/ReactContext-test.js b/packages/react/src/__tests__/ReactContext-test.js
@@ -21,7 +21,7 @@ describe('ReactContext', () => {
     Scheduler = require('scheduler');
   });
 
-  it('should ignore a displayName if set on the context type', () => {
+  it('should honor a displayName if set on the context type', () => {
     spyOnDevAndProd(console, 'error');
     const Context = React.createContext(null);
     Context.displayName = 'MyContextType';
@@ -39,7 +39,7 @@ describe('ReactContext', () => {
     expect(Scheduler).toFlushAndThrow('consumer error');
     expect(console.error.calls.count()).toEqual(3);
     expect(console.error.calls.argsFor(2)[0]).toMatch(
-      'The above error occurred in the <Context.Consumer>',
+      'The above error occurred in the <MyContextType.Consumer>',
     );
   });
 });
diff --git a/packages/shared/getComponentName.js b/packages/shared/getComponentName.js
@@ -24,6 +24,7 @@ import {
   REACT_CHUNK_TYPE,
 } from 'shared/ReactSymbols';
 import {refineResolvedLazyComponent} from 'shared/ReactLazyComponent';
+import type {ReactContext} from 'shared/ReactTypes';
 
 function getWrappedName(
   outerType: mixed,
@@ -37,6 +38,10 @@ function getWrappedName(
   );
 }
 
+function getContextName(type: ReactContext<any>) {
+  return type.displayName || 'Context';
+}
+
 function getComponentName(type: mixed): string | null {
   if (type == null) {
     // Host root, text node or just invalid type.
@@ -73,9 +78,9 @@ function getComponentName(type: mixed): string | null {
   if (typeof type === 'object') {
     switch (type.$$typeof) {
       case REACT_CONTEXT_TYPE:
-        return 'Context.Consumer';
+        return getContextName(type) + '.Consumer';
       case REACT_PROVIDER_TYPE:
-        return 'Context.Provider';
+        return getContextName(type._context) + '.Provider';
       case REACT_FORWARD_REF_TYPE:
         return getWrappedName(type, type.render, 'ForwardRef');
       case REACT_MEMO_TYPE: