From 31d44f8c86aba1d6cdfef7fa7d7c4e8f636411c2 Mon Sep 17 00:00:00 2001
From: Ricky Hanlon <rickhanlonii@gmail.com>
Date: Thu, 18 Jan 2024 22:05:28 -0500
Subject: [PATCH] Convert ReactFunctionComponent to createRoot

---
 .../__tests__/ReactFunctionComponent-test.js  | 80 +++++++++++++------
 1 file changed, 54 insertions(+), 26 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactFunctionComponent-test.js b/packages/react-dom/src/__tests__/ReactFunctionComponent-test.js
index b30293f548b50..1ec444bea047c 100644
--- a/packages/react-dom/src/__tests__/ReactFunctionComponent-test.js
+++ b/packages/react-dom/src/__tests__/ReactFunctionComponent-test.js
@@ -11,8 +11,9 @@
 
 let PropTypes;
 let React;
-let ReactDOM;
+let ReactDOMClient;
 let ReactTestUtils;
+let act;
 
 function FunctionComponent(props) {
   return <div>{props.name}</div>;
@@ -23,18 +24,23 @@ describe('ReactFunctionComponent', () => {
     jest.resetModules();
     PropTypes = require('prop-types');
     React = require('react');
-    ReactDOM = require('react-dom');
+    ReactDOMClient = require('react-dom/client');
+    act = require('internal-test-utils').act;
     ReactTestUtils = require('react-dom/test-utils');
   });
 
-  it('should render stateless component', () => {
+  it('should render stateless component', async () => {
     const el = document.createElement('div');
-    ReactDOM.render(<FunctionComponent name="A" />, el);
+
+    const root = ReactDOMClient.createRoot(el);
+    await act(() => {
+      root.render(<FunctionComponent name="A" />);
+    });
 
     expect(el.textContent).toBe('A');
   });
 
-  it('should update stateless component', () => {
+  it('should update stateless component', async () => {
     class Parent extends React.Component {
       render() {
         return <FunctionComponent {...this.props} />;
@@ -42,25 +48,34 @@ describe('ReactFunctionComponent', () => {
     }
 
     const el = document.createElement('div');
-    ReactDOM.render(<Parent name="A" />, el);
+
+    const root = ReactDOMClient.createRoot(el);
+    await act(() => {
+      root.render(<Parent name="A" />);
+    });
     expect(el.textContent).toBe('A');
 
-    ReactDOM.render(<Parent name="B" />, el);
+    await act(() => {
+      root.render(<Parent name="B" />);
+    });
     expect(el.textContent).toBe('B');
   });
 
-  it('should unmount stateless component', () => {
+  it('should unmount stateless component', async () => {
     const container = document.createElement('div');
 
-    ReactDOM.render(<FunctionComponent name="A" />, container);
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<FunctionComponent name="A" />);
+    });
     expect(container.textContent).toBe('A');
 
-    ReactDOM.unmountComponentAtNode(container);
+    root.unmount();
     expect(container.textContent).toBe('');
   });
 
   // @gate !disableLegacyContext
-  it('should pass context thru stateless component', () => {
+  it('should pass context thru stateless component', async () => {
     class Child extends React.Component {
       static contextTypes = {
         test: PropTypes.string.isRequired,
@@ -90,16 +105,22 @@ describe('ReactFunctionComponent', () => {
     }
 
     const el = document.createElement('div');
-    ReactDOM.render(<GrandParent test="test" />, el);
+
+    const root = ReactDOMClient.createRoot(el);
+    await act(() => {
+      root.render(<GrandParent test="test" />);
+    });
 
     expect(el.textContent).toBe('test');
 
-    ReactDOM.render(<GrandParent test="mest" />, el);
+    await act(() => {
+      root.render(<GrandParent test="mest" />);
+    });
 
     expect(el.textContent).toBe('mest');
   });
 
-  it('should warn for getDerivedStateFromProps on a function component', () => {
+  it('should warn for getDerivedStateFromProps on a function component', async () => {
     function FunctionComponentWithChildContext() {
       return null;
     }
@@ -107,15 +128,18 @@ describe('ReactFunctionComponent', () => {
 
     const container = document.createElement('div');
 
-    expect(() =>
-      ReactDOM.render(<FunctionComponentWithChildContext />, container),
-    ).toErrorDev(
+    await expect(async () => {
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<FunctionComponentWithChildContext />);
+      });
+    }).toErrorDev(
       'FunctionComponentWithChildContext: Function ' +
         'components do not support getDerivedStateFromProps.',
     );
   });
 
-  it('should warn for childContextTypes on a function component', () => {
+  it('should warn for childContextTypes on a function component', async () => {
     function FunctionComponentWithChildContext(props) {
       return <div>{props.name}</div>;
     }
@@ -126,12 +150,12 @@ describe('ReactFunctionComponent', () => {
 
     const container = document.createElement('div');
 
-    expect(() =>
-      ReactDOM.render(
-        <FunctionComponentWithChildContext name="A" />,
-        container,
-      ),
-    ).toErrorDev(
+    await expect(async () => {
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<FunctionComponentWithChildContext name="A" />);
+      });
+    }).toErrorDev(
       'FunctionComponentWithChildContext(...): childContextTypes cannot ' +
         'be defined on a function component.',
     );
@@ -378,7 +402,7 @@ describe('ReactFunctionComponent', () => {
   });
 
   // @gate !disableLegacyContext
-  it('should receive context', () => {
+  it('should receive context', async () => {
     class Parent extends React.Component {
       static childContextTypes = {
         lang: PropTypes.string,
@@ -399,7 +423,11 @@ describe('ReactFunctionComponent', () => {
     Child.contextTypes = {lang: PropTypes.string};
 
     const el = document.createElement('div');
-    ReactDOM.render(<Parent />, el);
+
+    const root = ReactDOMClient.createRoot(el);
+    await act(() => {
+      root.render(<Parent />);
+    });
     expect(el.textContent).toBe('en');
   });