From 174b42006fe7fffdbce25a673cd300536266a080 Mon Sep 17 00:00:00 2001
From: Sebastian Silbermann <sebastian.silbermann@klarna.com>
Date: Sat, 27 Jan 2024 11:42:38 +0100
Subject: [PATCH 1/3] Convert ReactDOMTextarea to createRoot

---
 .../src/__tests__/ReactDOMTextarea-test.js    | 826 ++++++++++++------
 1 file changed, 548 insertions(+), 278 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMTextarea-test.js b/packages/react-dom/src/__tests__/ReactDOMTextarea-test.js
index 810452c64a313..adc6ba415a7c3 100644
--- a/packages/react-dom/src/__tests__/ReactDOMTextarea-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMTextarea-test.js
@@ -13,9 +13,9 @@ function emptyFunction() {}
 
 describe('ReactDOMTextarea', () => {
   let React;
-  let ReactDOM;
+  let ReactDOMClient;
   let ReactDOMServer;
-  let ReactTestUtils;
+  let act;
 
   let renderTextarea;
 
@@ -25,15 +25,16 @@ describe('ReactDOMTextarea', () => {
     jest.resetModules();
 
     React = require('react');
-    ReactDOM = require('react-dom');
+    ReactDOMClient = require('react-dom/client');
     ReactDOMServer = require('react-dom/server');
-    ReactTestUtils = require('react-dom/test-utils');
+    act = require('internal-test-utils').act;
 
-    renderTextarea = function (component, container) {
-      if (!container) {
-        container = document.createElement('div');
-      }
-      const node = ReactDOM.render(component, container);
+    renderTextarea = async function (component, container, root) {
+      await act(() => {
+        root.render(component);
+      });
+
+      const node = container.firstChild;
 
       // Fixing jsdom's quirky behavior -- in reality, the parser should strip
       // off the leading newline but we need to do it by hand here.
@@ -46,93 +47,143 @@ describe('ReactDOMTextarea', () => {
     jest.restoreAllMocks();
   });
 
-  it('should allow setting `defaultValue`', () => {
+  it('should allow setting `defaultValue`', async () => {
     const container = document.createElement('div');
-    const node = renderTextarea(<textarea defaultValue="giraffe" />, container);
+    const root = ReactDOMClient.createRoot(container);
+    const node = await renderTextarea(
+      <textarea defaultValue="giraffe" />,
+      container,
+      root,
+    );
 
     expect(node.value).toBe('giraffe');
 
     // Changing `defaultValue` should do nothing.
-    renderTextarea(<textarea defaultValue="gorilla" />, container);
+    await renderTextarea(<textarea defaultValue="gorilla" />, container, root);
     expect(node.value).toEqual('giraffe');
 
     node.value = 'cat';
 
-    renderTextarea(<textarea defaultValue="monkey" />, container);
+    await renderTextarea(<textarea defaultValue="monkey" />, container, root);
     expect(node.value).toEqual('cat');
   });
 
-  it('should display `defaultValue` of number 0', () => {
-    const stub = <textarea defaultValue={0} />;
-    const node = renderTextarea(stub);
+  it('should display `defaultValue` of number 0', async () => {
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    const node = await renderTextarea(
+      <textarea defaultValue={0} />,
+      container,
+      root,
+    );
 
     expect(node.value).toBe('0');
   });
 
-  it('should display "false" for `defaultValue` of `false`', () => {
-    const stub = <textarea defaultValue={false} />;
-    const node = renderTextarea(stub);
+  it('should display "false" for `defaultValue` of `false`', async () => {
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    const node = await renderTextarea(
+      <textarea defaultValue={false} />,
+      container,
+      root,
+    );
 
     expect(node.value).toBe('false');
   });
 
-  it('should display "foobar" for `defaultValue` of `objToString`', () => {
+  it('should display "foobar" for `defaultValue` of `objToString`', async () => {
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
     const objToString = {
       toString: function () {
         return 'foobar';
       },
     };
-
-    const stub = <textarea defaultValue={objToString} />;
-    const node = renderTextarea(stub);
+    const node = await renderTextarea(
+      <textarea defaultValue={objToString} />,
+      container,
+      root,
+    );
 
     expect(node.value).toBe('foobar');
   });
 
-  it('should set defaultValue', () => {
+  it('should set defaultValue', async () => {
     const container = document.createElement('div');
-    ReactDOM.render(<textarea defaultValue="foo" />, container);
-    ReactDOM.render(<textarea defaultValue="bar" />, container);
-    ReactDOM.render(<textarea defaultValue="noise" />, container);
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<textarea defaultValue="foo" />);
+    });
+
+    await act(() => {
+      root.render(<textarea defaultValue="bar" />);
+    });
+
+    await act(() => {
+      root.render(<textarea defaultValue="noise" />);
+    });
+
     expect(container.firstChild.defaultValue).toBe('noise');
   });
 
-  it('should not render value as an attribute', () => {
-    const stub = <textarea value="giraffe" onChange={emptyFunction} />;
-    const node = renderTextarea(stub);
+  it('should not render value as an attribute', async () => {
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    const node = await renderTextarea(
+      <textarea value="giraffe" onChange={emptyFunction} />,
+      container,
+      root,
+    );
 
     expect(node.getAttribute('value')).toBe(null);
   });
 
-  it('should display `value` of number 0', () => {
-    const stub = <textarea value={0} onChange={emptyFunction} />;
-    const node = renderTextarea(stub);
+  it('should display `value` of number 0', async () => {
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    const node = await renderTextarea(
+      <textarea value={0} onChange={emptyFunction} />,
+      container,
+      root,
+    );
 
     expect(node.value).toBe('0');
   });
 
-  it('should update defaultValue to empty string', () => {
+  it('should update defaultValue to empty string', async () => {
     const container = document.createElement('div');
-    ReactDOM.render(<textarea defaultValue={'foo'} />, container);
-    ReactDOM.render(<textarea defaultValue={''} />, container);
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<textarea defaultValue={'foo'} />);
+    });
+
+    await act(() => {
+      root.render(<textarea defaultValue={''} />);
+    });
+
     expect(container.firstChild.defaultValue).toBe('');
   });
 
-  it('should allow setting `value` to `giraffe`', () => {
+  it('should allow setting `value` to `giraffe`', async () => {
     const container = document.createElement('div');
-    let stub = <textarea value="giraffe" onChange={emptyFunction} />;
-    const node = renderTextarea(stub, container);
+    const root = ReactDOMClient.createRoot(container);
+    const node = await renderTextarea(
+      <textarea value="giraffe" onChange={emptyFunction} />,
+      container,
+      root,
+    );
 
     expect(node.value).toBe('giraffe');
 
-    stub = ReactDOM.render(
-      <textarea value="gorilla" onChange={emptyFunction} />,
-      container,
-    );
+    await act(() => {
+      root.render(<textarea value="gorilla" onChange={emptyFunction} />);
+    });
+
     expect(node.value).toEqual('gorilla');
   });
 
-  it('will not initially assign an empty value (covers case where firefox throws a validation error when required attribute is set)', () => {
+  it('will not initially assign an empty value (covers case where firefox throws a validation error when required attribute is set)', async () => {
     const container = document.createElement('div');
 
     let counter = 0;
@@ -156,7 +207,10 @@ describe('ReactDOMTextarea', () => {
       },
     );
 
-    ReactDOM.render(<textarea value="" readOnly={true} />, container);
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<textarea value="" readOnly={true} />);
+    });
 
     expect(counter).toEqual(0);
   });
@@ -178,38 +232,50 @@ describe('ReactDOMTextarea', () => {
     expect(div.firstChild.getAttribute('defaultValue')).toBe(null);
   });
 
-  it('should allow setting `value` to `true`', () => {
+  it('should allow setting `value` to `true`', async () => {
     const container = document.createElement('div');
-    let stub = <textarea value="giraffe" onChange={emptyFunction} />;
-    const node = renderTextarea(stub, container);
+    const root = ReactDOMClient.createRoot(container);
+    const node = await renderTextarea(
+      <textarea value="giraffe" onChange={emptyFunction} />,
+      container,
+      root,
+    );
 
     expect(node.value).toBe('giraffe');
 
-    stub = ReactDOM.render(
-      <textarea value={true} onChange={emptyFunction} />,
-      container,
-    );
+    await act(() => {
+      root.render(<textarea value={true} onChange={emptyFunction} />);
+    });
+
     expect(node.value).toEqual('true');
   });
 
-  it('should allow setting `value` to `false`', () => {
+  it('should allow setting `value` to `false`', async () => {
     const container = document.createElement('div');
-    let stub = <textarea value="giraffe" onChange={emptyFunction} />;
-    const node = renderTextarea(stub, container);
+    const root = ReactDOMClient.createRoot(container);
+    const node = await renderTextarea(
+      <textarea value="giraffe" onChange={emptyFunction} />,
+      container,
+      root,
+    );
 
     expect(node.value).toBe('giraffe');
 
-    stub = ReactDOM.render(
-      <textarea value={false} onChange={emptyFunction} />,
-      container,
-    );
+    await act(() => {
+      root.render(<textarea value={false} onChange={emptyFunction} />);
+    });
+
     expect(node.value).toEqual('false');
   });
 
-  it('should allow setting `value` to `objToString`', () => {
+  it('should allow setting `value` to `objToString`', async () => {
     const container = document.createElement('div');
-    let stub = <textarea value="giraffe" onChange={emptyFunction} />;
-    const node = renderTextarea(stub, container);
+    const root = ReactDOMClient.createRoot(container);
+    const node = await renderTextarea(
+      <textarea value="giraffe" onChange={emptyFunction} />,
+      container,
+      root,
+    );
 
     expect(node.value).toBe('giraffe');
 
@@ -218,14 +284,15 @@ describe('ReactDOMTextarea', () => {
         return 'foo';
       },
     };
-    stub = ReactDOM.render(
-      <textarea value={objToString} onChange={emptyFunction} />,
-      container,
-    );
+
+    await act(() => {
+      root.render(<textarea value={objToString} onChange={emptyFunction} />);
+    });
+
     expect(node.value).toEqual('foo');
   });
 
-  it('should throw when value is set to a Temporal-like object', () => {
+  it('should throw when value is set to a Temporal-like object', async () => {
     class TemporalLike {
       valueOf() {
         // Throwing here is the behavior of ECMAScript "Temporal" date/time API.
@@ -237,51 +304,72 @@ describe('ReactDOMTextarea', () => {
       }
     }
     const container = document.createElement('div');
-    const stub = <textarea value="giraffe" onChange={emptyFunction} />;
-    const node = renderTextarea(stub, container);
+    const root = ReactDOMClient.createRoot(container);
+    const node = await renderTextarea(
+      <textarea value="giraffe" onChange={emptyFunction} />,
+      container,
+      root,
+    );
 
     expect(node.value).toBe('giraffe');
 
-    const test = () =>
-      ReactDOM.render(
-        <textarea value={new TemporalLike()} onChange={emptyFunction} />,
-        container,
-      );
-    expect(() =>
-      expect(test).toThrowError(new TypeError('prod message')),
+    const test = async () => {
+      await act(() => {
+        root.render(
+          <textarea value={new TemporalLike()} onChange={emptyFunction} />,
+        );
+      });
+    };
+    await expect(() =>
+      expect(test).rejects.toThrowError(new TypeError('prod message')),
     ).toErrorDev(
       'Form field values (value, checked, defaultValue, or defaultChecked props) must be ' +
         'strings, not TemporalLike. This value must be coerced to a string before using it here.',
     );
   });
 
-  it('should take updates to `defaultValue` for uncontrolled textarea', () => {
+  it('should take updates to `defaultValue` for uncontrolled textarea', async () => {
     const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<textarea defaultValue="0" />);
+    });
 
-    const node = ReactDOM.render(<textarea defaultValue="0" />, container);
+    const node = container.firstChild;
 
     expect(node.value).toBe('0');
 
-    ReactDOM.render(<textarea defaultValue="1" />, container);
+    await act(() => {
+      root.render(<textarea defaultValue="1" />);
+    });
 
     expect(node.value).toBe('0');
   });
 
-  it('should take updates to children in lieu of `defaultValue` for uncontrolled textarea', () => {
+  it('should take updates to children in lieu of `defaultValue` for uncontrolled textarea', async () => {
     const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<textarea defaultValue="0" />);
+    });
 
-    const node = ReactDOM.render(<textarea defaultValue="0" />, container);
+    const node = container.firstChild;
 
     expect(node.value).toBe('0');
 
-    ReactDOM.render(<textarea>1</textarea>, container);
+    await act(() => {
+      root.render(<textarea>1</textarea>);
+    });
 
     expect(node.value).toBe('0');
   });
 
-  it('should not incur unnecessary DOM mutations', () => {
+  it('should not incur unnecessary DOM mutations', async () => {
     const container = document.createElement('div');
-    ReactDOM.render(<textarea value="a" onChange={emptyFunction} />, container);
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<textarea value="a" onChange={emptyFunction} />);
+    });
 
     const node = container.firstChild;
     let nodeValue = 'a';
@@ -295,25 +383,35 @@ describe('ReactDOMTextarea', () => {
       }),
     });
 
-    ReactDOM.render(<textarea value="a" onChange={emptyFunction} />, container);
+    await act(() => {
+      root.render(<textarea value="a" onChange={emptyFunction} />);
+    });
+
     expect(nodeValueSetter).toHaveBeenCalledTimes(0);
 
-    ReactDOM.render(<textarea value="b" onChange={emptyFunction} />, container);
+    await act(() => {
+      root.render(<textarea value="b" onChange={emptyFunction} />);
+    });
+
     expect(nodeValueSetter).toHaveBeenCalledTimes(1);
   });
 
-  it('should properly control a value of number `0`', () => {
-    const stub = <textarea value={0} onChange={emptyFunction} />;
+  it('should properly control a value of number `0`', async () => {
     const setUntrackedValue = Object.getOwnPropertyDescriptor(
       HTMLTextAreaElement.prototype,
       'value',
     ).set;
 
     const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
     document.body.appendChild(container);
 
     try {
-      const node = renderTextarea(stub, container);
+      const node = await renderTextarea(
+        <textarea value={0} onChange={emptyFunction} />,
+        container,
+        root,
+      );
 
       setUntrackedValue.call(node, 'giraffe');
       node.dispatchEvent(
@@ -326,30 +424,41 @@ describe('ReactDOMTextarea', () => {
   });
 
   if (ReactFeatureFlags.disableTextareaChildren) {
-    it('should ignore children content', () => {
+    it('should ignore children content', async () => {
       const container = document.createElement('div');
-      let stub = <textarea>giraffe</textarea>;
+      const root = ReactDOMClient.createRoot(container);
       let node;
 
-      expect(() => {
-        node = renderTextarea(stub, container);
+      await expect(async () => {
+        node = await renderTextarea(
+          <textarea>giraffe</textarea>,
+          container,
+          root,
+        );
       }).toErrorDev(
         'Use the `defaultValue` or `value` props instead of setting children on <textarea>.',
       );
       expect(node.value).toBe('');
-      // Changing children should do nothing, it functions like `defaultValue`.
-      stub = ReactDOM.render(<textarea>gorilla</textarea>, container);
+
+      await act(() => {
+        root.render(<textarea>gorilla</textarea>);
+      });
+
       expect(node.value).toEqual('');
     });
   }
 
   if (ReactFeatureFlags.disableTextareaChildren) {
-    it('should receive defaultValue and still ignore children content', () => {
+    it('should receive defaultValue and still ignore children content', async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
       let node;
 
-      expect(() => {
-        node = renderTextarea(
+      await expect(async () => {
+        node = await renderTextarea(
           <textarea defaultValue="dragon">monkey</textarea>,
+          container,
+          root,
         );
       }).toErrorDev(
         'Use the `defaultValue` or `value` props instead of setting children on <textarea>.',
@@ -359,67 +468,80 @@ describe('ReactDOMTextarea', () => {
   }
 
   if (!ReactFeatureFlags.disableTextareaChildren) {
-    it('should treat children like `defaultValue`', () => {
+    it('should treat children like `defaultValue`', async () => {
       const container = document.createElement('div');
-      let stub = <textarea>giraffe</textarea>;
+      const root = ReactDOMClient.createRoot(container);
       let node;
 
-      expect(() => {
-        node = renderTextarea(stub, container);
+      await expect(async () => {
+        node = await renderTextarea(
+          <textarea>giraffe</textarea>,
+          container,
+          root,
+        );
       }).toErrorDev(
         'Use the `defaultValue` or `value` props instead of setting children on <textarea>.',
       );
 
       expect(node.value).toBe('giraffe');
 
-      // Changing children should do nothing, it functions like `defaultValue`.
-      stub = ReactDOM.render(<textarea>gorilla</textarea>, container);
+      await act(() => {
+        root.render(<textarea>gorilla</textarea>);
+      });
+
       expect(node.value).toEqual('giraffe');
     });
   }
 
-  it('should keep value when switching to uncontrolled element if not changed', () => {
+  it('should keep value when switching to uncontrolled element if not changed', async () => {
     const container = document.createElement('div');
-
-    const node = renderTextarea(
+    const root = ReactDOMClient.createRoot(container);
+    const node = await renderTextarea(
       <textarea value="kitten" onChange={emptyFunction} />,
       container,
+      root,
     );
 
     expect(node.value).toBe('kitten');
 
-    ReactDOM.render(<textarea defaultValue="gorilla" />, container);
+    await act(() => {
+      root.render(<textarea defaultValue="gorilla" />);
+    });
 
     expect(node.value).toEqual('kitten');
   });
 
-  it('should keep value when switching to uncontrolled element if changed', () => {
+  it('should keep value when switching to uncontrolled element if changed', async () => {
     const container = document.createElement('div');
-
-    const node = renderTextarea(
+    const root = ReactDOMClient.createRoot(container);
+    const node = await renderTextarea(
       <textarea value="kitten" onChange={emptyFunction} />,
       container,
+      root,
     );
 
     expect(node.value).toBe('kitten');
 
-    ReactDOM.render(
-      <textarea value="puppies" onChange={emptyFunction} />,
-      container,
-    );
+    await act(() => {
+      root.render(<textarea value="puppies" onChange={emptyFunction} />);
+    });
 
     expect(node.value).toBe('puppies');
 
-    ReactDOM.render(<textarea defaultValue="gorilla" />, container);
+    await act(() => {
+      root.render(<textarea defaultValue="gorilla" />);
+    });
 
     expect(node.value).toEqual('puppies');
   });
 
   if (ReactFeatureFlags.disableTextareaChildren) {
-    it('should ignore numbers as children', () => {
+    it('should ignore numbers as children', async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
       let node;
-      expect(() => {
-        node = renderTextarea(<textarea>{17}</textarea>);
+      await expect(async () => {
+        node = await renderTextarea(<textarea>{17}</textarea>, container, root);
       }).toErrorDev(
         'Use the `defaultValue` or `value` props instead of setting children on <textarea>.',
       );
@@ -428,10 +550,12 @@ describe('ReactDOMTextarea', () => {
   }
 
   if (!ReactFeatureFlags.disableTextareaChildren) {
-    it('should allow numbers as children', () => {
+    it('should allow numbers as children', async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
       let node;
-      expect(() => {
-        node = renderTextarea(<textarea>{17}</textarea>);
+      await expect(async () => {
+        node = await renderTextarea(<textarea>{17}</textarea>, container, root);
       }).toErrorDev(
         'Use the `defaultValue` or `value` props instead of setting children on <textarea>.',
       );
@@ -440,10 +564,16 @@ describe('ReactDOMTextarea', () => {
   }
 
   if (ReactFeatureFlags.disableTextareaChildren) {
-    it('should ignore booleans as children', () => {
+    it('should ignore booleans as children', async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
       let node;
-      expect(() => {
-        node = renderTextarea(<textarea>{false}</textarea>);
+      await expect(async () => {
+        node = await renderTextarea(
+          <textarea>{false}</textarea>,
+          container,
+          root,
+        );
       }).toErrorDev(
         'Use the `defaultValue` or `value` props instead of setting children on <textarea>.',
       );
@@ -452,10 +582,16 @@ describe('ReactDOMTextarea', () => {
   }
 
   if (!ReactFeatureFlags.disableTextareaChildren) {
-    it('should allow booleans as children', () => {
+    it('should allow booleans as children', async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
       let node;
-      expect(() => {
-        node = renderTextarea(<textarea>{false}</textarea>);
+      await expect(async () => {
+        node = await renderTextarea(
+          <textarea>{false}</textarea>,
+          container,
+          root,
+        );
       }).toErrorDev(
         'Use the `defaultValue` or `value` props instead of setting children on <textarea>.',
       );
@@ -464,15 +600,21 @@ describe('ReactDOMTextarea', () => {
   }
 
   if (ReactFeatureFlags.disableTextareaChildren) {
-    it('should ignore objects as children', () => {
+    it('should ignore objects as children', async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
       const obj = {
         toString: function () {
           return 'sharkswithlasers';
         },
       };
       let node;
-      expect(() => {
-        node = renderTextarea(<textarea>{obj}</textarea>);
+      await expect(async () => {
+        node = await renderTextarea(
+          <textarea>{obj}</textarea>,
+          container,
+          root,
+        );
       }).toErrorDev(
         'Use the `defaultValue` or `value` props instead of setting children on <textarea>.',
       );
@@ -481,15 +623,21 @@ describe('ReactDOMTextarea', () => {
   }
 
   if (!ReactFeatureFlags.disableTextareaChildren) {
-    it('should allow objects as children', () => {
+    it('should allow objects as children', async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
       const obj = {
         toString: function () {
           return 'sharkswithlasers';
         },
       };
       let node;
-      expect(() => {
-        node = renderTextarea(<textarea>{obj}</textarea>);
+      await expect(async () => {
+        node = await renderTextarea(
+          <textarea>{obj}</textarea>,
+          container,
+          root,
+        );
       }).toErrorDev(
         'Use the `defaultValue` or `value` props instead of setting children on <textarea>.',
       );
@@ -498,64 +646,86 @@ describe('ReactDOMTextarea', () => {
   }
 
   if (!ReactFeatureFlags.disableTextareaChildren) {
-    it('should throw with multiple or invalid children', () => {
-      expect(() => {
-        expect(() =>
-          ReactTestUtils.renderIntoDocument(
-            <textarea>
-              {'hello'}
-              {'there'}
-            </textarea>,
-          ),
-        ).toThrow('<textarea> can only have at most one child');
-      }).toErrorDev(
+    it('should throw with multiple or invalid children', async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      await expect(async () => {
+        await expect(async () => {
+          await act(() => {
+            root.render(
+              <textarea>
+                {'hello'}
+                {'there'}
+              </textarea>,
+            );
+          });
+        }).rejects.toThrow('<textarea> can only have at most one child');
+      }).toErrorDev([
         'Use the `defaultValue` or `value` props instead of setting children on <textarea>.',
-      );
+        'Use the `defaultValue` or `value` props instead of setting children on <textarea>.',
+      ]);
 
       let node;
-      expect(() => {
-        expect(
-          () =>
-            (node = renderTextarea(
+      await expect(async () => {
+        await expect(
+          (async () =>
+            (node = await renderTextarea(
               <textarea>
                 <strong />
               </textarea>,
-            )),
-        ).not.toThrow();
-      }).toErrorDev(
+              container,
+              root,
+            )))(),
+        ).resolves.not.toThrow();
+      }).toErrorDev([
         'Use the `defaultValue` or `value` props instead of setting children on <textarea>.',
-      );
+      ]);
 
       expect(node.value).toBe('[object Object]');
     });
   }
 
-  it('should unmount', () => {
+  it('should unmount', async () => {
     const container = document.createElement('div');
-    renderTextarea(<textarea />, container);
-    ReactDOM.unmountComponentAtNode(container);
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<textarea />);
+    });
+
+    await act(() => {
+      root.unmount();
+    });
   });
 
-  it('should warn if value is null', () => {
-    expect(() =>
-      ReactTestUtils.renderIntoDocument(<textarea value={null} />),
-    ).toErrorDev(
+  it('should warn if value is null', async () => {
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await expect(async () => {
+      await act(() => {
+        root.render(<textarea value={null} />);
+      });
+    }).toErrorDev(
       '`value` prop on `textarea` should not be null. ' +
         'Consider using an empty string to clear the component or `undefined` ' +
         'for uncontrolled components.',
     );
 
-    // No additional warnings are expected
-    ReactTestUtils.renderIntoDocument(<textarea value={null} />);
+    await act(() => {
+      root.render(<textarea value={null} />);
+    });
   });
 
-  it('should warn if value and defaultValue are specified', () => {
+  it('should warn if value and defaultValue are specified', async () => {
     const InvalidComponent = () => (
       <textarea value="foo" defaultValue="bar" readOnly={true} />
     );
-    expect(() =>
-      ReactTestUtils.renderIntoDocument(<InvalidComponent />),
-    ).toErrorDev(
+    let container = document.createElement('div');
+    let root = ReactDOMClient.createRoot(container);
+    await expect(async () => {
+      await act(() => {
+        root.render(<InvalidComponent />);
+      });
+    }).toErrorDev(
       'InvalidComponent contains a textarea with both value and defaultValue props. ' +
         'Textarea elements must be either controlled or uncontrolled ' +
         '(specify either the value prop, or the defaultValue prop, but not ' +
@@ -564,18 +734,33 @@ describe('ReactDOMTextarea', () => {
         'https://reactjs.org/link/controlled-components',
     );
 
-    // No additional warnings are expected
-    ReactTestUtils.renderIntoDocument(<InvalidComponent />);
+    container = document.createElement('div');
+    root = ReactDOMClient.createRoot(container);
+
+    await act(() => {
+      root.render(<InvalidComponent />);
+    });
   });
 
-  it('should not warn about missing onChange in uncontrolled textareas', () => {
+  it('should not warn about missing onChange in uncontrolled textareas', async () => {
     const container = document.createElement('div');
-    ReactDOM.render(<textarea />, container);
-    ReactDOM.unmountComponentAtNode(container);
-    ReactDOM.render(<textarea value={undefined} />, container);
+    let root = ReactDOMClient.createRoot(container);
+
+    await act(() => {
+      root.render(<textarea />);
+    });
+
+    await act(() => {
+      root.unmount();
+    });
+    root = ReactDOMClient.createRoot(container);
+
+    await act(() => {
+      root.render(<textarea value={undefined} />);
+    });
   });
 
-  it('does not set textContent if value is unchanged', () => {
+  it('does not set textContent if value is unchanged', async () => {
     const container = document.createElement('div');
     let node;
     let instance;
@@ -609,7 +794,11 @@ describe('ReactDOMTextarea', () => {
         );
       }
     }
-    ReactDOM.render(<App />, container);
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<App />);
+    });
+
     defaultValue = node.defaultValue;
     Object.defineProperty(node, 'defaultValue', {get, set});
     instance.setState({count: 1});
@@ -617,59 +806,77 @@ describe('ReactDOMTextarea', () => {
   });
 
   describe('When given a Symbol value', () => {
-    it('treats initial Symbol value as an empty string', () => {
+    it('treats initial Symbol value as an empty string', async () => {
       const container = document.createElement('div');
-      expect(() =>
-        ReactDOM.render(
-          <textarea value={Symbol('foobar')} onChange={() => {}} />,
-          container,
-        ),
-      ).toErrorDev('Invalid value for prop `value`');
+      const root = ReactDOMClient.createRoot(container);
+      await expect(async () => {
+        await act(() => {
+          root.render(
+            <textarea value={Symbol('foobar')} onChange={() => {}} />,
+          );
+        });
+      }).toErrorDev('Invalid value for prop `value`');
       const node = container.firstChild;
 
       expect(node.value).toBe('');
     });
 
-    it('treats initial Symbol children as an empty string', () => {
+    it('treats initial Symbol children as an empty string', async () => {
       const container = document.createElement('div');
-      expect(() =>
-        ReactDOM.render(
-          <textarea onChange={() => {}}>{Symbol('foo')}</textarea>,
-          container,
-        ),
-      ).toErrorDev('Use the `defaultValue` or `value` props');
+      const root = ReactDOMClient.createRoot(container);
+      await expect(async () => {
+        await act(() => {
+          root.render(<textarea onChange={() => {}}>{Symbol('foo')}</textarea>);
+        });
+      }).toErrorDev('Use the `defaultValue` or `value` props');
       const node = container.firstChild;
 
       expect(node.value).toBe('');
     });
 
-    it('treats updated Symbol value as an empty string', () => {
+    it('treats updated Symbol value as an empty string', async () => {
       const container = document.createElement('div');
-      ReactDOM.render(<textarea value="foo" onChange={() => {}} />, container);
-      expect(() =>
-        ReactDOM.render(
-          <textarea value={Symbol('foo')} onChange={() => {}} />,
-          container,
-        ),
-      ).toErrorDev('Invalid value for prop `value`');
+      const root = ReactDOMClient.createRoot(container);
+
+      await act(() => {
+        root.render(<textarea value="foo" onChange={() => {}} />);
+      });
+
+      await expect(async () => {
+        await act(() => {
+          root.render(<textarea value={Symbol('foo')} onChange={() => {}} />);
+        });
+      }).toErrorDev('Invalid value for prop `value`');
       const node = container.firstChild;
 
       expect(node.value).toBe('');
     });
 
-    it('treats initial Symbol defaultValue as an empty string', () => {
+    it('treats initial Symbol defaultValue as an empty string', async () => {
       const container = document.createElement('div');
-      ReactDOM.render(<textarea defaultValue={Symbol('foobar')} />, container);
+      const root = ReactDOMClient.createRoot(container);
+
+      await act(() => {
+        root.render(<textarea defaultValue={Symbol('foobar')} />);
+      });
+
       const node = container.firstChild;
 
       // TODO: defaultValue is a reserved prop and is not validated. Check warnings when they are.
       expect(node.value).toBe('');
     });
 
-    it('treats updated Symbol defaultValue as an empty string', () => {
+    it('treats updated Symbol defaultValue as an empty string', async () => {
       const container = document.createElement('div');
-      ReactDOM.render(<textarea defaultValue="foo" />, container);
-      ReactDOM.render(<textarea defaultValue={Symbol('foobar')} />, container);
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<textarea defaultValue="foo" />);
+      });
+
+      await act(() => {
+        root.render(<textarea defaultValue={Symbol('foobar')} />);
+      });
+
       const node = container.firstChild;
 
       // TODO: defaultValue is a reserved prop and is not validated. Check warnings when they are.
@@ -678,59 +885,76 @@ describe('ReactDOMTextarea', () => {
   });
 
   describe('When given a function value', () => {
-    it('treats initial function value as an empty string', () => {
+    it('treats initial function value as an empty string', async () => {
       const container = document.createElement('div');
-      expect(() =>
-        ReactDOM.render(
-          <textarea value={() => {}} onChange={() => {}} />,
-          container,
-        ),
-      ).toErrorDev('Invalid value for prop `value`');
+      await expect(async () => {
+        const root = ReactDOMClient.createRoot(container);
+
+        await act(() => {
+          root.render(<textarea value={() => {}} onChange={() => {}} />);
+        });
+      }).toErrorDev('Invalid value for prop `value`');
       const node = container.firstChild;
 
       expect(node.value).toBe('');
     });
 
-    it('treats initial function children as an empty string', () => {
+    it('treats initial function children as an empty string', async () => {
       const container = document.createElement('div');
-      expect(() =>
-        ReactDOM.render(
-          <textarea onChange={() => {}}>{() => {}}</textarea>,
-          container,
-        ),
-      ).toErrorDev('Use the `defaultValue` or `value` props');
+      await expect(async () => {
+        const root = ReactDOMClient.createRoot(container);
+
+        await act(() => {
+          root.render(<textarea onChange={() => {}}>{() => {}}</textarea>);
+        });
+      }).toErrorDev('Use the `defaultValue` or `value` props');
       const node = container.firstChild;
 
       expect(node.value).toBe('');
     });
 
-    it('treats updated function value as an empty string', () => {
+    it('treats updated function value as an empty string', async () => {
       const container = document.createElement('div');
-      ReactDOM.render(<textarea value="foo" onChange={() => {}} />, container);
-      expect(() =>
-        ReactDOM.render(
-          <textarea value={() => {}} onChange={() => {}} />,
-          container,
-        ),
-      ).toErrorDev('Invalid value for prop `value`');
+      const root = ReactDOMClient.createRoot(container);
+
+      await act(() => {
+        root.render(<textarea value="foo" onChange={() => {}} />);
+      });
+
+      await expect(async () => {
+        await act(() => {
+          root.render(<textarea value={() => {}} onChange={() => {}} />);
+        });
+      }).toErrorDev('Invalid value for prop `value`');
       const node = container.firstChild;
 
       expect(node.value).toBe('');
     });
 
-    it('treats initial function defaultValue as an empty string', () => {
+    it('treats initial function defaultValue as an empty string', async () => {
       const container = document.createElement('div');
-      ReactDOM.render(<textarea defaultValue={() => {}} />, container);
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<textarea defaultValue={() => {}} />);
+      });
+
       const node = container.firstChild;
 
       // TODO: defaultValue is a reserved prop and is not validated. Check warnings when they are.
       expect(node.value).toBe('');
     });
 
-    it('treats updated function defaultValue as an empty string', () => {
+    it('treats updated function defaultValue as an empty string', async () => {
       const container = document.createElement('div');
-      ReactDOM.render(<textarea defaultValue="foo" />, container);
-      ReactDOM.render(<textarea defaultValue={() => {}} />, container);
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<textarea defaultValue="foo" />);
+      });
+
+      await act(() => {
+        root.render(<textarea defaultValue={() => {}} />);
+      });
+
       const node = container.firstChild;
 
       // TODO: defaultValue is a reserved prop and is not validated. Check warnings when they are.
@@ -738,69 +962,103 @@ describe('ReactDOMTextarea', () => {
     });
   });
 
-  it('should remove previous `defaultValue`', () => {
+  it('should remove previous `defaultValue`', async () => {
     const container = document.createElement('div');
-    const node = ReactDOM.render(<textarea defaultValue="0" />, container);
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<textarea defaultValue="0" />);
+    });
+
+    const node = container.firstChild;
 
     expect(node.value).toBe('0');
     expect(node.defaultValue).toBe('0');
 
-    ReactDOM.render(<textarea />, container);
+    await act(() => {
+      root.render(<textarea />);
+    });
+
     expect(node.defaultValue).toBe('');
   });
 
-  it('should treat `defaultValue={null}` as missing', () => {
+  it('should treat `defaultValue={null}` as missing', async () => {
     const container = document.createElement('div');
-    const node = ReactDOM.render(<textarea defaultValue="0" />, container);
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<textarea defaultValue="0" />);
+    });
+
+    const node = container.firstChild;
 
     expect(node.value).toBe('0');
     expect(node.defaultValue).toBe('0');
 
-    ReactDOM.render(<textarea defaultValue={null} />, container);
+    await act(() => {
+      root.render(<textarea defaultValue={null} />);
+    });
+
     expect(node.defaultValue).toBe('');
   });
 
-  it('should not warn about missing onChange if value is not set', () => {
-    expect(() => {
-      ReactTestUtils.renderIntoDocument(<textarea />);
-    }).not.toThrow();
+  it('should not warn about missing onChange if value is not set', async () => {
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await expect(
+      act(() => {
+        root.render(<textarea />);
+      }),
+    ).resolves.not.toThrow();
   });
 
-  it('should not warn about missing onChange if value is undefined', () => {
-    expect(() => {
-      ReactTestUtils.renderIntoDocument(<textarea value={undefined} />);
-    }).not.toThrow();
+  it('should not warn about missing onChange if value is undefined', async () => {
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await expect(
+      act(() => {
+        root.render(<textarea value={undefined} />);
+      }),
+    ).resolves.not.toThrow();
   });
 
-  it('should not warn about missing onChange if onChange is set', () => {
-    expect(() => {
-      const change = jest.fn();
-      ReactTestUtils.renderIntoDocument(
-        <textarea value="something" onChange={change} />,
-      );
-    }).not.toThrow();
+  it('should not warn about missing onChange if onChange is set', async () => {
+    const change = jest.fn();
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await expect(
+      act(() => {
+        root.render(<textarea value="something" onChange={change} />);
+      }),
+    ).resolves.not.toThrow();
   });
 
-  it('should not warn about missing onChange if disabled is true', () => {
-    expect(() => {
-      ReactTestUtils.renderIntoDocument(
-        <textarea value="something" disabled={true} />,
-      );
-    }).not.toThrow();
+  it('should not warn about missing onChange if disabled is true', async () => {
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await expect(
+      act(() => {
+        root.render(<textarea value="something" disabled={true} />);
+      }),
+    ).resolves.not.toThrow();
   });
 
-  it('should not warn about missing onChange if value is not set', () => {
-    expect(() => {
-      ReactTestUtils.renderIntoDocument(
-        <textarea value="something" readOnly={true} />,
-      );
-    }).not.toThrow();
+  it('should not warn about missing onChange if value is not set', async () => {
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await expect(
+      act(() => {
+        root.render(<textarea value="something" readOnly={true} />);
+      }),
+    ).resolves.not.toThrow();
   });
 
-  it('should warn about missing onChange if value is false', () => {
-    expect(() =>
-      ReactTestUtils.renderIntoDocument(<textarea value={false} />),
-    ).toErrorDev(
+  it('should warn about missing onChange if value is false', async () => {
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await expect(async () => {
+      await act(() => {
+        root.render(<textarea value={false} />);
+      });
+    }).toErrorDev(
       'Warning: You provided a `value` prop to a form ' +
         'field without an `onChange` handler. This will render a read-only ' +
         'field. If the field should be mutable use `defaultValue`. ' +
@@ -808,10 +1066,14 @@ describe('ReactDOMTextarea', () => {
     );
   });
 
-  it('should warn about missing onChange if value is 0', () => {
-    expect(() =>
-      ReactTestUtils.renderIntoDocument(<textarea value={0} />),
-    ).toErrorDev(
+  it('should warn about missing onChange if value is 0', async () => {
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await expect(async () => {
+      await act(() => {
+        root.render(<textarea value={0} />);
+      });
+    }).toErrorDev(
       'Warning: You provided a `value` prop to a form ' +
         'field without an `onChange` handler. This will render a read-only ' +
         'field. If the field should be mutable use `defaultValue`. ' +
@@ -819,10 +1081,14 @@ describe('ReactDOMTextarea', () => {
     );
   });
 
-  it('should warn about missing onChange if value is "0"', () => {
-    expect(() =>
-      ReactTestUtils.renderIntoDocument(<textarea value="0" />),
-    ).toErrorDev(
+  it('should warn about missing onChange if value is "0"', async () => {
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await expect(async () => {
+      await act(() => {
+        root.render(<textarea value="0" />);
+      });
+    }).toErrorDev(
       'Warning: You provided a `value` prop to a form ' +
         'field without an `onChange` handler. This will render a read-only ' +
         'field. If the field should be mutable use `defaultValue`. ' +
@@ -830,10 +1096,14 @@ describe('ReactDOMTextarea', () => {
     );
   });
 
-  it('should warn about missing onChange if value is ""', () => {
-    expect(() =>
-      ReactTestUtils.renderIntoDocument(<textarea value="" />),
-    ).toErrorDev(
+  it('should warn about missing onChange if value is ""', async () => {
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await expect(async () => {
+      await act(() => {
+        root.render(<textarea value="" />);
+      });
+    }).toErrorDev(
       'Warning: You provided a `value` prop to a form ' +
         'field without an `onChange` handler. This will render a read-only ' +
         'field. If the field should be mutable use `defaultValue`. ' +

From ce278d4972b76e46dfc312b757190e660cb7c31f Mon Sep 17 00:00:00 2001
From: Sebastian Silbermann <sebastian.silbermann@klarna.com>
Date: Sat, 27 Jan 2024 14:02:39 +0100
Subject: [PATCH 2/3] fixup! Convert ReactDOMTextarea to createRoot

---
 .../src/__tests__/ReactDOMTextarea-test.js    |   2 -
 packages/react/src/__tests__/codemod.js       | 201 ++++++++++++++++++
 2 files changed, 201 insertions(+), 2 deletions(-)
 create mode 100644 packages/react/src/__tests__/codemod.js

diff --git a/packages/react-dom/src/__tests__/ReactDOMTextarea-test.js b/packages/react-dom/src/__tests__/ReactDOMTextarea-test.js
index adc6ba415a7c3..3d21ca64e399e 100644
--- a/packages/react-dom/src/__tests__/ReactDOMTextarea-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMTextarea-test.js
@@ -115,11 +115,9 @@ describe('ReactDOMTextarea', () => {
     await act(() => {
       root.render(<textarea defaultValue="foo" />);
     });
-
     await act(() => {
       root.render(<textarea defaultValue="bar" />);
     });
-
     await act(() => {
       root.render(<textarea defaultValue="noise" />);
     });
diff --git a/packages/react/src/__tests__/codemod.js b/packages/react/src/__tests__/codemod.js
new file mode 100644
index 0000000000000..7cd6d492cc043
--- /dev/null
+++ b/packages/react/src/__tests__/codemod.js
@@ -0,0 +1,201 @@
+// jscodeshift can take a parser, like "babel", "babylon", "flow", "ts", or "tsx"
+// Read more: https://github.com/facebook/jscodeshift#parser
+export const parser = 'flow';
+
+// Press ctrl+space for code completion
+export default function transformer(file, api) {
+  const j = api.jscodeshift;
+
+  return j(file.source)
+    .find(j.ExpressionStatement)
+    .forEach(path => {
+      const {
+        node: {
+          expression: {callee},
+        },
+      } = path;
+
+      if (
+        callee !== undefined &&
+        callee.type === 'MemberExpression' &&
+        callee.object.type === 'Identifier' &&
+        callee.object.name === 'ReactDOM' &&
+        callee.property.type === 'Identifier' &&
+        callee.property.name === 'render'
+      ) {
+        // replace ReactDOM.render with
+        // const root = ReactDOMClient.createRoot(container);
+        // await act(() => { root.render() })
+        const [element, container] = path.node.expression.arguments;
+        j(path).insertBefore([
+          j.variableDeclaration('const', [
+            j.variableDeclarator(
+              j.identifier('root'),
+              j.callExpression(
+                j.memberExpression(
+                  j.identifier('ReactDOMClient'),
+                  j.identifier('createRoot'),
+                ),
+                [container],
+              ),
+            ),
+          ]),
+        ]);
+        j(path).replaceWith(
+          j.expressionStatement(
+            j.awaitExpression(
+              j.callExpression(j.identifier('act'), [
+                j.arrowFunctionExpression(
+                  [],
+                  j.blockStatement([
+                    j.expressionStatement(
+                      j.callExpression(
+                        j.memberExpression(
+                          j.identifier('root'),
+                          j.identifier('render'),
+                        ),
+                        [element],
+                      ),
+                    ),
+                  ]),
+                ),
+              ]),
+            ),
+          ),
+        );
+
+        path.parent.parent.value.async = true;
+      } else if (
+        callee !== undefined &&
+        callee.type === 'MemberExpression' &&
+        callee.object.type === 'Identifier' &&
+        callee.object.name === 'ReactTestUtils' &&
+        callee.property.type === 'Identifier' &&
+        callee.property.name === 'renderIntoDocument'
+      ) {
+        // replace ReactTestUtils.renderIntoDocument with
+        // const container = document.createElement('div')
+        // const root = ReactDOMClient.createRoot(container);
+        // await act(() => { root.render() })
+        const [element] = path.node.expression.arguments;
+        j(path).insertBefore([
+          j.variableDeclaration('const', [
+            j.variableDeclarator(
+              j.identifier('container'),
+              j.callExpression(j.identifier('document.createElement'), [
+                j.literal('div'),
+              ]),
+            ),
+          ]),
+          j.variableDeclaration('const', [
+            j.variableDeclarator(
+              j.identifier('root'),
+              j.callExpression(
+                j.memberExpression(
+                  j.identifier('ReactDOMClient'),
+                  j.identifier('createRoot'),
+                ),
+                [j.identifier('container')],
+              ),
+            ),
+          ]),
+        ]);
+        j(path).replaceWith(
+          j.expressionStatement(
+            j.awaitExpression(
+              j.callExpression(j.identifier('act'), [
+                j.arrowFunctionExpression(
+                  [],
+                  j.blockStatement([
+                    j.expressionStatement(
+                      j.callExpression(
+                        j.memberExpression(
+                          j.identifier('root'),
+                          j.identifier('render'),
+                        ),
+                        [element],
+                      ),
+                    ),
+                  ]),
+                ),
+              ]),
+            ),
+          ),
+        );
+
+        path.parent.parent.value.async = true;
+      }
+    })
+    .find(j.VariableDeclaration)
+    .forEach(path => {
+      const {
+        node: {declarations},
+      } = path;
+      if (
+        declarations.length === 1 &&
+        declarations[0].init !== null &&
+        declarations[0].init.type === 'CallExpression'
+      ) {
+        const {arguments: args, callee} = declarations[0].init;
+        if (
+          callee !== undefined &&
+          callee.type === 'MemberExpression' &&
+          callee.object.type === 'Identifier' &&
+          callee.object.name === 'ReactDOM' &&
+          callee.property.type === 'Identifier' &&
+          callee.property.name === 'render'
+        ) {
+          // replace const node = ReactDOM.render(element, container) with
+          // const root = ReactDOMClient.createRoot(container);
+          // await act(() => { root.render() })
+          // const node = container.firstChild;
+          const [element, container] = args;
+          j(path).insertBefore([
+            j.variableDeclaration('const', [
+              j.variableDeclarator(
+                j.identifier('root'),
+                j.callExpression(
+                  j.memberExpression(
+                    j.identifier('ReactDOMClient'),
+                    j.identifier('createRoot'),
+                  ),
+                  [container],
+                ),
+              ),
+            ]),
+            j.expressionStatement(
+              j.awaitExpression(
+                j.callExpression(j.identifier('act'), [
+                  j.arrowFunctionExpression(
+                    [],
+                    j.blockStatement([
+                      j.expressionStatement(
+                        j.callExpression(
+                          j.memberExpression(
+                            j.identifier('root'),
+                            j.identifier('render'),
+                          ),
+                          [element],
+                        ),
+                      ),
+                    ]),
+                  ),
+                ]),
+              ),
+            ),
+          ]);
+          j(path).replaceWith(
+            j.variableDeclaration('const', [
+              j.variableDeclarator(
+                j.identifier(declarations[0].id.name),
+                j.identifier('container.firstChild'),
+              ),
+            ]),
+          );
+
+          path.parent.parent.value.async = true;
+        }
+      }
+    })
+    .toSource();
+}

From cd678c898028c0aa50e67325083968180f617f3d Mon Sep 17 00:00:00 2001
From: Sebastian Silbermann <sebastian.silbermann@klarna.com>
Date: Sun, 28 Jan 2024 10:42:30 +0100
Subject: [PATCH 3/3] Revert accidental commit

---
 packages/react/src/__tests__/codemod.js | 201 ------------------------
 1 file changed, 201 deletions(-)
 delete mode 100644 packages/react/src/__tests__/codemod.js

diff --git a/packages/react/src/__tests__/codemod.js b/packages/react/src/__tests__/codemod.js
deleted file mode 100644
index 7cd6d492cc043..0000000000000
--- a/packages/react/src/__tests__/codemod.js
+++ /dev/null
@@ -1,201 +0,0 @@
-// jscodeshift can take a parser, like "babel", "babylon", "flow", "ts", or "tsx"
-// Read more: https://github.com/facebook/jscodeshift#parser
-export const parser = 'flow';
-
-// Press ctrl+space for code completion
-export default function transformer(file, api) {
-  const j = api.jscodeshift;
-
-  return j(file.source)
-    .find(j.ExpressionStatement)
-    .forEach(path => {
-      const {
-        node: {
-          expression: {callee},
-        },
-      } = path;
-
-      if (
-        callee !== undefined &&
-        callee.type === 'MemberExpression' &&
-        callee.object.type === 'Identifier' &&
-        callee.object.name === 'ReactDOM' &&
-        callee.property.type === 'Identifier' &&
-        callee.property.name === 'render'
-      ) {
-        // replace ReactDOM.render with
-        // const root = ReactDOMClient.createRoot(container);
-        // await act(() => { root.render() })
-        const [element, container] = path.node.expression.arguments;
-        j(path).insertBefore([
-          j.variableDeclaration('const', [
-            j.variableDeclarator(
-              j.identifier('root'),
-              j.callExpression(
-                j.memberExpression(
-                  j.identifier('ReactDOMClient'),
-                  j.identifier('createRoot'),
-                ),
-                [container],
-              ),
-            ),
-          ]),
-        ]);
-        j(path).replaceWith(
-          j.expressionStatement(
-            j.awaitExpression(
-              j.callExpression(j.identifier('act'), [
-                j.arrowFunctionExpression(
-                  [],
-                  j.blockStatement([
-                    j.expressionStatement(
-                      j.callExpression(
-                        j.memberExpression(
-                          j.identifier('root'),
-                          j.identifier('render'),
-                        ),
-                        [element],
-                      ),
-                    ),
-                  ]),
-                ),
-              ]),
-            ),
-          ),
-        );
-
-        path.parent.parent.value.async = true;
-      } else if (
-        callee !== undefined &&
-        callee.type === 'MemberExpression' &&
-        callee.object.type === 'Identifier' &&
-        callee.object.name === 'ReactTestUtils' &&
-        callee.property.type === 'Identifier' &&
-        callee.property.name === 'renderIntoDocument'
-      ) {
-        // replace ReactTestUtils.renderIntoDocument with
-        // const container = document.createElement('div')
-        // const root = ReactDOMClient.createRoot(container);
-        // await act(() => { root.render() })
-        const [element] = path.node.expression.arguments;
-        j(path).insertBefore([
-          j.variableDeclaration('const', [
-            j.variableDeclarator(
-              j.identifier('container'),
-              j.callExpression(j.identifier('document.createElement'), [
-                j.literal('div'),
-              ]),
-            ),
-          ]),
-          j.variableDeclaration('const', [
-            j.variableDeclarator(
-              j.identifier('root'),
-              j.callExpression(
-                j.memberExpression(
-                  j.identifier('ReactDOMClient'),
-                  j.identifier('createRoot'),
-                ),
-                [j.identifier('container')],
-              ),
-            ),
-          ]),
-        ]);
-        j(path).replaceWith(
-          j.expressionStatement(
-            j.awaitExpression(
-              j.callExpression(j.identifier('act'), [
-                j.arrowFunctionExpression(
-                  [],
-                  j.blockStatement([
-                    j.expressionStatement(
-                      j.callExpression(
-                        j.memberExpression(
-                          j.identifier('root'),
-                          j.identifier('render'),
-                        ),
-                        [element],
-                      ),
-                    ),
-                  ]),
-                ),
-              ]),
-            ),
-          ),
-        );
-
-        path.parent.parent.value.async = true;
-      }
-    })
-    .find(j.VariableDeclaration)
-    .forEach(path => {
-      const {
-        node: {declarations},
-      } = path;
-      if (
-        declarations.length === 1 &&
-        declarations[0].init !== null &&
-        declarations[0].init.type === 'CallExpression'
-      ) {
-        const {arguments: args, callee} = declarations[0].init;
-        if (
-          callee !== undefined &&
-          callee.type === 'MemberExpression' &&
-          callee.object.type === 'Identifier' &&
-          callee.object.name === 'ReactDOM' &&
-          callee.property.type === 'Identifier' &&
-          callee.property.name === 'render'
-        ) {
-          // replace const node = ReactDOM.render(element, container) with
-          // const root = ReactDOMClient.createRoot(container);
-          // await act(() => { root.render() })
-          // const node = container.firstChild;
-          const [element, container] = args;
-          j(path).insertBefore([
-            j.variableDeclaration('const', [
-              j.variableDeclarator(
-                j.identifier('root'),
-                j.callExpression(
-                  j.memberExpression(
-                    j.identifier('ReactDOMClient'),
-                    j.identifier('createRoot'),
-                  ),
-                  [container],
-                ),
-              ),
-            ]),
-            j.expressionStatement(
-              j.awaitExpression(
-                j.callExpression(j.identifier('act'), [
-                  j.arrowFunctionExpression(
-                    [],
-                    j.blockStatement([
-                      j.expressionStatement(
-                        j.callExpression(
-                          j.memberExpression(
-                            j.identifier('root'),
-                            j.identifier('render'),
-                          ),
-                          [element],
-                        ),
-                      ),
-                    ]),
-                  ),
-                ]),
-              ),
-            ),
-          ]);
-          j(path).replaceWith(
-            j.variableDeclaration('const', [
-              j.variableDeclarator(
-                j.identifier(declarations[0].id.name),
-                j.identifier('container.firstChild'),
-              ),
-            ]),
-          );
-
-          path.parent.parent.value.async = true;
-        }
-      }
-    })
-    .toSource();
-}