Convert createReactClassIntegration to createRoot (#28196)

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']);
  });