convert ReactElementClone-test from renderIntoDocument (#28193)

## Summary

migrates to createRoot – renderIntoDocument uses ReactDOM.render

## How did you test this change?

yarn test ReactElementClone

Author: noahlemen

packages/react/src/__tests__/ReactElementClone-test.js

@@ -9,19 +9,20 @@
 
 'use strict';
 
+let act;
 let PropTypes;
 let React;
-let ReactDOM;
-let ReactTestUtils;
+let ReactDOMClient;
 
 describe('ReactElementClone', () => {
   let ComponentClass;
 
   beforeEach(() => {
+    act = require('internal-test-utils').act;
+
     PropTypes = require('prop-types');
     React = require('react');
-    ReactDOM = require('react-dom');
-    ReactTestUtils = require('react-dom/test-utils');
+    ReactDOMClient = require('react-dom/client');
 
     // NOTE: We're explicitly not using JSX here. This is intended to test
     // classic JS without JSX.
@@ -32,10 +33,15 @@ describe('ReactElementClone', () => {
     };
   });
 
-  it('should clone a DOM component with new props', () => {
+  it('should clone a DOM component with new props', async () => {
+    let div;
     class Grandparent extends React.Component {
       render() {
-        return <Parent child={<div className="child" />} />;
+        return (
+          <Parent
+            child={<div ref={node => (div = node)} className="child" />}
+          />
+        );
       }
     }
     class Parent extends React.Component {
@@ -47,14 +53,21 @@ describe('ReactElementClone', () => {
         );
       }
     }
-    const component = ReactTestUtils.renderIntoDocument(<Grandparent />);
-    expect(ReactDOM.findDOMNode(component).childNodes[0].className).toBe('xyz');
+
+    const root = ReactDOMClient.createRoot(document.createElement('div'));
+    await act(() => {
+      root.render(<Grandparent />);
+    });
+    expect(div.className).toBe('xyz');
   });
 
-  it('should clone a composite component with new props', () => {
+  it('should clone a composite component with new props', async () => {
+    let div;
     class Child extends React.Component {
       render() {
-        return <div className={this.props.className} />;
+        return (
+          <div ref={node => (div = node)} className={this.props.className} />
+        );
       }
     }
     class Grandparent extends React.Component {
@@ -71,19 +84,27 @@ describe('ReactElementClone', () => {
         );
       }
     }
-    const component = ReactTestUtils.renderIntoDocument(<Grandparent />);
-    expect(ReactDOM.findDOMNode(component).childNodes[0].className).toBe('xyz');
+    const root = ReactDOMClient.createRoot(document.createElement('div'));
+    await act(() => {
+      root.render(<Grandparent />);
+    });
+    expect(div.className).toBe('xyz');
   });
 
   it('does not fail if config has no prototype', () => {
     const config = Object.create(null, {foo: {value: 1, enumerable: true}});
     React.cloneElement(<div />, config);
   });
 
-  it('should keep the original ref if it is not overridden', () => {
+  it('should keep the original ref if it is not overridden', async () => {
+    let component;
     class Grandparent extends React.Component {
       yoloRef = React.createRef();
 
+      componentDidMount() {
+        component = this;
+      }
+
       render() {
         return <Parent child={<div ref={this.yoloRef} />} />;
       }
@@ -97,7 +118,11 @@ describe('ReactElementClone', () => {
       }
     }
 
-    const component = ReactTestUtils.renderIntoDocument(<Grandparent />);
+    const root = ReactDOMClient.createRoot(document.createElement('div'));
+    await act(() => {
+      root.render(<Grandparent />);
+    });
+
     expect(component.yoloRef.current.tagName).toBe('DIV');
   });
 
@@ -111,30 +136,32 @@ describe('ReactElementClone', () => {
     expect(clone.key).toBe('xyz');
   });
 
-  it('should transfer children', () => {
+  it('should transfer children', async () => {
     class Component extends React.Component {
       render() {
         expect(this.props.children).toBe('xyz');
         return <div />;
       }
     }
 
-    ReactTestUtils.renderIntoDocument(
-      React.cloneElement(<Component />, {children: 'xyz'}),
-    );
+    const root = ReactDOMClient.createRoot(document.createElement('div'));
+    await act(() => {
+      root.render(React.cloneElement(<Component />, {children: 'xyz'}));
+    });
   });
 
-  it('should shallow clone children', () => {
+  it('should shallow clone children', async () => {
     class Component extends React.Component {
       render() {
         expect(this.props.children).toBe('xyz');
         return <div />;
       }
     }
 
-    ReactTestUtils.renderIntoDocument(
-      React.cloneElement(<Component>xyz</Component>, {}),
-    );
+    const root = ReactDOMClient.createRoot(document.createElement('div'));
+    await act(() => {
+      root.render(React.cloneElement(<Component>xyz</Component>, {}));
+    });
   });
 
   it('should accept children as rest arguments', () => {
@@ -174,7 +201,8 @@ describe('ReactElementClone', () => {
     expect(element2.props.children).toBe(undefined);
   });
 
-  it('should support keys and refs', () => {
+  it('should support keys and refs', async () => {
+    let component;
     class Parent extends React.Component {
       xyzRef = React.createRef();
 
@@ -192,6 +220,10 @@ describe('ReactElementClone', () => {
     class Grandparent extends React.Component {
       parentRef = React.createRef();
 
+      componentDidMount() {
+        component = this;
+      }
+
       render() {
         return (
           <Parent ref={this.parentRef}>
@@ -201,11 +233,13 @@ describe('ReactElementClone', () => {
       }
     }
 
-    const component = ReactTestUtils.renderIntoDocument(<Grandparent />);
+    const root = ReactDOMClient.createRoot(document.createElement('div'));
+    await act(() => root.render(<Grandparent />));
     expect(component.parentRef.current.xyzRef.current.tagName).toBe('SPAN');
   });
 
-  it('should steal the ref if a new ref is specified', () => {
+  it('should steal the ref if a new ref is specified', async () => {
+    let component;
     class Parent extends React.Component {
       xyzRef = React.createRef();
 
@@ -221,6 +255,10 @@ describe('ReactElementClone', () => {
       parentRef = React.createRef();
       childRef = React.createRef();
 
+      componentDidMount() {
+        component = this;
+      }
+
       render() {
         return (
           <Parent ref={this.parentRef}>
@@ -230,21 +268,25 @@ describe('ReactElementClone', () => {
       }
     }
 
-    const component = ReactTestUtils.renderIntoDocument(<Grandparent />);
+    const root = ReactDOMClient.createRoot(document.createElement('div'));
+    await act(() => root.render(<Grandparent />));
     expect(component.childRef).toEqual({current: null});
     expect(component.parentRef.current.xyzRef.current.tagName).toBe('SPAN');
   });
 
-  it('should overwrite props', () => {
+  it('should overwrite props', async () => {
     class Component extends React.Component {
       render() {
         expect(this.props.myprop).toBe('xyz');
         return <div />;
       }
     }
 
-    ReactTestUtils.renderIntoDocument(
-      React.cloneElement(<Component myprop="abc" />, {myprop: 'xyz'}),
+    const root = ReactDOMClient.createRoot(document.createElement('div'));
+    await act(() =>
+      root.render(
+        React.cloneElement(<Component myprop="abc" />, {myprop: 'xyz'}),
+      ),
     );
   });
 
@@ -287,7 +329,7 @@ describe('ReactElementClone', () => {
     React.cloneElement(<div />, null, [{}, {}]);
   });
 
-  it('should check declared prop types after clone', () => {
+  it('should check declared prop types after clone', async () => {
     class Component extends React.Component {
       static propTypes = {
         color: PropTypes.string.isRequired,
@@ -308,8 +350,10 @@ describe('ReactElementClone', () => {
         });
       }
     }
-    expect(() =>
-      ReactTestUtils.renderIntoDocument(React.createElement(GrandParent)),
+    const root = ReactDOMClient.createRoot(document.createElement('div'));
+    await expect(
+      async () =>
+        await act(() => root.render(React.createElement(GrandParent))),
     ).toErrorDev(
       'Warning: Failed prop type: ' +
         'Invalid prop `color` of type `number` supplied to `Component`, ' +