Warn about legacy context when legacy context is not disabled

For environments that still have legacy contexts available, this adds a warning to make the remaining call sites easier to locate and encourage upgrades.

Author: kassens

packages/react-dom/src/__tests__/ReactDOMFiber-test.js

@@ -13,10 +13,12 @@ let React;
 let ReactDOM;
 let PropTypes;
 let ReactDOMClient;
-let root;
 let Scheduler;
+
 let act;
+let assertConsoleErrorDev;
 let assertLog;
+let root;
 
 describe('ReactDOMFiber', () => {
   let container;
@@ -29,7 +31,7 @@ describe('ReactDOMFiber', () => {
     ReactDOMClient = require('react-dom/client');
     Scheduler = require('scheduler');
     act = require('internal-test-utils').act;
-    assertLog = require('internal-test-utils').assertLog;
+    ({assertConsoleErrorDev, assertLog} = require('internal-test-utils'));
 
     container = document.createElement('div');
     document.body.appendChild(container);
@@ -732,6 +734,10 @@ describe('ReactDOMFiber', () => {
     await act(async () => {
       root.render(<Parent />);
     });
+    assertConsoleErrorDev([
+      'Parent uses the legacy childContextTypes API which will soon be removed. Use React.createContext() instead.',
+      'Component uses the legacy contextTypes API which will soon be removed. Use React.createContext() with static contextType instead.',
+    ]);
     expect(container.innerHTML).toBe('');
     expect(portalContainer.innerHTML).toBe('<div>bar</div>');
   });

packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js

@@ -27,6 +27,8 @@ let ReactDOMFizzServer;
 let ReactDOMFizzStatic;
 let Suspense;
 let SuspenseList;
+
+let assertConsoleErrorDev;
 let useSyncExternalStore;
 let useSyncExternalStoreWithSelector;
 let use;
@@ -116,12 +118,14 @@ describe('ReactDOMFizzServer', () => {
       useActionState = React.useActionState;
     }
 
-    const InternalTestUtils = require('internal-test-utils');
-    waitForAll = InternalTestUtils.waitForAll;
-    waitFor = InternalTestUtils.waitFor;
-    waitForPaint = InternalTestUtils.waitForPaint;
-    assertLog = InternalTestUtils.assertLog;
-    clientAct = InternalTestUtils.act;
+    ({
+      assertConsoleErrorDev,
+      assertLog,
+      act: clientAct,
+      waitFor,
+      waitForAll,
+      waitForPaint,
+    } = require('internal-test-utils'));
 
     if (gate(flags => flags.source)) {
       // The `with-selector` module composes the main `use-sync-external-store`
@@ -1950,6 +1954,10 @@ describe('ReactDOMFizzServer', () => {
       );
       pipe(writable);
     });
+    assertConsoleErrorDev([
+      'TestProvider uses the legacy childContextTypes API which will soon be removed. Use React.createContext() instead.',
+      'TestConsumer uses the legacy contextTypes API which will soon be removed. Use React.createContext() with static contextType instead.',
+    ]);
     expect(getVisibleChildren(container)).toEqual(
       <div>
         Loading: <b>A</b>

packages/react-dom/src/__tests__/ReactDOMLegacyFiber-test.js

@@ -786,7 +786,12 @@ describe('ReactDOMLegacyFiber', () => {
       }
     }
 
-    ReactDOM.render(<Parent />, container);
+    expect(() => {
+      ReactDOM.render(<Parent />, container);
+    }).toErrorDev([
+      'Parent uses the legacy childContextTypes API which will soon be removed. Use React.createContext() instead.',
+      'Component uses the legacy contextTypes API which will soon be removed. Use React.createContext() with static contextType instead.',
+    ]);
     expect(container.innerHTML).toBe('');
     expect(portalContainer.innerHTML).toBe('<div>bar</div>');
   });
@@ -829,7 +834,13 @@ describe('ReactDOMLegacyFiber', () => {
       }
     }
 
-    const instance = ReactDOM.render(<Parent />, container);
+    let instance;
+    expect(() => {
+      instance = ReactDOM.render(<Parent />, container);
+    }).toErrorDev([
+      'Parent uses the legacy childContextTypes API which will soon be removed. Use React.createContext() instead.',
+      'Component uses the legacy contextTypes API which will soon be removed. Use React.createContext() with static contextType instead.',
+    ]);
     expect(portalContainer.innerHTML).toBe('<div>initial-initial</div>');
     expect(container.innerHTML).toBe('');
     instance.setState({bar: 'changed'});
@@ -871,7 +882,12 @@ describe('ReactDOMLegacyFiber', () => {
       }
     }
 
-    ReactDOM.render(<Parent bar="initial" />, container);
+    expect(() => {
+      ReactDOM.render(<Parent bar="initial" />, container);
+    }).toErrorDev([
+      'Parent uses the legacy childContextTypes API which will soon be removed. Use React.createContext() instead.',
+      'Component uses the legacy contextTypes API which will soon be removed. Use React.createContext() with static contextType instead.',
+    ]);
     expect(portalContainer.innerHTML).toBe('<div>initial-initial</div>');
     expect(container.innerHTML).toBe('');
     ReactDOM.render(<Parent bar="changed" />, container);

packages/react-dom/src/__tests__/ReactDOMServerIntegrationLegacyContext-test.js

@@ -80,6 +80,7 @@ describe('ReactDOMServerIntegration', () => {
         <PurpleContext>
           <ClassChildWithContext />
         </PurpleContext>,
+        2,
       );
       expect(e.textContent).toBe('purple');
     });
@@ -94,6 +95,7 @@ describe('ReactDOMServerIntegration', () => {
         <PurpleContext>
           <FunctionChildWithContext />
         </PurpleContext>,
+        2,
       );
       expect(e.textContent).toBe('purple');
     });
@@ -110,6 +112,7 @@ describe('ReactDOMServerIntegration', () => {
         <PurpleContext>
           <ClassChildWithoutContext />
         </PurpleContext>,
+        1,
       );
       expect(e.textContent).toBe('');
     });
@@ -124,6 +127,7 @@ describe('ReactDOMServerIntegration', () => {
         <PurpleContext>
           <FunctionChildWithoutContext />
         </PurpleContext>,
+        1,
       );
       expect(e.textContent).toBe('');
     });
