Convert ReactLegacyContextDisabled-test.internal to createRoot

Author: kassens

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

@@ -10,19 +10,24 @@
 'use strict';
 
 let React;
-let ReactDOM;
+let ReactDOMClient;
 let ReactDOMServer;
 let ReactFeatureFlags;
 
+let act;
+
 describe('ReactLegacyContextDisabled', () => {
   beforeEach(() => {
     jest.resetModules();
 
     React = require('react');
-    ReactDOM = require('react-dom');
+    ReactDOMClient = require('react-dom/client');
     ReactDOMServer = require('react-dom/server');
     ReactFeatureFlags = require('shared/ReactFeatureFlags');
     ReactFeatureFlags.disableLegacyContext = true;
+    act = require('internal-test-utils').act;
+
+    act = require('internal-test-utils').act;
   });
 
   function formatValue(val) {
@@ -38,7 +43,7 @@ describe('ReactLegacyContextDisabled', () => {
     return JSON.stringify(val);
   }
 
-  it('warns for legacy context', () => {
+  it('warns for legacy context', async () => {
     class LegacyProvider extends React.Component {
       static childContextTypes = {
         foo() {},
@@ -81,17 +86,19 @@ describe('ReactLegacyContextDisabled', () => {
     }
 
     const container = document.createElement('div');
-    expect(() => {
-      ReactDOM.render(
-        <LegacyProvider>
-          <span>
-            <LegacyClsConsumer />
-            <LegacyFnConsumer />
-            <RegularFn />
-          </span>
-        </LegacyProvider>,
-        container,
-      );
+    const root = ReactDOMClient.createRoot(container);
+    await expect(async () => {
+      await act(() => {
+        root.render(
+          <LegacyProvider>
+            <span>
+              <LegacyClsConsumer />
+              <LegacyFnConsumer />
+              <RegularFn />
+            </span>
+          </LegacyProvider>,
+        );
+      });
     }).toErrorDev([
       'LegacyProvider uses the legacy childContextTypes API which is no longer supported. ' +
         'Use React.createContext() instead.',
@@ -104,19 +111,20 @@ describe('ReactLegacyContextDisabled', () => {
     expect(lifecycleContextLog).toEqual([]);
 
     // Test update path.
-    ReactDOM.render(
-      <LegacyProvider>
-        <span>
-          <LegacyClsConsumer />
-          <LegacyFnConsumer />
-          <RegularFn />
-        </span>
-      </LegacyProvider>,
-      container,
-    );
+    await act(() => {
+      root.render(
+        <LegacyProvider>
+          <span>
+            <LegacyClsConsumer />
+            <LegacyFnConsumer />
+            <RegularFn />
+          </span>
+        </LegacyProvider>,
+      );
+    });
     expect(container.textContent).toBe('{}undefinedundefined');
     expect(lifecycleContextLog).toEqual([{}, {}, {}]);
-    ReactDOM.unmountComponentAtNode(container);
+    root.unmount();
 
     // test server path.
     let text;
@@ -143,7 +151,7 @@ describe('ReactLegacyContextDisabled', () => {
     expect(lifecycleContextLog).toEqual([{}, {}, {}]);
   });
 
-  it('renders a tree with modern context', () => {
+  it('renders a tree with modern context', async () => {
     const Ctx = React.createContext();
 
     class Provider extends React.Component {
@@ -185,44 +193,48 @@ describe('ReactLegacyContextDisabled', () => {
     }
 
     const container = document.createElement('div');
-    ReactDOM.render(
-      <Provider value="a">
-        <span>
-          <RenderPropConsumer />
-          <ContextTypeConsumer />
-          <FnConsumer />
-        </span>
-      </Provider>,
-      container,
-    );
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(
+        <Provider value="a">
+          <span>
+            <RenderPropConsumer />
+            <ContextTypeConsumer />
+            <FnConsumer />
+          </span>
+        </Provider>,
+      );
+    });
     expect(container.textContent).toBe('aaa');
     expect(lifecycleContextLog).toEqual([]);
 
     // Test update path
-    ReactDOM.render(
-      <Provider value="a">
-        <span>
-          <RenderPropConsumer />
-          <ContextTypeConsumer />
-          <FnConsumer />
-        </span>
-      </Provider>,
-      container,
-    );
+    await act(() => {
+      root.render(
+        <Provider value="a">
+          <span>
+            <RenderPropConsumer />
+            <ContextTypeConsumer />
+            <FnConsumer />
+          </span>
+        </Provider>,
+      );
+    });
     expect(container.textContent).toBe('aaa');
     expect(lifecycleContextLog).toEqual(['a', 'a', 'a']);
     lifecycleContextLog.length = 0;
 
-    ReactDOM.render(
-      <Provider value="b">
-        <span>
-          <RenderPropConsumer />
-          <ContextTypeConsumer />
-          <FnConsumer />
-        </span>
-      </Provider>,
-      container,
-    );
+    await act(() => {
+      root.render(
+        <Provider value="b">
+          <span>
+            <RenderPropConsumer />
+            <ContextTypeConsumer />
+            <FnConsumer />
+          </span>
+        </Provider>,
+      );
+    });
     expect(container.textContent).toBe('bbb');
     if (gate(flags => flags.enableLazyContextPropagation)) {
       // In the lazy propagation implementation, we don't check if context
@@ -233,6 +245,6 @@ describe('ReactLegacyContextDisabled', () => {
       // changed, so we skipped sCU.
       expect(lifecycleContextLog).toEqual(['b', 'b']);
     }
-    ReactDOM.unmountComponentAtNode(container);
+    root.unmount();
   });
 });