Convert createReactClassIntegration to createRoot (#28196)

Author: eps1lon

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

@@ -14,7 +14,6 @@ let act;
 let PropTypes;
 let React;
 let ReactDOMClient;
-let ReactTestUtils;
 let createReactClass;
 
 describe('create-react-class-integration', () => {
@@ -24,7 +23,6 @@ describe('create-react-class-integration', () => {
     PropTypes = require('prop-types');
     React = require('react');
     ReactDOMClient = require('react-dom/client');
-    ReactTestUtils = require('react-dom/test-utils');
     createReactClass = require('create-react-class/factory')(
       React.Component,
       React.isValidElement,
@@ -231,7 +229,7 @@ describe('create-react-class-integration', () => {
     ]);
   });
 
-  it('should support statics', () => {
+  it('should support statics', async () => {
     const Component = createReactClass({
       statics: {
         abc: 'def',
@@ -247,8 +245,13 @@ describe('create-react-class-integration', () => {
         return <span />;
       },
     });
-    let instance = <Component />;
-    instance = ReactTestUtils.renderIntoDocument(instance);
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    let instance;
+    await act(() => {
+      root.render(<Component ref={current => (instance = current)} />);
+    });
+
     expect(instance.constructor.abc).toBe('def');
     expect(Component.abc).toBe('def');
     expect(instance.constructor.def).toBe(0);
@@ -261,7 +264,7 @@ describe('create-react-class-integration', () => {
     expect(Component.pqr()).toBe(Component);
   });
 
-  it('should work with object getInitialState() return values', () => {
+  it('should work with object getInitialState() return values', async () => {
     const Component = createReactClass({
       getInitialState: function () {
         return {
@@ -272,12 +275,17 @@ describe('create-react-class-integration', () => {
         return <span />;
       },
     });
-    let instance = <Component />;
-    instance = ReactTestUtils.renderIntoDocument(instance);
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    let instance;
+    await act(() => {
+      root.render(<Component ref={current => (instance = current)} />);
+    });
+
     expect(instance.state.occupation).toEqual('clown');
   });
 
-  it('should work with getDerivedStateFromProps() return values', () => {
+  it('should work with getDerivedStateFromProps() return values', async () => {
     const Component = createReactClass({
       getInitialState() {
         return {};
@@ -289,8 +297,12 @@ describe('create-react-class-integration', () => {
     Component.getDerivedStateFromProps = () => {
       return {occupation: 'clown'};
     };
-    let instance = <Component />;
-    instance = ReactTestUtils.renderIntoDocument(instance);
+    let instance;
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<Component ref={current => (instance = current)} />);
+    });
     expect(instance.state.occupation).toEqual('clown');
   });
 
@@ -328,8 +340,9 @@ describe('create-react-class-integration', () => {
     expect(container.firstChild.className).toBe('foo');
   });
 
-  it('should throw with non-object getInitialState() return values', () => {
-    [['an array'], 'a string', 1234].forEach(function (state) {
+  it('should throw with non-object getInitialState() return values', async () => {
+    // eslint-disable-next-line no-for-of-loops/no-for-of-loops
+    for (const state of [['an array'], 'a string', 1234]) {
       const Component = createReactClass({
         getInitialState: function () {
           return state;
@@ -338,16 +351,19 @@ describe('create-react-class-integration', () => {
           return <span />;
         },
       });
-      let instance = <Component />;
-      expect(function () {
-        instance = ReactTestUtils.renderIntoDocument(instance);
-      }).toThrowError(
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      await expect(
+        act(() => {
+          root.render(<Component />);
+        }),
+      ).rejects.toThrowError(
         'Component.getInitialState(): must return an object or null',
       );
-    });
+    }
   });
 
-  it('should work with a null getInitialState() return value', () => {
+  it('should work with a null getInitialState() return value', async () => {
     const Component = createReactClass({
       getInitialState: function () {
         return null;
@@ -356,9 +372,13 @@ describe('create-react-class-integration', () => {
         return <span />;
       },
     });
-    expect(() =>
-      ReactTestUtils.renderIntoDocument(<Component />),
-    ).not.toThrow();
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await expect(
+      act(() => {
+        root.render(<Component />);
+      }),
+    ).resolves.not.toThrow();
   });
 
   it('should throw when using legacy factories', () => {
@@ -375,7 +395,7 @@ describe('create-react-class-integration', () => {
     );
   });
 
-  it('replaceState and callback works', () => {
+  it('replaceState and callback works', async () => {
     const ops = [];
     const Component = createReactClass({
       getInitialState() {
@@ -387,10 +407,19 @@ describe('create-react-class-integration', () => {
       },
     });
 
-    const instance = ReactTestUtils.renderIntoDocument(<Component />);
-    instance.replaceState({step: 1}, () => {
-      ops.push('Callback: ' + instance.state.step);
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    let instance;
+    await act(() => {
+      root.render(<Component ref={current => (instance = current)} />);
+    });
+
+    await act(() => {
+      instance.replaceState({step: 1}, () => {
+        ops.push('Callback: ' + instance.state.step);
+      });
     });
+
     expect(ops).toEqual(['Render: 0', 'Render: 1', 'Callback: 1']);
   });