diff --git a/packages/use-subscription/src/__tests__/useSubscription-test.js b/packages/use-subscription/src/__tests__/useSubscription-test.js
index 9c971bd14bbb3..aff10a7967a33 100644
--- a/packages/use-subscription/src/__tests__/useSubscription-test.js
+++ b/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(
- ,
- {isConcurrent: true},
- );
+ root.render();
});
assertLog(['default']);
@@ -96,7 +93,7 @@ describe('useSubscription', () => {
assertLog(['abc']);
// Unmounting the subscriber should remove listeners
- await act(() => renderer.update(
));
+ await act(() => root.render());
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(
- ,
- {isConcurrent: true},
- );
+ root.render();
});
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());
+ await act(() => root.render());
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(
- ,
- {isConcurrent: true},
- );
+ root.render();
});
// 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());
+ await act(() => root.render());
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(
- ,
- {isConcurrent: true},
- );
+ root.render();
});
// 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());
+ await act(() => root.render());
assertLog(['b-0']);
expect(subscriptions).toHaveLength(2);
expect(subscriptions[1]).toBe(observableB);
@@ -328,11 +316,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(, {
- isConcurrent: true,
- });
+ root.render();
});
assertLog(['Child: a-0', 'Grandchild: a-0']);
expect(log).toEqual(['Parent.componentDidMount']);
@@ -340,7 +326,7 @@ describe('useSubscription', () => {
// Start React update, but don't finish
await act(async () => {
React.startTransition(() => {
- renderer.update();
+ root.render();
});
await waitFor(['Child: b-0']);
@@ -353,7 +339,7 @@ describe('useSubscription', () => {
});
// Update again
- await act(() => renderer.update());
+ await act(() => root.render());
// 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(, {
- isConcurrent: true,
- });
+ root.render();
});
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();
+ root.render();
});
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();
+ root.render();
});
} else {
- renderer.update();
+ root.render();
}
// 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(
- ,
- {isConcurrent: true},
- );
+ root.render();
});
assertLog([true]);
@@ -562,18 +543,13 @@ describe('useSubscription', () => {
return null;
}
- let renderer;
+ const root = ReactDOMClient.createRoot(document.createElement('div'));
await act(() => {
- renderer = ReactTestRenderer.create(
- ,
- {isConcurrent: true},
- );
+ root.render();
});
await waitForAll([]);
- await act(() =>
- renderer.update(),
- );
+ await act(() => root.render());
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(
,
- {isConcurrent: true},
);
await waitForAll(['render:first:A', 'render:second:A']);