From 21d1ff5922adbf21d84eb99f55cfa7e123cd1772 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= Date: Fri, 28 Jun 2024 12:39:35 +0200 Subject: [PATCH] Remove usages of deprecated react-dom APIs --- .../elementAcceptingRef.test.tsx | 63 +++++++--------- .../elementTypeAcceptingRef.test.tsx | 71 ++++++++----------- 2 files changed, 58 insertions(+), 76 deletions(-) diff --git a/packages/mui-utils/src/elementAcceptingRef/elementAcceptingRef.test.tsx b/packages/mui-utils/src/elementAcceptingRef/elementAcceptingRef.test.tsx index 4fbdf45e95439b..936a4d859bbcb7 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,94 +22,83 @@ 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.cloneElement(element, { ref: React.createRef() })} , - 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 }); + it('accepts nully values', async () => { + await assertPass(undefined, { shouldMount: false }); + await assertPass(null, { shouldMount: false }); }); - it('accepts host components', () => { - assertPass(
); + it('accepts host components', async () => { + await assertPass(
); }); - it('class components', () => { + it('class components', async () => { class Component extends React.Component { render() { return null; } } - assertPass(); + await assertPass(); }); - it('accepts pure class components', () => { + it('accepts pure class components', async () => { class Component extends React.PureComponent { render() { return null; } } - assertPass(); + await assertPass(); }); - it('accepts forwardRef', () => { + it('accepts forwardRef', async () => { const Component = React.forwardRef(() => null); - assertPass(); + await assertPass(); }); - it('accepts memo', () => { + it('accepts memo', async () => { const Component = React.memo(React.forwardRef(() => null)); - assertPass(); + await assertPass(); }); - it('accepts lazy', () => { + it('accepts lazy', async () => { const Component = React.lazy(() => Promise.resolve({ default: React.forwardRef((props, ref) =>
), }), ); - assertPass(); + await assertPass(); }); - it('technically allows other exotics like strict mode', () => { - assertPass(); + it('technically allows other exotics like strict mode', async () => { + await assertPass(); }); // undesired behavior - it('accepts Fragment', () => { + it('accepts Fragment', async () => { // eslint-disable-next-line react/jsx-no-useless-fragment - assertPass(); + await assertPass(); }); }); diff --git a/packages/mui-utils/src/elementTypeAcceptingRef/elementTypeAcceptingRef.test.tsx b/packages/mui-utils/src/elementTypeAcceptingRef/elementTypeAcceptingRef.test.tsx index 4bf9a1a01ac794..792879592b4009 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,97 +22,86 @@ 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( }> , - 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 }); + it('accepts nully values', async () => { + await assertPass(undefined, { shouldMount: false }); + await assertPass(null, { shouldMount: false }); }); - it('accepts host components', () => { - assertPass('div'); + it('accepts host components', async () => { + await assertPass('div'); }); - it('class components', () => { + it('class components', async () => { class Component extends React.Component { render() { return null; } } - assertPass(Component); + await assertPass(Component); }); - it('accepts pure class components', () => { + it('accepts pure class components', async () => { class Component extends React.PureComponent { render() { return null; } } - assertPass(Component); + await assertPass(Component); }); - it('accepts forwardRef', () => { + it('accepts forwardRef', async () => { const Component = React.forwardRef(() => null); - assertPass(Component); + await assertPass(Component); }); - it('accepts memo', () => { + it('accepts memo', async () => { const Component = React.memo(React.forwardRef(() => null)); - assertPass(Component); + await assertPass(Component); }); - it('accepts lazy', () => { + it('accepts lazy', async () => { const Component = React.lazy(() => Promise.resolve({ default: React.forwardRef((props, ref) =>
), }), ); - assertPass(Component); + await assertPass(Component); }); - it('technically allows other exotics like strict mode', () => { - assertPass(React.StrictMode); + it('technically allows other exotics like strict mode', async () => { + await assertPass(React.StrictMode); }); // undesired behavior - it('accepts Fragment', () => { - assertPass(React.Fragment, { failsOnMount: true }); + it('accepts Fragment', async () => { + await assertPass(React.Fragment, { failsOnMount: true }); }); });