Warn for Context.Consumer with contextType (#14831)

facebook · Mar 27, 2019 · aa8736a · aa8736a
1 parent d9fa20d
commit aa8736a
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 7 deletions.
diff --git a/packages/react-dom/src/__tests__/ReactServerRendering-test.js b/packages/react-dom/src/__tests__/ReactServerRendering-test.js
@@ -904,4 +904,43 @@ describe('ReactDOMServer', () => {
         '    in App (at **)',
     ]);
   });
+
+  it('should warn if an invalid contextType is defined', () => {
+    const Context = React.createContext();
+
+    class ComponentA extends React.Component {
+      // It should warn for both Context.Consumer and Context.Provider
+      static contextType = Context.Consumer;
+      render() {
+        return <div />;
+      }
+    }
+    class ComponentB extends React.Component {
+      static contextType = Context.Provider;
+      render() {
+        return <div />;
+      }
+    }
+
+    expect(() => {
+      ReactDOMServer.renderToString(<ComponentA />);
+    }).toWarnDev(
+      'Warning: ComponentA defines an invalid contextType. ' +
+        'contextType should point to the Context object returned by React.createContext(). ' +
+        'Did you accidentally pass the Context.Consumer instead?',
+      {withoutStack: true},
+    );
+
+    // Warnings should be deduped by component type
+    ReactDOMServer.renderToString(<ComponentA />);
+
+    expect(() => {
+      ReactDOMServer.renderToString(<ComponentB />);
+    }).toWarnDev(
+      'Warning: ComponentB defines an invalid contextType. ' +
+        'contextType should point to the Context object returned by React.createContext(). ' +
+        'Did you accidentally pass the Context.Provider instead?',
+      {withoutStack: true},
+    );
+  });
 });
diff --git a/packages/react-dom/src/server/ReactPartialRendererContext.js b/packages/react-dom/src/server/ReactPartialRendererContext.js
@@ -77,16 +77,20 @@ export function processContext(
   const contextType = type.contextType;
   if (typeof contextType === 'object' && contextType !== null) {
     if (__DEV__) {
-      if (contextType.$$typeof !== REACT_CONTEXT_TYPE) {
+      const isContextConsumer =
+        contextType.$$typeof === REACT_CONTEXT_TYPE &&
+        contextType._context !== undefined;
+      if (contextType.$$typeof !== REACT_CONTEXT_TYPE || isContextConsumer) {
         let name = getComponentName(type) || 'Component';
         if (!didWarnAboutInvalidateContextType[name]) {
           didWarnAboutInvalidateContextType[name] = true;
           warningWithoutStack(
             false,
             '%s defines an invalid contextType. ' +
               'contextType should point to the Context object returned by React.createContext(). ' +
-              'Did you accidentally pass the Context.Provider instead?',
+              'Did you accidentally pass the Context.%s instead?',
             name,
+            isContextConsumer ? 'Consumer' : 'Provider',
           );
         }
       }

diff --git a/packages/react-reconciler/src/ReactFiberClassComponent.js b/packages/react-reconciler/src/ReactFiberClassComponent.js
@@ -515,17 +515,21 @@ function constructClassInstance(
   const contextType = ctor.contextType;
   if (typeof contextType === 'object' && contextType !== null) {
     if (__DEV__) {
+      const isContextConsumer =
+        contextType.$$typeof === REACT_CONTEXT_TYPE &&
+        contextType._context !== undefined;
       if (
-        contextType.$$typeof !== REACT_CONTEXT_TYPE &&
+        (contextType.$$typeof !== REACT_CONTEXT_TYPE || isContextConsumer) &&
         !didWarnAboutInvalidateContextType.has(ctor)
       ) {
         didWarnAboutInvalidateContextType.add(ctor);
         warningWithoutStack(
           false,
           '%s defines an invalid contextType. ' +
             'contextType should point to the Context object returned by React.createContext(). ' +
-            'Did you accidentally pass the Context.Provider instead?',
+            'Did you accidentally pass the Context.%s instead?',
           getComponentName(ctor) || 'Component',
+          isContextConsumer ? 'Consumer' : 'Provider',
         );
       }
     }

diff --git a/packages/react/src/__tests__/ReactContextValidator-test.js b/packages/react/src/__tests__/ReactContextValidator-test.js
@@ -541,9 +541,10 @@ describe('ReactContextValidator', () => {
 
   it('should warn if an invalid contextType is defined', () => {
     const Context = React.createContext();
-
+    // This tests that both Context.Consumer and Context.Provider
+    // warn about invalid contextType.
     class ComponentA extends React.Component {
-      static contextType = Context.Provider;
+      static contextType = Context.Consumer;
       render() {
         return <div />;
       }
@@ -560,7 +561,7 @@ describe('ReactContextValidator', () => {
     }).toWarnDev(
       'Warning: ComponentA defines an invalid contextType. ' +
         'contextType should point to the Context object returned by React.createContext(). ' +
-        'Did you accidentally pass the Context.Provider instead?',
+        'Did you accidentally pass the Context.Consumer instead?',
       {withoutStack: true},
     );