Convert renderSubtreeIntoContainer-test.js to createRoot (#28114)

Co-authored-by: Ricky <[email protected]>

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

@@ -12,7 +12,9 @@
 const React = require('react');
 const PropTypes = require('prop-types');
 const ReactDOM = require('react-dom');
+const ReactDOMClient = require('react-dom/client');
 const ReactTestUtils = require('react-dom/test-utils');
+const act = require('internal-test-utils').act;
 const renderSubtreeIntoContainer =
   require('react-dom').unstable_renderSubtreeIntoContainer;
 
@@ -101,7 +103,7 @@ describe('renderSubtreeIntoContainer', () => {
   });
 
   // @gate !disableLegacyContext
-  it('should update context if it changes due to setState', () => {
+  it('should update context if it changes due to setState', async () => {
     const container = document.createElement('div');
     document.body.appendChild(container);
     const portal = document.createElement('div');
@@ -154,15 +156,22 @@ describe('renderSubtreeIntoContainer', () => {
         );
       }
     }
+    const root = ReactDOMClient.createRoot(container);
+    const parentRef = React.createRef();
+    await act(async () => {
+      root.render(<Parent ref={parentRef} />);
+    });
+    const instance = parentRef.current;
 
-    const instance = ReactDOM.render(<Parent />, container);
     expect(portal.firstChild.innerHTML).toBe('initial-initial');
-    instance.setState({bar: 'changed'});
+    await act(async () => {
+      instance.setState({bar: 'changed'});
+    });
     expect(portal.firstChild.innerHTML).toBe('changed-changed');
   });
 
   // @gate !disableLegacyContext
-  it('should update context if it changes due to re-render', () => {
+  it('should update context if it changes due to re-render', async () => {
     const container = document.createElement('div');
     document.body.appendChild(container);
     const portal = document.createElement('div');
@@ -212,13 +221,18 @@ describe('renderSubtreeIntoContainer', () => {
       }
     }
 
-    ReactDOM.render(<Parent bar="initial" />, container);
+    const root = ReactDOMClient.createRoot(container);
+    await act(async () => {
+      root.render(<Parent bar="initial" />);
+    });
     expect(portal.firstChild.innerHTML).toBe('initial-initial');
-    ReactDOM.render(<Parent bar="changed" />, container);
+    await act(async () => {
+      root.render(<Parent bar="changed" />);
+    });
     expect(portal.firstChild.innerHTML).toBe('changed-changed');
   });
 
-  it('should render portal with non-context-provider parent', () => {
+  it('should render portal with non-context-provider parent', async () => {
     const container = document.createElement('div');
     document.body.appendChild(container);
     const portal = document.createElement('div');
@@ -237,12 +251,15 @@ describe('renderSubtreeIntoContainer', () => {
       }
     }
 
-    ReactDOM.render(<Parent bar="initial" />, container);
+    const root = ReactDOMClient.createRoot(container);
+    await act(async () => {
+      root.render(<Parent bar="initial" />);
+    });
     expect(portal.firstChild.innerHTML).toBe('hello');
   });
 
   // @gate !disableLegacyContext
-  it('should get context through non-context-provider parent', () => {
+  it('should get context through non-context-provider parent', async () => {
     const container = document.createElement('div');
     document.body.appendChild(container);
     const portal = document.createElement('div');
@@ -281,12 +298,15 @@ describe('renderSubtreeIntoContainer', () => {
       }
     }
 
-    ReactDOM.render(<Parent value="foo" />, container);
+    const root = ReactDOMClient.createRoot(container);
+    await act(async () => {
+      root.render(<Parent value="foo" />);
+    });
     expect(portal.textContent).toBe('foo');
   });
 
   // @gate !disableLegacyContext
-  it('should get context through middle non-context-provider layer', () => {
+  it('should get context through middle non-context-provider layer', async () => {
     const container = document.createElement('div');
     document.body.appendChild(container);
     const portal1 = document.createElement('div');
@@ -333,11 +353,14 @@ describe('renderSubtreeIntoContainer', () => {
       }
     }
 
-    ReactDOM.render(<Parent value="foo" />, container);
+    const root = ReactDOMClient.createRoot(container);
+    await act(async () => {
+      root.render(<Parent value="foo" />);
+    });
     expect(portal2.textContent).toBe('foo');
   });
 
-  it('fails gracefully when mixing React 15 and 16', () => {
+  it('legacy test: fails gracefully when mixing React 15 and 16', () => {
     class C extends React.Component {
       render() {
         return <div />;