Skip to content

Commit 21d1ff5

Browse files
aarongarciahaarongarciah
committed
Remove usages of deprecated react-dom APIs
1 parent d204f41 commit 21d1ff5

File tree

2 files changed

+58
-76
lines changed

2 files changed

+58
-76
lines changed

‎packages/mui-utils/src/elementAcceptingRef/elementAcceptingRef.test.tsx

+27-36
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
11
/* eslint-disable react/prefer-stateless-function */
22
import * as React from 'react';
3-
import * as ReactDOM from 'react-dom';
43
import { expect } from 'chai';
54
import PropTypes from 'prop-types';
5+
import { createRenderer, waitFor } from '@mui/internal-test-utils';
66
import elementAcceptingRef from './elementAcceptingRef';
77

88
describe('elementAcceptingRef', () => {
9+
const { render } = createRenderer();
10+
911
function checkPropType(element: any, required = false) {
1012
PropTypes.checkPropTypes(
1113
{ children: required ? elementAcceptingRef.isRequired : elementAcceptingRef },
@@ -20,94 +22,83 @@ describe('elementAcceptingRef', () => {
2022
});
2123

2224
describe('acceptance when not required', () => {
23-
let rootNode: HTMLElement;
24-
25-
function assertPass(element: any, { shouldMount = true } = {}) {
25+
async function assertPass(element: any, { shouldMount = true } = {}) {
2626
function testAct() {
2727
checkPropType(element);
2828
if (shouldMount) {
2929
// TODO: replace with React 18 implementation after https://github.com/testing-library/react-testing-library/issues/1216 is closed.
30-
// eslint-disable-next-line react/no-deprecated
31-
ReactDOM.render(
30+
render(
3231
<React.Suspense fallback={<p />}>
3332
{React.cloneElement(element, { ref: React.createRef() })}
3433
</React.Suspense>,
35-
rootNode,
3634
);
3735
}
3836
}
3937

40-
expect(testAct).not.toErrorDev();
38+
await waitFor(() => {
39+
expect(testAct).not.toErrorDev();
40+
});
4141
}
4242

43-
before(() => {
44-
rootNode = document.createElement('div');
45-
});
46-
47-
afterEach(() => {
48-
// eslint-disable-next-line react/no-deprecated
49-
ReactDOM.unmountComponentAtNode(rootNode);
50-
});
51-
52-
it('accepts nully values', () => {
53-
assertPass(undefined, { shouldMount: false });
54-
assertPass(null, { shouldMount: false });
43+
it('accepts nully values', async () => {
44+
await assertPass(undefined, { shouldMount: false });
45+
await assertPass(null, { shouldMount: false });
5546
});
5647

57-
it('accepts host components', () => {
58-
assertPass(<div />);
48+
it('accepts host components', async () => {
49+
await assertPass(<div />);
5950
});
6051

61-
it('class components', () => {
52+
it('class components', async () => {
6253
class Component extends React.Component {
6354
render() {
6455
return null;
6556
}
6657
}
6758

68-
assertPass(<Component />);
59+
await assertPass(<Component />);
6960
});
7061

71-
it('accepts pure class components', () => {
62+
it('accepts pure class components', async () => {
7263
class Component extends React.PureComponent {
7364
render() {
7465
return null;
7566
}
7667
}
7768

78-
assertPass(<Component />);
69+
await assertPass(<Component />);
7970
});
8071

81-
it('accepts forwardRef', () => {
72+
it('accepts forwardRef', async () => {
8273
const Component = React.forwardRef(() => null);
8374

84-
assertPass(<Component />);
75+
await assertPass(<Component />);
8576
});
8677

87-
it('accepts memo', () => {
78+
it('accepts memo', async () => {
8879
const Component = React.memo(React.forwardRef(() => null));
8980

90-
assertPass(<Component />);
81+
await assertPass(<Component />);
9182
});
9283

93-
it('accepts lazy', () => {
84+
it('accepts lazy', async () => {
9485
const Component = React.lazy(() =>
9586
Promise.resolve({
9687
default: React.forwardRef((props, ref) => <div {...props} ref={ref} />),
9788
}),
9889
);
9990

100-
assertPass(<Component />);
91+
await assertPass(<Component />);
10192
});
10293

103-
it('technically allows other exotics like strict mode', () => {
104-
assertPass(<React.StrictMode />);
94+
it('technically allows other exotics like strict mode', async () => {
95+
await assertPass(<React.StrictMode />);
10596
});
10697

10798
// undesired behavior
108-
it('accepts Fragment', () => {
99+
it('accepts Fragment', async () => {
109100
// eslint-disable-next-line react/jsx-no-useless-fragment
110-
assertPass(<React.Fragment />);
101+
await assertPass(<React.Fragment />);
111102
});
112103
});
113104

‎packages/mui-utils/src/elementTypeAcceptingRef/elementTypeAcceptingRef.test.tsx

+31-40
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
11
/* eslint-disable react/prefer-stateless-function */
22
import * as React from 'react';
3-
import * as ReactDOM from 'react-dom';
43
import { expect } from 'chai';
54
import PropTypes from 'prop-types';
5+
import { createRenderer, waitFor } from '@mui/internal-test-utils';
66
import elementTypeAcceptingRef from './elementTypeAcceptingRef';
77

88
describe('elementTypeAcceptingRef', () => {
9+
const { render } = createRenderer();
10+
911
function checkPropType(elementType: any) {
1012
PropTypes.checkPropTypes(
1113
{ component: elementTypeAcceptingRef },
@@ -20,97 +22,86 @@ describe('elementTypeAcceptingRef', () => {
2022
});
2123

2224
describe('acceptance', () => {
23-
let rootNode: HTMLElement;
24-
25-
function assertPass(Component: any, { failsOnMount = false, shouldMount = true } = {}) {
25+
async function assertPass(Component: any, { failsOnMount = false, shouldMount = true } = {}) {
2626
function testAct() {
2727
checkPropType(Component);
2828
if (shouldMount) {
2929
// TODO: replace with React 18 implementation after https://github.com/testing-library/react-testing-library/issues/1216 is closed.
30-
// eslint-disable-next-line react/no-deprecated
31-
ReactDOM.render(
30+
render(
3231
<React.Suspense fallback={<p />}>
3332
<Component ref={React.createRef()} />
3433
</React.Suspense>,
35-
rootNode,
3634
);
3735
}
3836
}
3937

40-
if (failsOnMount) {
41-
expect(testAct).toErrorDev('');
42-
} else {
43-
expect(testAct).not.toErrorDev();
44-
}
38+
await waitFor(() => {
39+
if (failsOnMount) {
40+
expect(testAct).toErrorDev('');
41+
} else {
42+
expect(testAct).not.toErrorDev();
43+
}
44+
});
4545
}
4646

47-
before(() => {
48-
rootNode = document.createElement('div');
49-
});
50-
51-
afterEach(() => {
52-
// eslint-disable-next-line react/no-deprecated
53-
ReactDOM.unmountComponentAtNode(rootNode);
54-
});
55-
56-
it('accepts nully values', () => {
57-
assertPass(undefined, { shouldMount: false });
58-
assertPass(null, { shouldMount: false });
47+
it('accepts nully values', async () => {
48+
await assertPass(undefined, { shouldMount: false });
49+
await assertPass(null, { shouldMount: false });
5950
});
6051

61-
it('accepts host components', () => {
62-
assertPass('div');
52+
it('accepts host components', async () => {
53+
await assertPass('div');
6354
});
6455

65-
it('class components', () => {
56+
it('class components', async () => {
6657
class Component extends React.Component {
6758
render() {
6859
return null;
6960
}
7061
}
7162

72-
assertPass(Component);
63+
await assertPass(Component);
7364
});
7465

75-
it('accepts pure class components', () => {
66+
it('accepts pure class components', async () => {
7667
class Component extends React.PureComponent {
7768
render() {
7869
return null;
7970
}
8071
}
8172

82-
assertPass(Component);
73+
await assertPass(Component);
8374
});
8475

85-
it('accepts forwardRef', () => {
76+
it('accepts forwardRef', async () => {
8677
const Component = React.forwardRef(() => null);
8778

88-
assertPass(Component);
79+
await assertPass(Component);
8980
});
9081

91-
it('accepts memo', () => {
82+
it('accepts memo', async () => {
9283
const Component = React.memo(React.forwardRef(() => null));
9384

94-
assertPass(Component);
85+
await assertPass(Component);
9586
});
9687

97-
it('accepts lazy', () => {
88+
it('accepts lazy', async () => {
9889
const Component = React.lazy(() =>
9990
Promise.resolve({
10091
default: React.forwardRef((props, ref) => <div ref={ref} {...props} />),
10192
}),
10293
);
10394

104-
assertPass(Component);
95+
await assertPass(Component);
10596
});
10697

107-
it('technically allows other exotics like strict mode', () => {
108-
assertPass(React.StrictMode);
98+
it('technically allows other exotics like strict mode', async () => {
99+
await assertPass(React.StrictMode);
109100
});
110101

111102
// undesired behavior
112-
it('accepts Fragment', () => {
113-
assertPass(React.Fragment, { failsOnMount: true });
103+
it('accepts Fragment', async () => {
104+
await assertPass(React.Fragment, { failsOnMount: true });
114105
});
115106
});
116107

0 commit comments

Comments
 (0)