From c4af3f36c7682ae998b43c3312bcfcb3ceb25696 Mon Sep 17 00:00:00 2001
From: Noah Lemen <noah.lemen@gmail.com>
Date: Thu, 1 Feb 2024 14:45:06 -0500
Subject: [PATCH] convert ReactElementClone-test from renderIntoDocument
 (#28193)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary

migrates to createRoot – renderIntoDocument uses ReactDOM.render

## How did you test this change?

yarn test ReactElementClone
---
 .../src/__tests__/ReactElementClone-test.js   | 108 ++++++++++++------
 1 file changed, 76 insertions(+), 32 deletions(-)

diff --git a/packages/react/src/__tests__/ReactElementClone-test.js b/packages/react/src/__tests__/ReactElementClone-test.js
index 1aecc91359c28..053341013a6ed 100644
--- a/packages/react/src/__tests__/ReactElementClone-test.js
+++ b/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,8 +84,11 @@ 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', () => {
@@ -80,10 +96,15 @@ describe('ReactElementClone', () => {
     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,7 +136,7 @@ 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');
@@ -119,12 +144,13 @@ describe('ReactElementClone', () => {
       }
     }
 
-    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');
@@ -132,9 +158,10 @@ describe('ReactElementClone', () => {
       }
     }
 
-    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,12 +268,13 @@ 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');
@@ -243,8 +282,11 @@ describe('ReactElementClone', () => {
       }
     }
 
-    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`, ' +