Warn for Context.Consumer with contextType (#14831)

Author: aweary

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},
+    );
+  });
 });

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',
           );
         }
       }

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',
         );
       }
     }

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},
     );