Remove usages of deprecated react-dom APIs

mui · Jun 28, 2024 · c16bd9f · c16bd9f
1 parent d204f41
commit c16bd9f
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 38 deletions.
diff --git a/packages/mui-utils/src/elementAcceptingRef/elementAcceptingRef.test.tsx b/packages/mui-utils/src/elementAcceptingRef/elementAcceptingRef.test.tsx
@@ -1,11 +1,13 @@
 /* eslint-disable react/prefer-stateless-function */
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
 import { expect } from 'chai';
 import PropTypes from 'prop-types';
+import { createRenderer, waitFor } from '@mui/internal-test-utils';
 import elementAcceptingRef from './elementAcceptingRef';
 
 describe('elementAcceptingRef', () => {
+  const { render } = createRenderer();
+
   function checkPropType(element: any, required = false) {
     PropTypes.checkPropTypes(
       { children: required ? elementAcceptingRef.isRequired : elementAcceptingRef },
@@ -20,35 +22,24 @@ describe('elementAcceptingRef', () => {
   });
 
   describe('acceptance when not required', () => {
-    let rootNode: HTMLElement;
-
-    function assertPass(element: any, { shouldMount = true } = {}) {
+    async function assertPass(element: any, { shouldMount = true } = {}) {
       function testAct() {
         checkPropType(element);
         if (shouldMount) {
           // TODO: replace with React 18 implementation after https://github.com/testing-library/react-testing-library/issues/1216 is closed.
-          // eslint-disable-next-line react/no-deprecated
-          ReactDOM.render(
+          render(
             <React.Suspense fallback={<p />}>
               {React.cloneElement(element, { ref: React.createRef() })}
             </React.Suspense>,
-            rootNode,
           );
         }
       }
 
-      expect(testAct).not.toErrorDev();
+      await waitFor(() => {
+        expect(testAct).not.toErrorDev();
+      });
     }
 
-    before(() => {
-      rootNode = document.createElement('div');
-    });
-
-    afterEach(() => {
-      // eslint-disable-next-line react/no-deprecated
-      ReactDOM.unmountComponentAtNode(rootNode);
-    });
-
     it('accepts nully values', () => {
       assertPass(undefined, { shouldMount: false });
       assertPass(null, { shouldMount: false });

diff --git a/packages/mui-utils/src/elementTypeAcceptingRef/elementTypeAcceptingRef.test.tsx b/packages/mui-utils/src/elementTypeAcceptingRef/elementTypeAcceptingRef.test.tsx
@@ -1,11 +1,13 @@
 /* eslint-disable react/prefer-stateless-function */
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
 import { expect } from 'chai';
 import PropTypes from 'prop-types';
+import { createRenderer, waitFor } from '@mui/internal-test-utils';
 import elementTypeAcceptingRef from './elementTypeAcceptingRef';
 
 describe('elementTypeAcceptingRef', () => {
+  const { render } = createRenderer();
+
   function checkPropType(elementType: any) {
     PropTypes.checkPropTypes(
       { component: elementTypeAcceptingRef },
@@ -20,39 +22,28 @@ describe('elementTypeAcceptingRef', () => {
   });
 
   describe('acceptance', () => {
-    let rootNode: HTMLElement;
-
-    function assertPass(Component: any, { failsOnMount = false, shouldMount = true } = {}) {
+    async function assertPass(Component: any, { failsOnMount = false, shouldMount = true } = {}) {
       function testAct() {
         checkPropType(Component);
         if (shouldMount) {
           // TODO: replace with React 18 implementation after https://github.com/testing-library/react-testing-library/issues/1216 is closed.
-          // eslint-disable-next-line react/no-deprecated
-          ReactDOM.render(
+          render(
             <React.Suspense fallback={<p />}>
               <Component ref={React.createRef()} />
             </React.Suspense>,
-            rootNode,
           );
         }
       }
 
-      if (failsOnMount) {
-        expect(testAct).toErrorDev('');
-      } else {
-        expect(testAct).not.toErrorDev();
-      }
+      await waitFor(() => {
+        if (failsOnMount) {
+          expect(testAct).toErrorDev('');
+        } else {
+          expect(testAct).not.toErrorDev();
+        }
+      });
     }
 
-    before(() => {
-      rootNode = document.createElement('div');
-    });
-
-    afterEach(() => {
-      // eslint-disable-next-line react/no-deprecated
-      ReactDOM.unmountComponentAtNode(rootNode);
-    });
-
     it('accepts nully values', () => {
       assertPass(undefined, { shouldMount: false });
       assertPass(null, { shouldMount: false });