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 1/4] 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 }); }); }); From f51b56d5e6412216ae701dcaec87105e0c379ed3 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 17:39:43 +0200 Subject: [PATCH 2/4] Remove unnecessary comment --- .../src/elementAcceptingRef/elementAcceptingRef.test.tsx | 1 - .../src/elementTypeAcceptingRef/elementTypeAcceptingRef.test.tsx | 1 - 2 files changed, 2 deletions(-) diff --git a/packages/mui-utils/src/elementAcceptingRef/elementAcceptingRef.test.tsx b/packages/mui-utils/src/elementAcceptingRef/elementAcceptingRef.test.tsx index 936a4d859bbcb7..0b108ac6ba818d 100644 --- a/packages/mui-utils/src/elementAcceptingRef/elementAcceptingRef.test.tsx +++ b/packages/mui-utils/src/elementAcceptingRef/elementAcceptingRef.test.tsx @@ -26,7 +26,6 @@ describe('elementAcceptingRef', () => { 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. render( }> {React.cloneElement(element, { ref: React.createRef() })} diff --git a/packages/mui-utils/src/elementTypeAcceptingRef/elementTypeAcceptingRef.test.tsx b/packages/mui-utils/src/elementTypeAcceptingRef/elementTypeAcceptingRef.test.tsx index 792879592b4009..d4d47fd834df5b 100644 --- a/packages/mui-utils/src/elementTypeAcceptingRef/elementTypeAcceptingRef.test.tsx +++ b/packages/mui-utils/src/elementTypeAcceptingRef/elementTypeAcceptingRef.test.tsx @@ -26,7 +26,6 @@ describe('elementTypeAcceptingRef', () => { 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. render( }> From 0925920901df2f68a23c03e8b9b3e3bc06ab033d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= Date: Mon, 1 Jul 2024 17:41:26 +0200 Subject: [PATCH 3/4] Simplify tests --- .../elementAcceptingRef.test.tsx | 62 +++++++++-------- .../elementTypeAcceptingRef.test.tsx | 67 ++++++++++--------- 2 files changed, 71 insertions(+), 58 deletions(-) diff --git a/packages/mui-utils/src/elementAcceptingRef/elementAcceptingRef.test.tsx b/packages/mui-utils/src/elementAcceptingRef/elementAcceptingRef.test.tsx index 0b108ac6ba818d..7b43a9485d9766 100644 --- a/packages/mui-utils/src/elementAcceptingRef/elementAcceptingRef.test.tsx +++ b/packages/mui-utils/src/elementAcceptingRef/elementAcceptingRef.test.tsx @@ -22,62 +22,56 @@ describe('elementAcceptingRef', () => { }); describe('acceptance when not required', () => { - async function assertPass(element: any, { shouldMount = true } = {}) { + function assertPass(element: any, { shouldMount = true } = {}) { function testAct() { checkPropType(element); if (shouldMount) { - render( - }> - {React.cloneElement(element, { ref: React.createRef() })} - , - ); + render(React.cloneElement(element, { ref: React.createRef() })); } } - await waitFor(() => { - expect(testAct).not.toErrorDev(); - }); + expect(testAct).not.toErrorDev(); } - it('accepts nully values', async () => { - await assertPass(undefined, { shouldMount: false }); - await assertPass(null, { shouldMount: false }); + it('accepts nully values', () => { + assertPass(undefined, { shouldMount: false }); + assertPass(null, { shouldMount: false }); }); - it('accepts host components', async () => { - await assertPass(
); + it('accepts host components', () => { + assertPass(
); }); - it('class components', async () => { + it('class components', () => { class Component extends React.Component { render() { return null; } } - await assertPass(); + assertPass(); }); - it('accepts pure class components', async () => { + it('accepts pure class components', () => { class Component extends React.PureComponent { render() { return null; } } - await assertPass(); + assertPass(); }); - it('accepts forwardRef', async () => { + it('accepts forwardRef', () => { const Component = React.forwardRef(() => null); - await assertPass(); + assertPass(); }); - it('accepts memo', async () => { + it('accepts memo', () => { const Component = React.memo(React.forwardRef(() => null)); - await assertPass(); + assertPass(); }); it('accepts lazy', async () => { @@ -87,17 +81,31 @@ describe('elementAcceptingRef', () => { }), ); - await assertPass(); + function testAct() { + checkPropType(); + render( + React.cloneElement( + }> + + , + { ref: React.createRef() }, + ), + ); + } + + await waitFor(() => { + expect(testAct).not.toErrorDev(); + }); }); - it('technically allows other exotics like strict mode', async () => { - await assertPass(); + it('technically allows other exotics like strict mode', () => { + assertPass(); }); // undesired behavior - it('accepts Fragment', async () => { + it('accepts Fragment', () => { // eslint-disable-next-line react/jsx-no-useless-fragment - await assertPass(); + assertPass(); }); }); diff --git a/packages/mui-utils/src/elementTypeAcceptingRef/elementTypeAcceptingRef.test.tsx b/packages/mui-utils/src/elementTypeAcceptingRef/elementTypeAcceptingRef.test.tsx index d4d47fd834df5b..35d4735ec132e9 100644 --- a/packages/mui-utils/src/elementTypeAcceptingRef/elementTypeAcceptingRef.test.tsx +++ b/packages/mui-utils/src/elementTypeAcceptingRef/elementTypeAcceptingRef.test.tsx @@ -22,66 +22,60 @@ describe('elementTypeAcceptingRef', () => { }); describe('acceptance', () => { - async function assertPass(Component: any, { failsOnMount = false, shouldMount = true } = {}) { + function assertPass(Component: any, { failsOnMount = false, shouldMount = true } = {}) { function testAct() { checkPropType(Component); if (shouldMount) { - render( - }> - - , - ); + render(); } } - await waitFor(() => { - if (failsOnMount) { - expect(testAct).toErrorDev(''); - } else { - expect(testAct).not.toErrorDev(); - } - }); + if (failsOnMount) { + expect(testAct).toErrorDev(''); + } else { + expect(testAct).not.toErrorDev(); + } } - it('accepts nully values', async () => { - await assertPass(undefined, { shouldMount: false }); - await assertPass(null, { shouldMount: false }); + it('accepts nully values', () => { + assertPass(undefined, { shouldMount: false }); + assertPass(null, { shouldMount: false }); }); - it('accepts host components', async () => { - await assertPass('div'); + it('accepts host components', () => { + assertPass('div'); }); - it('class components', async () => { + it('class components', () => { class Component extends React.Component { render() { return null; } } - await assertPass(Component); + assertPass(Component); }); - it('accepts pure class components', async () => { + it('accepts pure class components', () => { class Component extends React.PureComponent { render() { return null; } } - await assertPass(Component); + assertPass(Component); }); - it('accepts forwardRef', async () => { + it('accepts forwardRef', () => { const Component = React.forwardRef(() => null); - await assertPass(Component); + assertPass(Component); }); - it('accepts memo', async () => { + it('accepts memo', () => { const Component = React.memo(React.forwardRef(() => null)); - await assertPass(Component); + assertPass(Component); }); it('accepts lazy', async () => { @@ -91,16 +85,27 @@ describe('elementTypeAcceptingRef', () => { }), ); - await assertPass(Component); + function testAct() { + checkPropType(Component); + render( + }> + + , + ); + } + + await waitFor(() => { + expect(testAct).not.toErrorDev(); + }); }); - it('technically allows other exotics like strict mode', async () => { - await assertPass(React.StrictMode); + it('technically allows other exotics like strict mode', () => { + assertPass(React.StrictMode); }); // undesired behavior - it('accepts Fragment', async () => { - await assertPass(React.Fragment, { failsOnMount: true }); + it('accepts Fragment', () => { + assertPass(React.Fragment, { failsOnMount: true }); }); }); From 303e01e6c06400cc1049e5508f0b4b5214ad2bab Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= Date: Mon, 1 Jul 2024 17:47:00 +0200 Subject: [PATCH 4/4] Move cloneElement --- .../src/elementAcceptingRef/elementAcceptingRef.test.tsx | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/packages/mui-utils/src/elementAcceptingRef/elementAcceptingRef.test.tsx b/packages/mui-utils/src/elementAcceptingRef/elementAcceptingRef.test.tsx index 7b43a9485d9766..5a06cdb42f7dec 100644 --- a/packages/mui-utils/src/elementAcceptingRef/elementAcceptingRef.test.tsx +++ b/packages/mui-utils/src/elementAcceptingRef/elementAcceptingRef.test.tsx @@ -84,12 +84,9 @@ describe('elementAcceptingRef', () => { function testAct() { checkPropType(); render( - React.cloneElement( - }> - - , - { ref: React.createRef() }, - ), + }> + {React.cloneElement(, { ref: React.createRef() })} + , ); }