diff --git a/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
index 7d98dbd87dc78..8875fa4c0aaea 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
@@ -19,6 +19,7 @@ let ReactFeatureFlags;
let Suspense;
let SuspenseList;
let Offscreen;
+let useSyncExternalStore;
let act;
let IdleEventPriority;
let waitForAll;
@@ -113,6 +114,7 @@ describe('ReactDOMServerPartialHydration', () => {
Scheduler = require('scheduler');
Suspense = React.Suspense;
Offscreen = React.unstable_Offscreen;
+ useSyncExternalStore = React.useSyncExternalStore;
if (gate(flags => flags.enableSuspenseList)) {
SuspenseList = React.SuspenseList;
}
@@ -480,6 +482,26 @@ describe('ReactDOMServerPartialHydration', () => {
});
it('recovers with client render when server rendered additional nodes at suspense root', async () => {
+ function CheckIfHydrating({children}) {
+ // This is a trick to check whether we're hydrating or not, since React
+ // doesn't expose that information currently except
+ // via useSyncExternalStore.
+ let serverOrClient = '(unknown)';
+ useSyncExternalStore(
+ () => {},
+ () => {
+ serverOrClient = 'Client rendered';
+ return null;
+ },
+ () => {
+ serverOrClient = 'Server rendered';
+ return null;
+ },
+ );
+ Scheduler.log(serverOrClient);
+ return null;
+ }
+
const ref = React.createRef();
function App({hasB}) {
return (
@@ -487,6 +509,7 @@ describe('ReactDOMServerPartialHydration', () => {