Convert ReactDOMFiberAsync to createRoot (#28067)

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

@@ -50,7 +50,7 @@ describe('ReactDOMFiberAsync', () => {
     document.body.removeChild(container);
   });
 
-  it('renders synchronously by default', () => {
+  it('renders synchronously by default in legacy mode', () => {
     const ops = [];
     ReactDOM.render(<div>Hi</div>, container, () => {
       ops.push(container.textContent);
@@ -61,12 +61,16 @@ describe('ReactDOMFiberAsync', () => {
     expect(ops).toEqual(['Hi', 'Bye']);
   });
 
-  it('flushSync batches sync updates and flushes them at the end of the batch', () => {
+  it('flushSync batches sync updates and flushes them at the end of the batch', async () => {
     const ops = [];
     let instance;
 
     class Component extends React.Component {
       state = {text: ''};
+      componentDidMount() {
+        instance = this;
+      }
+
       push(val) {
         this.setState(state => ({text: state.text + val}));
       }
@@ -79,9 +83,13 @@ describe('ReactDOMFiberAsync', () => {
       }
     }
 
-    ReactDOM.render(<Component />, container);
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => root.render(<Component />));
+
+    await act(() => {
+      instance.push('A');
+    });
 
-    instance.push('A');
     expect(ops).toEqual(['A']);
     expect(container.textContent).toEqual('A');
 
@@ -92,19 +100,26 @@ describe('ReactDOMFiberAsync', () => {
       expect(container.textContent).toEqual('A');
       expect(ops).toEqual(['A']);
     });
+
     expect(container.textContent).toEqual('ABC');
     expect(ops).toEqual(['A', 'ABC']);
-    instance.push('D');
+    await act(() => {
+      instance.push('D');
+    });
     expect(container.textContent).toEqual('ABCD');
     expect(ops).toEqual(['A', 'ABC', 'ABCD']);
   });
 
-  it('flushSync flushes updates even if nested inside another flushSync', () => {
+  it('flushSync flushes updates even if nested inside another flushSync', async () => {
     const ops = [];
     let instance;
 
     class Component extends React.Component {
       state = {text: ''};
+      componentDidMount() {
+        instance = this;
+      }
+
       push(val) {
         this.setState(state => ({text: state.text + val}));
       }
@@ -117,9 +132,12 @@ describe('ReactDOMFiberAsync', () => {
       }
     }
 
-    ReactDOM.render(<Component />, container);
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => root.render(<Component />));
 
-    instance.push('A');
+    await act(() => {
+      instance.push('A');
+    });
     expect(ops).toEqual(['A']);
     expect(container.textContent).toEqual('A');
 
@@ -141,7 +159,7 @@ describe('ReactDOMFiberAsync', () => {
     expect(ops).toEqual(['A', 'ABCD']);
   });
 
-  it('flushSync logs an error if already performing work', () => {
+  it('flushSync logs an error if already performing work', async () => {
     class Component extends React.Component {
       componentDidUpdate() {
         ReactDOM.flushSync();
@@ -152,11 +170,16 @@ describe('ReactDOMFiberAsync', () => {
     }
 
     // Initial mount
-    ReactDOM.render(<Component />, container);
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<Component />);
+    });
     // Update
-    expect(() => ReactDOM.render(<Component />, container)).toErrorDev(
-      'flushSync was called from inside a lifecycle method',
-    );
+    expect(() => {
+      ReactDOM.flushSync(() => {
+        root.render(<Component />);
+      });
+    }).toErrorDev('flushSync was called from inside a lifecycle method');
   });
 
   describe('concurrent mode', () => {
@@ -492,11 +515,14 @@ describe('ReactDOMFiberAsync', () => {
     const containerA = document.createElement('div');
     const containerB = document.createElement('div');
     const containerC = document.createElement('div');
+    const rootA = ReactDOMClient.createRoot(containerA);
+    const rootB = ReactDOMClient.createRoot(containerB);
+    const rootC = ReactDOMClient.createRoot(containerC);
 
     await act(() => {
-      ReactDOM.render(<App label="A" />, containerA);
-      ReactDOM.render(<App label="B" />, containerB);
-      ReactDOM.render(<App label="C" />, containerC);
+      rootA.render(<App label="A" />);
+      rootB.render(<App label="B" />);
+      rootC.render(<App label="C" />);
     });
 
     expect(containerA.textContent).toEqual('Finished');