diff --git a/packages/react-dom/src/__tests__/ReactDOMUseId-test.js b/packages/react-dom/src/__tests__/ReactDOMUseId-test.js
index f501d1724dd8a..f2bda81aa39ab 100644
--- a/packages/react-dom/src/__tests__/ReactDOMUseId-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMUseId-test.js
@@ -10,9 +10,11 @@
let JSDOM;
let React;
let ReactDOM;
+let Scheduler;
let clientAct;
let ReactDOMFizzServer;
let Stream;
+let Suspense;
let useId;
let document;
let writable;
@@ -27,9 +29,11 @@ describe('useId', () => {
JSDOM = require('jsdom').JSDOM;
React = require('react');
ReactDOM = require('react-dom');
+ Scheduler = require('scheduler');
clientAct = require('jest-react').act;
ReactDOMFizzServer = require('react-dom/server');
Stream = require('stream');
+ Suspense = React.Suspense;
useId = React.unstable_useId;
// Test Environment
@@ -86,6 +90,11 @@ describe('useId', () => {
}
}
+ function Text({text}) {
+ Scheduler.unstable_yieldValue(text);
+ return text;
+ }
+
function normalizeTreeIdForTesting(id) {
const [serverClientPrefix, base32, hookIndex] = id.split(':');
if (serverClientPrefix === 'r') {
@@ -282,4 +291,141 @@ describe('useId', () => {
expect(divs[i].id).toMatch(/^R:.(((al)*a?)((la)*l?))*$/);
}
});
+
+ test('basic incremental hydration', async () => {
+ function App() {
+ return (
+
+ );
+ }
+
+ await serverAct(async () => {
+ const {pipe} = ReactDOMFizzServer.renderToPipeableStream();
+ pipe(writable);
+ });
+ await clientAct(async () => {
+ ReactDOM.hydrateRoot(container, );
+ });
+ expect(container).toMatchInlineSnapshot(`
+
+ `);
+ });
+
+ test('inserting a sibling before a dehydrated Suspense boundary', async () => {
+ const span = React.createRef(null);
+ function App({showMore}) {
+ // Note: Using a dynamic array so this is treated as an insertion instead
+ // of an update, because Fiber currently allocates a node even for
+ // empty children.
+ const children = [];
+ if (showMore) {
+ // These are client-only nodes. They aren't not included in the initial
+ // server render.
+ children.push(, );
+ }
+ children.push(
+
+
+
+
+ ,
+ ,
+ );
+
+ return children;
+ }
+
+ await serverAct(async () => {
+ const {pipe} = ReactDOMFizzServer.renderToPipeableStream();
+ pipe(writable);
+ });
+ expect(Scheduler).toHaveYielded(['A']);
+ const dehydratedSpan = container.getElementsByTagName('span')[0];
+ await clientAct(async () => {
+ const root = ReactDOM.hydrateRoot(container, );
+ expect(Scheduler).toFlushUntilNextPaint(['A']);
+ expect(container).toMatchInlineSnapshot(`
+
+ `);
+
+ // The inner boundary hasn't hydrated yet
+ expect(span.current).toBe(null);
+
+ // Insert another sibling before the Suspense boundary
+ root.render();
+ });
+ expect(Scheduler).toHaveYielded([
+ 'A',
+ 'B',
+ // The update triggers selective hydration so we render again
+ 'A',
+ 'B',
+ ]);
+ // The insertions should not cause a mismatch.
+ expect(container).toMatchInlineSnapshot(`
+
+ A
+
+
+ B
+
+
+
+
+
+
+