Remove RTR usage from useSubscription-test (#28388)
## Summary Cleaning up internal usage of ReactTestRenderer ## How did you test this change? `yarn test packages/use-subscription/src/__tests__/useSubscription-test.js`
Jack Pope committed
Feb 20, 2024 at 17:49 UTC
0778f61321ebb235b49e4630e43e734a9badbd5c
1 file changed
+31
-55
packages/use-subscription/src/__tests__/useSubscription-test.js
+31
-55
@@ -13,7 +13,7 @@ let act;
13
let useSubscription;
14
let BehaviorSubject;
15
let React;
16
-let ReactTestRenderer;
16
+let ReactDOMClient;
17
let Scheduler;
18
let ReplaySubject;
19
let assertLog;
@@ -27,7 +27,7 @@ describe('useSubscription', () => {
27
28
useSubscription = require('use-subscription').useSubscription;
29
React = require('react');
30
- ReactTestRenderer = require('react-test-renderer');
30
+ ReactDOMClient = require('react-dom/client');
31
Scheduler = require('scheduler');
32
33
act = require('internal-test-utils').act;
@@ -80,12 +80,9 @@ describe('useSubscription', () => {
80
}
81
82
const observable = createBehaviorSubject();
83
- let renderer;
83
+ const root = ReactDOMClient.createRoot(document.createElement('div'));
84
await act(() => {
85
- renderer = ReactTestRenderer.create(
86
- <Subscription source={observable} />,
87
- {isConcurrent: true},
88
- );
85
+ root.render(<Subscription source={observable} />);
86
});
87
assertLog(['default']);
88
@@ -96,7 +93,7 @@ describe('useSubscription', () => {
93
assertLog(['abc']);
94
95
// Unmounting the subscriber should remove listeners
99
- await act(() => renderer.update(<div />));
96
+ await act(() => root.render(<div />));
97
await act(() => observable.next(456));
98
await waitForAll([]);
99
});
@@ -132,12 +129,9 @@ describe('useSubscription', () => {
129
}
130
131
let observable = createReplaySubject('initial');
135
- let renderer;
132
+ const root = ReactDOMClient.createRoot(document.createElement('div'));
133
await act(() => {
137
- renderer = ReactTestRenderer.create(
138
- <Subscription source={observable} />,
139
- {isConcurrent: true},
140
- );
134
+ root.render(<Subscription source={observable} />);
135
});
136
assertLog(['initial']);
137
await act(() => observable.next('updated'));
@@ -147,7 +141,7 @@ describe('useSubscription', () => {
141
142
// Unsetting the subscriber prop should reset subscribed values
143
observable = createReplaySubject(undefined);
150
- await act(() => renderer.update(<Subscription source={observable} />));
144
+ await act(() => root.render(<Subscription source={observable} />));
145
assertLog(['default']);
146
});
147
@@ -181,12 +175,9 @@ describe('useSubscription', () => {
175
176
expect(subscriptions).toHaveLength(0);
177
184
- let renderer;
178
+ const root = ReactDOMClient.createRoot(document.createElement('div'));
179
await act(() => {
186
- renderer = ReactTestRenderer.create(
187
- <Subscription source={observableA} />,
188
- {isConcurrent: true},
189
- );
180
+ root.render(<Subscription source={observableA} />);
181
});
182
183
// Updates while subscribed should re-render the child component
@@ -195,7 +186,7 @@ describe('useSubscription', () => {
186
expect(subscriptions[0]).toBe(observableA);
187
188
// Unsetting the subscriber prop should reset subscribed values
198
- await act(() => renderer.update(<Subscription source={observableB} />));
189
+ await act(() => root.render(<Subscription source={observableB} />));
190
191
assertLog(['b-0']);
192
expect(subscriptions).toHaveLength(2);
@@ -240,12 +231,9 @@ describe('useSubscription', () => {
231
232
expect(subscriptions).toHaveLength(0);
233
243
- let renderer;
234
+ const root = ReactDOMClient.createRoot(document.createElement('div'));
235
await act(() => {
245
- renderer = ReactTestRenderer.create(
246
- <Subscription source={observableA} />,
247
- {isConcurrent: true},
248
- );
236
+ root.render(<Subscription source={observableA} />);
237
});
238
239
// Updates while subscribed should re-render the child component
@@ -254,7 +242,7 @@ describe('useSubscription', () => {
242
expect(subscriptions[0]).toBe(observableA);
243
244
// Unsetting the subscriber prop should reset subscribed values
257
- await act(() => renderer.update(<Subscription source={observableB} />));
245
+ await act(() => root.render(<Subscription source={observableB} />));
246
assertLog(['b-0']);
247
expect(subscriptions).toHaveLength(2);
248
expect(subscriptions[1]).toBe(observableB);
@@ -328,11 +316,9 @@ describe('useSubscription', () => {
316
const observableA = createBehaviorSubject('a-0');
317
const observableB = createBehaviorSubject('b-0');
318
331
- let renderer;
319
+ const root = ReactDOMClient.createRoot(document.createElement('div'));
320
await act(() => {
333
- renderer = ReactTestRenderer.create(<Parent observed={observableA} />, {
334
- isConcurrent: true,
335
- });
321
+ root.render(<Parent observed={observableA} />);
322
});
323
assertLog(['Child: a-0', 'Grandchild: a-0']);
324
expect(log).toEqual(['Parent.componentDidMount']);
@@ -340,7 +326,7 @@ describe('useSubscription', () => {
326
// Start React update, but don't finish
327
await act(async () => {
328
React.startTransition(() => {
343
- renderer.update(<Parent observed={observableB} />);
329
+ root.render(<Parent observed={observableB} />);
330
});
331
332
await waitFor(['Child: b-0']);
@@ -353,7 +339,7 @@ describe('useSubscription', () => {
339
});
340
341
// Update again
356
- await act(() => renderer.update(<Parent observed={observableA} />));
342
+ await act(() => root.render(<Parent observed={observableA} />));
343
344
// Flush everything and ensure that the correct subscribable is used
345
// We expect the last emitted update to be rendered (because of the commit phase value check)
@@ -431,11 +417,9 @@ describe('useSubscription', () => {
417
const observableA = createBehaviorSubject('a-0');
418
const observableB = createBehaviorSubject('b-0');
419
434
- let renderer;
420
+ const root = ReactDOMClient.createRoot(document.createElement('div'));
421
await act(() => {
436
- renderer = ReactTestRenderer.create(<Parent observed={observableA} />, {
437
- isConcurrent: true,
438
- });
422
+ root.render(<Parent observed={observableA} />);
423
});
424
assertLog(['Child: a-0', 'Grandchild: a-0']);
425
expect(log).toEqual(['Parent.componentDidMount:a-0']);
@@ -444,7 +428,7 @@ describe('useSubscription', () => {
428
// Start React update, but don't finish
429
await act(async () => {
430
React.startTransition(() => {
447
- renderer.update(<Parent observed={observableB} />);
431
+ root.render(<Parent observed={observableB} />);
432
});
433
await waitFor(['Child: b-0']);
434
expect(log).toEqual([]);
@@ -456,10 +440,10 @@ describe('useSubscription', () => {
440
// Update again
441
if (gate(flags => flags.enableUnifiedSyncLane)) {
442
React.startTransition(() => {
459
- renderer.update(<Parent observed={observableA} />);
443
+ root.render(<Parent observed={observableA} />);
444
});
445
} else {
462
- renderer.update(<Parent observed={observableA} />);
446
+ root.render(<Parent observed={observableA} />);
447
}
448
449
// Flush everything and ensure that the correct subscribable is used
@@ -524,16 +508,13 @@ describe('useSubscription', () => {
508
509
eventHandler.subscribe(async value => {
510
if (value === false) {
527
- renderer.unmount();
511
+ root.unmount();
512
}
513
});
514
531
- let renderer;
515
+ const root = ReactDOMClient.createRoot(document.createElement('div'));
516
await act(() => {
533
- renderer = ReactTestRenderer.create(
534
- <Subscription source={eventHandler} />,
535
- {isConcurrent: true},
536
- );
517
+ root.render(<Subscription source={eventHandler} />);
518
});
519
assertLog([true]);
520
@@ -562,18 +543,13 @@ describe('useSubscription', () => {
543
return null;
544
}
545
565
- let renderer;
546
+ const root = ReactDOMClient.createRoot(document.createElement('div'));
547
await act(() => {
567
- renderer = ReactTestRenderer.create(
568
- <Subscription subscription={subscription1} />,
569
- {isConcurrent: true},
570
- );
548
+ root.render(<Subscription subscription={subscription1} />);
549
});
550
await waitForAll([]);
551
574
- await act(() =>
575
- renderer.update(<Subscription subscription={subscription2} />),
576
- );
552
+ await act(() => root.render(<Subscription subscription={subscription2} />));
553
await waitForAll([]);
554
});
555
@@ -599,15 +575,15 @@ describe('useSubscription', () => {
575
return value;
576
};
577
578
+ const root = ReactDOMClient.createRoot(document.createElement('div'));
579
await act(async () => {
580
// Initial render of "A"
581
mutate('A');
605
- ReactTestRenderer.create(
582
+ root.render(
583
<React.Fragment>
584
<Subscriber id="first" />
585
<Subscriber id="second" />
586
</React.Fragment>,
610
- {isConcurrent: true},
587
);
588
await waitForAll(['render:first:A', 'render:second:A']);
589