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`

Author: jackpope

packages/use-subscription/src/__tests__/useSubscription-test.js

@@ -13,7 +13,7 @@ let act;
 let useSubscription;
 let BehaviorSubject;
 let React;
-let ReactTestRenderer;
+let ReactDOMClient;
 let Scheduler;
 let ReplaySubject;
 let assertLog;
@@ -27,7 +27,7 @@ describe('useSubscription', () => {
 
     useSubscription = require('use-subscription').useSubscription;
     React = require('react');
-    ReactTestRenderer = require('react-test-renderer');
+    ReactDOMClient = require('react-dom/client');
     Scheduler = require('scheduler');
 
     act = require('internal-test-utils').act;
@@ -80,12 +80,9 @@ describe('useSubscription', () => {
     }
 
     const observable = createBehaviorSubject();
-    let renderer;
+    const root = ReactDOMClient.createRoot(document.createElement('div'));
     await act(() => {
-      renderer = ReactTestRenderer.create(
-        <Subscription source={observable} />,
-        {isConcurrent: true},
-      );
+      root.render(<Subscription source={observable} />);
     });
     assertLog(['default']);
 
@@ -96,7 +93,7 @@ describe('useSubscription', () => {
     assertLog(['abc']);
 
     // Unmounting the subscriber should remove listeners
-    await act(() => renderer.update(<div />));
+    await act(() => root.render(<div />));
     await act(() => observable.next(456));
     await waitForAll([]);
   });
@@ -132,12 +129,9 @@ describe('useSubscription', () => {
     }
 
     let observable = createReplaySubject('initial');
-    let renderer;
+    const root = ReactDOMClient.createRoot(document.createElement('div'));
     await act(() => {
-      renderer = ReactTestRenderer.create(
-        <Subscription source={observable} />,
-        {isConcurrent: true},
-      );
+      root.render(<Subscription source={observable} />);
     });
     assertLog(['initial']);
     await act(() => observable.next('updated'));
@@ -147,7 +141,7 @@ describe('useSubscription', () => {
 
     // Unsetting the subscriber prop should reset subscribed values
     observable = createReplaySubject(undefined);
-    await act(() => renderer.update(<Subscription source={observable} />));
+    await act(() => root.render(<Subscription source={observable} />));
     assertLog(['default']);
   });
 
@@ -181,12 +175,9 @@ describe('useSubscription', () => {
 
     expect(subscriptions).toHaveLength(0);
 
-    let renderer;
+    const root = ReactDOMClient.createRoot(document.createElement('div'));
     await act(() => {
-      renderer = ReactTestRenderer.create(
-        <Subscription source={observableA} />,
-        {isConcurrent: true},
-      );
+      root.render(<Subscription source={observableA} />);
     });
 
     // Updates while subscribed should re-render the child component
@@ -195,7 +186,7 @@ describe('useSubscription', () => {
     expect(subscriptions[0]).toBe(observableA);
 
     // Unsetting the subscriber prop should reset subscribed values
-    await act(() => renderer.update(<Subscription source={observableB} />));
+    await act(() => root.render(<Subscription source={observableB} />));
 
     assertLog(['b-0']);
     expect(subscriptions).toHaveLength(2);
@@ -240,12 +231,9 @@ describe('useSubscription', () => {
 
     expect(subscriptions).toHaveLength(0);
 
-    let renderer;
+    const root = ReactDOMClient.createRoot(document.createElement('div'));
     await act(() => {
-      renderer = ReactTestRenderer.create(
-        <Subscription source={observableA} />,
-        {isConcurrent: true},
-      );
+      root.render(<Subscription source={observableA} />);
     });
 
     // Updates while subscribed should re-render the child component
@@ -254,7 +242,7 @@ describe('useSubscription', () => {
     expect(subscriptions[0]).toBe(observableA);
 
     // Unsetting the subscriber prop should reset subscribed values
-    await act(() => renderer.update(<Subscription source={observableB} />));
+    await act(() => root.render(<Subscription source={observableB} />));
     assertLog(['b-0']);
     expect(subscriptions).toHaveLength(2);
     expect(subscriptions[1]).toBe(observableB);
@@ -328,19 +316,17 @@ describe('useSubscription', () => {
     const observableA = createBehaviorSubject('a-0');
     const observableB = createBehaviorSubject('b-0');
 
-    let renderer;
+    const root = ReactDOMClient.createRoot(document.createElement('div'));
     await act(() => {
-      renderer = ReactTestRenderer.create(<Parent observed={observableA} />, {
-        isConcurrent: true,
-      });
+      root.render(<Parent observed={observableA} />);
     });
     assertLog(['Child: a-0', 'Grandchild: a-0']);
     expect(log).toEqual(['Parent.componentDidMount']);
 
     // Start React update, but don't finish
     await act(async () => {
       React.startTransition(() => {
-        renderer.update(<Parent observed={observableB} />);
+        root.render(<Parent observed={observableB} />);
       });
 
       await waitFor(['Child: b-0']);
@@ -353,7 +339,7 @@ describe('useSubscription', () => {
     });
 
     // Update again
-    await act(() => renderer.update(<Parent observed={observableA} />));
+    await act(() => root.render(<Parent observed={observableA} />));
 
     // Flush everything and ensure that the correct subscribable is used
     // We expect the last emitted update to be rendered (because of the commit phase value check)
@@ -431,11 +417,9 @@ describe('useSubscription', () => {
     const observableA = createBehaviorSubject('a-0');
     const observableB = createBehaviorSubject('b-0');
 
-    let renderer;
+    const root = ReactDOMClient.createRoot(document.createElement('div'));
     await act(() => {
-      renderer = ReactTestRenderer.create(<Parent observed={observableA} />, {
-        isConcurrent: true,
-      });
+      root.render(<Parent observed={observableA} />);
     });
     assertLog(['Child: a-0', 'Grandchild: a-0']);
     expect(log).toEqual(['Parent.componentDidMount:a-0']);
@@ -444,7 +428,7 @@ describe('useSubscription', () => {
     // Start React update, but don't finish
     await act(async () => {
       React.startTransition(() => {
-        renderer.update(<Parent observed={observableB} />);
+        root.render(<Parent observed={observableB} />);
       });
       await waitFor(['Child: b-0']);
       expect(log).toEqual([]);
@@ -456,10 +440,10 @@ describe('useSubscription', () => {
       // Update again
       if (gate(flags => flags.enableUnifiedSyncLane)) {
         React.startTransition(() => {
-          renderer.update(<Parent observed={observableA} />);
+          root.render(<Parent observed={observableA} />);
         });
       } else {
-        renderer.update(<Parent observed={observableA} />);
+        root.render(<Parent observed={observableA} />);
       }
 
       // Flush everything and ensure that the correct subscribable is used
@@ -524,16 +508,13 @@ describe('useSubscription', () => {
 
     eventHandler.subscribe(async value => {
       if (value === false) {
-        renderer.unmount();
+        root.unmount();
       }
     });
 
-    let renderer;
+    const root = ReactDOMClient.createRoot(document.createElement('div'));
     await act(() => {
-      renderer = ReactTestRenderer.create(
-        <Subscription source={eventHandler} />,
-        {isConcurrent: true},
-      );
+      root.render(<Subscription source={eventHandler} />);
     });
     assertLog([true]);
 
@@ -562,18 +543,13 @@ describe('useSubscription', () => {
       return null;
     }
 
-    let renderer;
+    const root = ReactDOMClient.createRoot(document.createElement('div'));
     await act(() => {
-      renderer = ReactTestRenderer.create(
-        <Subscription subscription={subscription1} />,
-        {isConcurrent: true},
-      );
+      root.render(<Subscription subscription={subscription1} />);
     });
     await waitForAll([]);
 
-    await act(() =>
-      renderer.update(<Subscription subscription={subscription2} />),
-    );
+    await act(() => root.render(<Subscription subscription={subscription2} />));
     await waitForAll([]);
   });
 
@@ -599,15 +575,15 @@ describe('useSubscription', () => {
       return value;
     };
 
+    const root = ReactDOMClient.createRoot(document.createElement('div'));
     await act(async () => {
       // Initial render of "A"
       mutate('A');
-      ReactTestRenderer.create(
+      root.render(
         <React.Fragment>
           <Subscriber id="first" />
           <Subscriber id="second" />
         </React.Fragment>,
-        {isConcurrent: true},
       );
       await waitForAll(['render:first:A', 'render:second:A']);