@@ -141,6 +145,7 @@ describe('ReactDOMServerIntegration', () => {
         <PurpleContext>
           <ClassChildWithWrongContext />
         </PurpleContext>,
+        2,
       );
       expect(e.textContent).toBe('');
     });
@@ -158,6 +163,7 @@ describe('ReactDOMServerIntegration', () => {
         <PurpleContext>
           <FunctionChildWithWrongContext />
         </PurpleContext>,
+        2,
       );
       expect(e.textContent).toBe('');
     });
@@ -174,6 +180,7 @@ describe('ReactDOMServerIntegration', () => {
         <PurpleContext>
           <Child />
         </PurpleContext>,
+        2,
       );
       expect(e.textContent).toBe('purple');
     });
@@ -190,6 +197,7 @@ describe('ReactDOMServerIntegration', () => {
             <Grandchild />
           </RedContext>
         </PurpleContext>,
+        2,
       );
       expect(e.textContent).toBe('red');
     });
@@ -228,7 +236,7 @@ describe('ReactDOMServerIntegration', () => {
         text2: PropTypes.string,
       };
 
-      const e = await render(<Parent />);
+      const e = await render(<Parent />, 3);
       expect(e.querySelector('#first').textContent).toBe('purple');
       expect(e.querySelector('#second').textContent).toBe('red');
     });
@@ -254,7 +262,7 @@ describe('ReactDOMServerIntegration', () => {
         };
         Child.contextTypes = {text: PropTypes.string};
 
-        const e = await render(<WillMountContext />);
+        const e = await render(<WillMountContext />, 2);
         expect(e.textContent).toBe('foo');
       },
     );
@@ -278,7 +286,8 @@ describe('ReactDOMServerIntegration', () => {
         }
         const e = await render(
           <ForgetfulParent />,
-          render === clientRenderOnBadMarkup ? 2 : 1,
+          // Some warning is not de-duped and logged again on the client retry render.
+          render === clientRenderOnBadMarkup ? 3 : 2,
         );
         expect(e.textContent).toBe('nope');
       },

packages/react-dom/src/__tests__/ReactErrorBoundaries-test.internal.js

@@ -36,6 +36,7 @@ describe('ReactErrorBoundaries', () => {
   let RetryErrorBoundary;
   let Normal;
   let assertLog;
+  let assertConsoleErrorDev;
 
   beforeEach(() => {
     jest.useFakeTimers();
@@ -47,8 +48,7 @@ describe('ReactErrorBoundaries', () => {
     act = require('internal-test-utils').act;
     Scheduler = require('scheduler');
 
-    const InternalTestUtils = require('internal-test-utils');
-    assertLog = InternalTestUtils.assertLog;
+    ({assertLog, assertConsoleErrorDev} = require('internal-test-utils'));
 
     BrokenConstructor = class extends React.Component {
       constructor(props) {
@@ -895,6 +895,9 @@ describe('ReactErrorBoundaries', () => {
         </ErrorBoundary>,
       );
     });
+    assertConsoleErrorDev([
+      'BrokenComponentWillMountWithContext uses the legacy childContextTypes API which will soon be removed. Use React.createContext() instead.',
+    ]);
     expect(container.firstChild.textContent).toBe('Caught an error: Hello.');
   });
 

packages/react-dom/src/__tests__/ReactFunctionComponent-test.js

@@ -13,6 +13,7 @@ let PropTypes;
 let React;
 let ReactDOMClient;
 let act;
+let assertConsoleErrorDev;
 
 function FunctionComponent(props) {
   return <div>{props.name}</div>;
@@ -24,7 +25,7 @@ describe('ReactFunctionComponent', () => {
     PropTypes = require('prop-types');
     React = require('react');
     ReactDOMClient = require('react-dom/client');
-    act = require('internal-test-utils').act;
+    ({act, assertConsoleErrorDev} = require('internal-test-utils'));
   });
 
   it('should render stateless component', async () => {
@@ -109,6 +110,11 @@ describe('ReactFunctionComponent', () => {
       root.render(<GrandParent test="test" />);
     });
 
+    assertConsoleErrorDev([
+      'GrandParent uses the legacy childContextTypes API which will soon be removed. Use React.createContext() instead.',
+      'Child uses the legacy contextTypes API which will soon be removed. Use React.createContext() with static contextType instead.',
+    ]);
+
     expect(el.textContent).toBe('test');
 
     await act(() => {
@@ -472,6 +478,10 @@ describe('ReactFunctionComponent', () => {
     await act(() => {
       root.render(<Parent />);
     });
+    assertConsoleErrorDev([
+      'Parent uses the legacy childContextTypes API which will soon be removed. Use React.createContext() instead.',
+      'Child uses the legacy contextTypes API which will be removed soon. Use React.createContext() with React.useContext() instead.',
+    ]);
     expect(el.textContent).toBe('en');
   });