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', () => {