Skip to content

Commit b02998a

Browse files
author
Sebastian Silbermann
committed
Remove ReactTestUtils from refs-test
1 parent adadb81 commit b02998a

File tree

1 file changed

+44
-37
lines changed

1 file changed

+44
-37
lines changed

‎packages/react-dom/src/__tests__/refs-test.js‎

Lines changed: 44 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,6 @@
1212
let React = require('react');
1313
let ReactDOMClient = require('react-dom/client');
1414
let ReactFeatureFlags = require('shared/ReactFeatureFlags');
15-
let ReactTestUtils = require('react-dom/test-utils');
1615
let act = require('internal-test-utils').act;
1716

1817
// This is testing if string refs are deleted from `instance.refs`
@@ -26,7 +25,6 @@ describe('reactiverefs', () => {
2625
React = require('react');
2726
ReactDOMClient = require('react-dom/client');
2827
ReactFeatureFlags = require('shared/ReactFeatureFlags');
29-
ReactTestUtils = require('react-dom/test-utils');
3028
act = require('internal-test-utils').act;
3129
});
3230

@@ -73,10 +71,7 @@ describe('reactiverefs', () => {
7371
}
7472

7573
const expectClickLogsLengthToBe = function (instance, length) {
76-
const clickLogs = ReactTestUtils.scryRenderedDOMComponentsWithClass(
77-
instance,
78-
'clickLogDiv',
79-
);
74+
const clickLogs = instance.container.querySelectorAll('.clickLogDiv');
8075
expect(clickLogs.length).toBe(length);
8176
expect(Object.keys(instance.refs.myCounter.refs).length).toBe(length);
8277
};
@@ -101,13 +96,14 @@ describe('reactiverefs', () => {
10196
* into a different parent.
10297
*/
10398
class TestRefsComponent extends React.Component {
99+
container = null;
104100
doReset = () => {
105101
this.refs.myCounter.triggerReset();
106102
};
107103

108104
render() {
109105
return (
110-
<div>
106+
<div ref={current => (this.container = current)}>
111107
<div ref="resetDiv" onClick={this.doReset}>
112108
Reset Me By Clicking This.
113109
</div>
@@ -170,10 +166,8 @@ describe('reactiverefs', () => {
170166
*/
171167
it('Should increase refs with an increase in divs', async () => {
172168
const testRefsComponent = await renderTestRefsComponent();
173-
const clickIncrementer = ReactTestUtils.findRenderedDOMComponentWithClass(
174-
testRefsComponent,
175-
'clickIncrementer',
176-
);
169+
const clickIncrementer =
170+
testRefsComponent.container.querySelector('.clickIncrementer');
177171

178172
expectClickLogsLengthToBe(testRefsComponent, 1);
179173

@@ -202,7 +196,7 @@ describe('reactiverefs', () => {
202196

203197
if (!ReactFeatureFlags.disableModulePatternComponents) {
204198
describe('factory components', () => {
205-
it('Should correctly get the ref', () => {
199+
it('Should correctly get the ref', async () => {
206200
function Comp() {
207201
return {
208202
elemRef: React.createRef(),
@@ -213,9 +207,14 @@ if (!ReactFeatureFlags.disableModulePatternComponents) {
213207
}
214208

215209
let inst;
216-
expect(
217-
() => (inst = ReactTestUtils.renderIntoDocument(<Comp />)),
218-
).toErrorDev(
210+
await expect(async () => {
211+
const container = document.createElement('div');
212+
const root = ReactDOMClient.createRoot(container);
213+
214+
await act(() => {
215+
root.render(<Comp ref={current => (inst = current)} />);
216+
});
217+
}).toErrorDev(
219218
'Warning: The <Comp /> component appears to be a function component that returns a class instance. ' +
220219
'Change Comp to a class that extends React.Component instead. ' +
221220
"If you can't use a class try assigning the prototype on the function as a workaround. " +
@@ -237,10 +236,10 @@ describe('ref swapping', () => {
237236
React = require('react');
238237
ReactDOMClient = require('react-dom/client');
239238
ReactFeatureFlags = require('shared/ReactFeatureFlags');
240-
ReactTestUtils = require('react-dom/test-utils');
241239
act = require('internal-test-utils').act;
242240

243241
RefHopsAround = class extends React.Component {
242+
container = null;
244243
state = {count: 0};
245244
hopRef = React.createRef();
246245
divOneRef = React.createRef();
@@ -260,7 +259,7 @@ describe('ref swapping', () => {
260259
* points to the correct divs.
261260
*/
262261
return (
263-
<div>
262+
<div ref={current => (this.container = current)}>
264263
<div
265264
className="first"
266265
ref={count % 3 === 0 ? this.hopRef : this.divOneRef}
@@ -279,32 +278,33 @@ describe('ref swapping', () => {
279278
};
280279
});
281280

282-
it('Allow refs to hop around children correctly', () => {
283-
const refHopsAround = ReactTestUtils.renderIntoDocument(<RefHopsAround />);
281+
it('Allow refs to hop around children correctly', async () => {
282+
const container = document.createElement('div');
283+
const root = ReactDOMClient.createRoot(container);
284284

285-
const firstDiv = ReactTestUtils.findRenderedDOMComponentWithClass(
286-
refHopsAround,
287-
'first',
288-
);
289-
const secondDiv = ReactTestUtils.findRenderedDOMComponentWithClass(
290-
refHopsAround,
291-
'second',
292-
);
293-
const thirdDiv = ReactTestUtils.findRenderedDOMComponentWithClass(
294-
refHopsAround,
295-
'third',
296-
);
285+
let refHopsAround;
286+
await act(() => {
287+
root.render(<RefHopsAround ref={current => (refHopsAround = current)} />);
288+
});
289+
290+
const firstDiv = refHopsAround.container.querySelector('.first');
291+
const secondDiv = refHopsAround.container.querySelector('.second');
292+
const thirdDiv = refHopsAround.container.querySelector('.third');
297293

298294
expect(refHopsAround.hopRef.current).toEqual(firstDiv);
299295
expect(refHopsAround.divTwoRef.current).toEqual(secondDiv);
300296
expect(refHopsAround.divThreeRef.current).toEqual(thirdDiv);
301297

302-
refHopsAround.moveRef();
298+
await act(() => {
299+
refHopsAround.moveRef();
300+
});
303301
expect(refHopsAround.divOneRef.current).toEqual(firstDiv);
304302
expect(refHopsAround.hopRef.current).toEqual(secondDiv);
305303
expect(refHopsAround.divThreeRef.current).toEqual(thirdDiv);
306304

307-
refHopsAround.moveRef();
305+
await act(() => {
306+
refHopsAround.moveRef();
307+
});
308308
expect(refHopsAround.divOneRef.current).toEqual(firstDiv);
309309
expect(refHopsAround.divTwoRef.current).toEqual(secondDiv);
310310
expect(refHopsAround.hopRef.current).toEqual(thirdDiv);
@@ -313,7 +313,9 @@ describe('ref swapping', () => {
313313
* Make sure that after the third, we're back to where we started and the
314314
* refs are completely restored.
315315
*/
316-
refHopsAround.moveRef();
316+
await act(() => {
317+
refHopsAround.moveRef();
318+
});
317319
expect(refHopsAround.hopRef.current).toEqual(firstDiv);
318320
expect(refHopsAround.divTwoRef.current).toEqual(secondDiv);
319321
expect(refHopsAround.divThreeRef.current).toEqual(thirdDiv);
@@ -364,15 +366,20 @@ describe('ref swapping', () => {
364366
expect(refCalled).toBe(1);
365367
});
366368

367-
it('coerces numbers to strings', () => {
369+
it('coerces numbers to strings', async () => {
368370
class A extends React.Component {
369371
render() {
370372
return <div ref={1} />;
371373
}
372374
}
373375
let a;
374-
expect(() => {
375-
a = ReactTestUtils.renderIntoDocument(<A />);
376+
await expect(async () => {
377+
const container = document.createElement('div');
378+
const root = ReactDOMClient.createRoot(container);
379+
380+
await act(() => {
381+
root.render(<A ref={current => (a = current)} />);
382+
});
376383
}).toErrorDev([
377384
'Warning: Component "A" contains the string ref "1". ' +
378385
'Support for string refs will be removed in a future major release. ' +

0 commit comments

Comments
 (0)