Use createRoot in ReactART-test

packages/react-art/src/__tests__/ReactART-test.js

@@ -24,8 +24,8 @@ import Wedge from 'react-art/Wedge';
 
 // Isolate DOM renderer.
 jest.resetModules();
-const ReactDOM = require('react-dom');
-const ReactTestUtils = require('react-dom/test-utils');
+const ReactDOMClient = require('react-dom/client');
+const act = require('internal-test-utils').act;
 
 // Isolate test renderer.
 jest.resetModules();
@@ -42,6 +42,7 @@ let Surface;
 let TestComponent;
 
 let waitFor;
+let groupRef;
 
 const Missing = {};
 
@@ -82,8 +83,9 @@ describe('ReactART', () => {
 
     ({waitFor} = require('internal-test-utils'));
 
+    groupRef = React.createRef();
     TestComponent = class extends React.Component {
-      group = React.createRef();
+      group = groupRef;
 
       render() {
         const a = (
@@ -132,17 +134,23 @@ describe('ReactART', () => {
     container = null;
   });
 
-  it('should have the correct lifecycle state', () => {
-    let instance = <TestComponent />;
-    instance = ReactTestUtils.renderIntoDocument(instance);
-    const group = instance.group.current;
+  it('should have the correct lifecycle state', async () => {
+    const instance = <TestComponent />;
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(instance);
+    });
+    const group = groupRef.current;
     // Duck type test for an ART group
     expect(typeof group.indicate).toBe('function');
   });
 
-  it('should render a reasonable SVG structure in SVG mode', () => {
-    let instance = <TestComponent />;
-    instance = ReactTestUtils.renderIntoDocument(instance);
+  it('should render a reasonable SVG structure in SVG mode', async () => {
+    const instance = <TestComponent />;
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(instance);
+    });
 
     const expectedStructure = {
       nodeName: 'svg',
@@ -165,15 +173,15 @@ describe('ReactART', () => {
       ],
     };
 
-    const realNode = ReactDOM.findDOMNode(instance);
+    const realNode = container.firstChild;
     testDOMNodeStructure(realNode, expectedStructure);
   });
 
-  it('should be able to reorder components', () => {
-    const instance = ReactDOM.render(
-      <TestComponent flipped={false} />,
-      container,
-    );
+  it('should be able to reorder components', async () => {
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<TestComponent flipped={false} />);
+    });
 
     const expectedStructure = {
       nodeName: 'svg',
@@ -191,10 +199,12 @@ describe('ReactART', () => {
       ],
     };
 
-    const realNode = ReactDOM.findDOMNode(instance);
+    const realNode = container.firstChild;
     testDOMNodeStructure(realNode, expectedStructure);
 
-    ReactDOM.render(<TestComponent flipped={true} />, container);
+    await act(() => {
+      root.render(<TestComponent flipped={true} />);
+    });
 
     const expectedNewStructure = {
       nodeName: 'svg',
@@ -215,7 +225,7 @@ describe('ReactART', () => {
     testDOMNodeStructure(realNode, expectedNewStructure);
   });
 
-  it('should be able to reorder many components', () => {
+  it('should be able to reorder many components', async () => {
     class Component extends React.Component {
       render() {
         const chars = this.props.chars.split('');
@@ -233,17 +243,20 @@ describe('ReactART', () => {
     const before = 'abcdefghijklmnopqrst';
     const after = 'mxhpgwfralkeoivcstzy';
 
-    let instance = ReactDOM.render(<Component chars={before} />, container);
-    const realNode = ReactDOM.findDOMNode(instance);
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<Component chars={before} />);
+    });
+    const realNode = container.firstChild;
     expect(realNode.textContent).toBe(before);
 
-    instance = ReactDOM.render(<Component chars={after} />, container);
+    await act(() => {
+      root.render(<Component chars={after} />);
+    });
     expect(realNode.textContent).toBe(after);
-
-    ReactDOM.unmountComponentAtNode(container);
   });
 
-  it('renders composite with lifecycle inside group', () => {
+  it('renders composite with lifecycle inside group', async () => {
     let mounted = false;
 
     class CustomShape extends React.Component {
@@ -255,18 +268,20 @@ describe('ReactART', () => {
         mounted = true;
       }
     }
-
-    ReactTestUtils.renderIntoDocument(
-      <Surface>
-        <Group>
-          <CustomShape />
-        </Group>
-      </Surface>,
-    );
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(
+        <Surface>
+          <Group>
+            <CustomShape />
+          </Group>
+        </Surface>,
+      );
+    });
     expect(mounted).toBe(true);
   });
 
-  it('resolves refs before componentDidMount', () => {
+  it('resolves refs before componentDidMount', async () => {
     class CustomShape extends React.Component {
       render() {
         return <Shape />;
@@ -293,11 +308,14 @@ describe('ReactART', () => {
       }
     }
 
-    ReactTestUtils.renderIntoDocument(<Outer />);
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<Outer />);
+    });
     expect(ref.constructor).toBe(CustomShape);
   });
 
-  it('resolves refs before componentDidUpdate', () => {
+  it('resolves refs before componentDidUpdate', async () => {
     class CustomShape extends React.Component {
       render() {
         return <Shape />;
@@ -327,24 +345,34 @@ describe('ReactART', () => {
         );
       }
     }
-    ReactDOM.render(<Outer />, container);
+
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<Outer />);
+    });
     expect(ref).toBe(null);
-    ReactDOM.render(<Outer mountCustomShape={true} />, container);
+
+    await act(() => {
+      root.render(<Outer mountCustomShape={true} />);
+    });
     expect(ref.constructor).toBe(CustomShape);
   });
 
-  it('adds and updates event handlers', () => {
-    function render(onClick) {
-      return ReactDOM.render(
-        <Surface>
-          <Shape onClick={onClick} />
-        </Surface>,
-        container,
-      );
+  it('adds and updates event handlers', async () => {
+    const root = ReactDOMClient.createRoot(container);
+
+    async function render(onClick) {
+      await act(() => {
+        root.render(
+          <Surface>
+            <Shape onClick={onClick} />
+          </Surface>,
+        );
+      });
     }
 
     function doClick(instance) {
-      const path = ReactDOM.findDOMNode(instance).querySelector('path');
+      const path = container.firstChild.querySelector('path');
 
       path.dispatchEvent(
         new MouseEvent('click', {
@@ -354,12 +382,12 @@ describe('ReactART', () => {
     }
 
     const onClick1 = jest.fn();
-    let instance = render(onClick1);
+    let instance = await render(onClick1);
     doClick(instance);
     expect(onClick1).toBeCalled();
 
     const onClick2 = jest.fn();
-    instance = render(onClick2);
+    instance = await render(onClick2);
     doClick(instance);
     expect(onClick2).toBeCalled();
   });
@@ -398,15 +426,17 @@ describe('ReactART', () => {
 
     await waitFor(['A']);
 
-    ReactDOM.render(
-      <Surface>
-        <LogCurrentRenderer />
-        <CurrentRendererContext.Provider value="ART">
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(
+        <Surface>
           <LogCurrentRenderer />
-        </CurrentRendererContext.Provider>
-      </Surface>,
-      container,
-    );
+          <CurrentRendererContext.Provider value="ART">
+            <LogCurrentRenderer />
+          </CurrentRendererContext.Provider>
+        </Surface>,
+      );
+    });
 
     expect(ops).toEqual([null, 'ART']);