diff --git a/packages/mui-utils/src/elementAcceptingRef/elementAcceptingRef.test.tsx b/packages/mui-utils/src/elementAcceptingRef/elementAcceptingRef.test.tsx
index 4fbdf45e95439b..5a06cdb42f7dec 100644
--- 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,17 @@ describe('elementAcceptingRef', () => {
});
describe('acceptance when not required', () => {
- let rootNode: HTMLElement;
-
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(
- }>
- {React.cloneElement(element, { ref: React.createRef() })}
- ,
- rootNode,
- );
+ render(React.cloneElement(element, { ref: React.createRef() }));
}
}
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 });
@@ -90,14 +74,25 @@ describe('elementAcceptingRef', () => {
assertPass();
});
- it('accepts lazy', () => {
+ it('accepts lazy', async () => {
const Component = React.lazy(() =>
Promise.resolve({
default: React.forwardRef((props, ref) =>
),
}),
);
- assertPass();
+ function testAct() {
+ checkPropType();
+ render(
+ }>
+ {React.cloneElement(, { ref: React.createRef() })}
+ ,
+ );
+ }
+
+ await waitFor(() => {
+ expect(testAct).not.toErrorDev();
+ });
});
it('technically allows other exotics like strict mode', () => {
diff --git a/packages/mui-utils/src/elementTypeAcceptingRef/elementTypeAcceptingRef.test.tsx b/packages/mui-utils/src/elementTypeAcceptingRef/elementTypeAcceptingRef.test.tsx
index 4bf9a1a01ac794..35d4735ec132e9 100644
--- 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,20 +22,11 @@ describe('elementTypeAcceptingRef', () => {
});
describe('acceptance', () => {
- let rootNode: HTMLElement;
-
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(
- }>
-
- ,
- rootNode,
- );
+ render();
}
}
@@ -44,15 +37,6 @@ describe('elementTypeAcceptingRef', () => {
}
}
- 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 });
@@ -94,14 +78,25 @@ describe('elementTypeAcceptingRef', () => {
assertPass(Component);
});
- it('accepts lazy', () => {
+ it('accepts lazy', async () => {
const Component = React.lazy(() =>
Promise.resolve({
default: React.forwardRef((props, ref) => ),
}),
);
- assertPass(Component);
+ function testAct() {
+ checkPropType(Component);
+ render(
+ }>
+
+ ,
+ );
+ }
+
+ await waitFor(() => {
+ expect(testAct).not.toErrorDev();
+ });
});
it('technically allows other exotics like strict mode', () => {