Remove ReactTestUtils from refs-test (#28336)
Sebastian Silbermann committed
Feb 20, 2024 at 16:50 UTC
b559f5fefed48a7e95afe3bece9e625d4b4b82a2
1 file changed
+44
-37
packages/react-dom/src/__tests__/refs-test.js
+44
-37
@@ -12,7 +12,6 @@
12
let React = require('react');
13
let ReactDOMClient = require('react-dom/client');
14
let ReactFeatureFlags = require('shared/ReactFeatureFlags');
15
-let ReactTestUtils = require('react-dom/test-utils');
15
let act = require('internal-test-utils').act;
16
17
// This is testing if string refs are deleted from `instance.refs`
@@ -26,7 +25,6 @@ describe('reactiverefs', () => {
25
React = require('react');
26
ReactDOMClient = require('react-dom/client');
27
ReactFeatureFlags = require('shared/ReactFeatureFlags');
29
- ReactTestUtils = require('react-dom/test-utils');
28
act = require('internal-test-utils').act;
29
});
30
@@ -73,10 +71,7 @@ describe('reactiverefs', () => {
71
}
72
73
const expectClickLogsLengthToBe = function (instance, length) {
76
- const clickLogs = ReactTestUtils.scryRenderedDOMComponentsWithClass(
77
- instance,
78
- 'clickLogDiv',
79
- );
74
+ const clickLogs = instance.container.querySelectorAll('.clickLogDiv');
75
expect(clickLogs.length).toBe(length);
76
expect(Object.keys(instance.refs.myCounter.refs).length).toBe(length);
77
};
@@ -101,13 +96,14 @@ describe('reactiverefs', () => {
96
* into a different parent.
97
*/
98
class TestRefsComponent extends React.Component {
99
+ container = null;
100
doReset = () => {
101
this.refs.myCounter.triggerReset();
102
};
103
104
render() {
105
return (
110
- <div>
106
+ <div ref={current => (this.container = current)}>
107
<div ref="resetDiv" onClick={this.doReset}>
108
Reset Me By Clicking This.
109
</div>
@@ -170,10 +166,8 @@ describe('reactiverefs', () => {
166
*/
167
it('Should increase refs with an increase in divs', async () => {
168
const testRefsComponent = await renderTestRefsComponent();
173
- const clickIncrementer = ReactTestUtils.findRenderedDOMComponentWithClass(
174
- testRefsComponent,
175
- 'clickIncrementer',
176
- );
169
+ const clickIncrementer =
170
+ testRefsComponent.container.querySelector('.clickIncrementer');
171
172
expectClickLogsLengthToBe(testRefsComponent, 1);
173
@@ -202,7 +196,7 @@ describe('reactiverefs', () => {
196
197
if (!ReactFeatureFlags.disableModulePatternComponents) {
198
describe('factory components', () => {
205
- it('Should correctly get the ref', () => {
199
+ it('Should correctly get the ref', async () => {
200
function Comp() {
201
return {
202
elemRef: React.createRef(),
@@ -213,9 +207,14 @@ if (!ReactFeatureFlags.disableModulePatternComponents) {
207
}
208
209
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(
218
'Warning: The <Comp /> component appears to be a function component that returns a class instance. ' +
219
'Change Comp to a class that extends React.Component instead. ' +
220
"If you can't use a class try assigning the prototype on the function as a workaround. " +
@@ -237,10 +236,10 @@ describe('ref swapping', () => {
236
React = require('react');
237
ReactDOMClient = require('react-dom/client');
238
ReactFeatureFlags = require('shared/ReactFeatureFlags');
240
- ReactTestUtils = require('react-dom/test-utils');
239
act = require('internal-test-utils').act;
240
241
RefHopsAround = class extends React.Component {
242
+ container = null;
243
state = {count: 0};
244
hopRef = React.createRef();
245
divOneRef = React.createRef();
@@ -260,7 +259,7 @@ describe('ref swapping', () => {
259
* points to the correct divs.
260
*/
261
return (
263
- <div>
262
+ <div ref={current => (this.container = current)}>
263
<div
264
className="first"
265
ref={count % 3 === 0 ? this.hopRef : this.divOneRef}
@@ -279,32 +278,33 @@ describe('ref swapping', () => {
278
};
279
});
280
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);
284
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');
293
294
expect(refHopsAround.hopRef.current).toEqual(firstDiv);
295
expect(refHopsAround.divTwoRef.current).toEqual(secondDiv);
296
expect(refHopsAround.divThreeRef.current).toEqual(thirdDiv);
297
302
- refHopsAround.moveRef();
298
+ await act(() => {
299
+ refHopsAround.moveRef();
300
+ });
301
expect(refHopsAround.divOneRef.current).toEqual(firstDiv);
302
expect(refHopsAround.hopRef.current).toEqual(secondDiv);
303
expect(refHopsAround.divThreeRef.current).toEqual(thirdDiv);
304
307
- refHopsAround.moveRef();
305
+ await act(() => {
306
+ refHopsAround.moveRef();
307
+ });
308
expect(refHopsAround.divOneRef.current).toEqual(firstDiv);
309
expect(refHopsAround.divTwoRef.current).toEqual(secondDiv);
310
expect(refHopsAround.hopRef.current).toEqual(thirdDiv);
@@ -313,7 +313,9 @@ describe('ref swapping', () => {
313
* Make sure that after the third, we're back to where we started and the
314
* refs are completely restored.
315
*/
316
- refHopsAround.moveRef();
316
+ await act(() => {
317
+ refHopsAround.moveRef();
318
+ });
319
expect(refHopsAround.hopRef.current).toEqual(firstDiv);
320
expect(refHopsAround.divTwoRef.current).toEqual(secondDiv);
321
expect(refHopsAround.divThreeRef.current).toEqual(thirdDiv);
@@ -364,15 +366,20 @@ describe('ref swapping', () => {
366
expect(refCalled).toBe(1);
367
});
368
367
- it('coerces numbers to strings', () => {
369
+ it('coerces numbers to strings', async () => {
370
class A extends React.Component {
371
render() {
372
return <div ref={1} />;
373
}
374
}
375
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
+ });
383
}).toErrorDev([
384
'Warning: Component "A" contains the string ref "1". ' +
385
'Support for string refs will be removed in a future major release. ' +