Convert ReactComponentLifeycle to createRoot (#28178)

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

@@ -113,17 +113,29 @@ describe('ReactComponentLifeCycle', () => {
  }
 
  const element = <StatefulComponent />;
- const firstInstance = ReactDOM.render(element, container);
- ReactDOM.unmountComponentAtNode(container);
- const secondInstance = ReactDOM.render(element, container);
+ let root = ReactDOMClient.createRoot(container);
+ await act(() => {
+ root.render(element);
+ });
+
+ const firstInstance = container.firstChild;
+ await act(() => {
+ root.unmount();
+ });
+ root = ReactDOMClient.createRoot(container);
+ await act(() => {
+ root.render(element);
+ });
+
+ const secondInstance = container.firstChild;
  expect(firstInstance).not.toBe(secondInstance);
  });
 
  /**
  * If a state update triggers rerendering that in turn fires an onDOMReady,
  * that second onDOMReady should not fail.
  */
- it('it should fire onDOMReady when already in onDOMReady', () => {
+ it('it should fire onDOMReady when already in onDOMReady', async () => {
  const _testJournal = [];
 
  class Child extends React.Component {
@@ -161,7 +173,13 @@ describe('ReactComponentLifeCycle', () => {
  }
  }
 
- ReactTestUtils.renderIntoDocument(<SwitcherParent />);
+ const container = document.createElement('div');
+ const root = ReactDOMClient.createRoot(container);
+
+ await act(() => {
+ root.render(<SwitcherParent />);
+ });
+
  expect(_testJournal).toEqual([
  'SwitcherParent:getInitialState',
  'SwitcherParent:onDOMReady',
@@ -205,7 +223,7 @@ describe('ReactComponentLifeCycle', () => {
  }).not.toThrow();
  });
 
- it("warns if setting 'this.state = props'", () => {
+ it("warns if setting 'this.state = props'", async () => {
  class StatefulComponent extends React.Component {
  constructor(props, context) {
  super(props, context);
@@ -216,16 +234,20 @@ describe('ReactComponentLifeCycle', () => {
  }
  }
 
- expect(() => {
- ReactTestUtils.renderIntoDocument(<StatefulComponent />);
+ const container = document.createElement('div');
+ const root = ReactDOMClient.createRoot(container);
+ await expect(async () => {
+ await act(() => {
+ root.render(<StatefulComponent />);
+ });
  }).toErrorDev(
  'StatefulComponent: It is not recommended to assign props directly to state ' +
  "because updates to props won't be reflected in state. " +
  'In most cases, it is better to use props directly.',
  );
  });
 
- it('should not allow update state inside of getInitialState', () => {
+ it('should not allow update state inside of getInitialState', async () => {
  class StatefulComponent extends React.Component {
  constructor(props, context) {
  super(props, context);
@@ -239,20 +261,27 @@ describe('ReactComponentLifeCycle', () => {
  }
  }
 
- expect(() => {
- ReactTestUtils.renderIntoDocument(<StatefulComponent />);
+ let container = document.createElement('div');
+ let root = ReactDOMClient.createRoot(container);
+ await expect(async () => {
+ await act(() => {
+ root.render(<StatefulComponent />);
+ });
  }).toErrorDev(
  "Warning: Can't call setState on a component that is not yet mounted. " +
  'This is a no-op, but it might indicate a bug in your application. ' +
  'Instead, assign to `this.state` directly or define a `state = {};` ' +
  'class property with the desired state in the StatefulComponent component.',
  );
 
- // Check deduplication; (no extra warnings should be logged).
- ReactTestUtils.renderIntoDocument(<StatefulComponent />);
+ container = document.createElement('div');
+ root = ReactDOMClient.createRoot(container);
+ await act(() => {
+ root.render(<StatefulComponent />);
+ });
  });
 
- it('should correctly determine if a component is mounted', () => {
+ it('should correctly determine if a component is mounted', async () => {
  class Component extends React.Component {
  _isMounted() {
  // No longer a public API, but we can test that it works internally by
@@ -271,15 +300,20 @@ describe('ReactComponentLifeCycle', () => {
  }
  }
 
- const element = <Component />;
+ let instance;
+ const element = <Component ref={current => (instance = current)} />;
 
- expect(() => {
- const instance = ReactTestUtils.renderIntoDocument(element);
- expect(instance._isMounted()).toBeTruthy();
+ const container = document.createElement('div');
+ const root = ReactDOMClient.createRoot(container);
+ await expect(async () => {
+ await act(() => {
+ root.render(element);
+ });
  }).toErrorDev('Component is accessing isMounted inside its render()');
+ expect(instance._isMounted()).toBeTruthy();
  });
 
- it('should correctly determine if a null component is mounted', () => {
+ it('should correctly determine if a null component is mounted', async () => {
  class Component extends React.Component {
  _isMounted() {
  // No longer a public API, but we can test that it works internally by
@@ -298,12 +332,17 @@ describe('ReactComponentLifeCycle', () => {
  }
  }
 
- const element = <Component />;
+ let instance;
+ const element = <Component ref={current => (instance = current)} />;
 
- expect(() => {
- const instance = ReactTestUtils.renderIntoDocument(element);
- expect(instance._isMounted()).toBeTruthy();
+ const container = document.createElement('div');
+ const root = ReactDOMClient.createRoot(container);
+ await expect(async () => {
+ await act(() => {
+ root.render(element);
+ });
  }).toErrorDev('Component is accessing isMounted inside its render()');
+ expect(instance._isMounted()).toBeTruthy();
  });
 
  it('isMounted should return false when unmounted', async () => {
@@ -331,7 +370,7 @@ describe('ReactComponentLifeCycle', () => {
  expect(instance.updater.isMounted(instance)).toBe(false);
  });
 
- it('warns if findDOMNode is used inside render', () => {
+ it('warns if legacy findDOMNode is used inside render', async () => {
  class Component extends React.Component {
  state = {isMounted: false};
  componentDidMount() {
@@ -345,8 +384,12 @@ describe('ReactComponentLifeCycle', () => {
  }
  }
 
- expect(() => {
- ReactTestUtils.renderIntoDocument(<Component />);
+ const container = document.createElement('div');
+ const root = ReactDOMClient.createRoot(container);
+ await expect(async () => {
+ await act(() => {
+ root.render(<Component />);
+ });
  }).toErrorDev('Component is accessing findDOMNode inside its render()');
  });