Skip to content

Commit

Permalink
Land enableClientRenderFallbackOnHydrationMismatch (#24410)
Browse files Browse the repository at this point in the history 
This flag is already enabled on all relevant surfaces. We can remove it.
  • Loading branch information
@acdlite
acdlite authored Apr 20, 2022
1 parent 3547729 commit 0dc4e66
Show file tree
Hide file tree
Showing 20 changed files with 175 additions and 609 deletions.
113 changes: 41 additions & 72 deletions packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1832,41 +1832,26 @@ describe('ReactDOMFizzServer', () => {
},
});

if (gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)) {
expect(() => {
// The first paint switches to client rendering due to mismatch
expect(Scheduler).toFlushUntilNextPaint([
'client',
'Log recoverable error: Hydration failed because the initial ' +
'UI does not match what was rendered on the server.',
'Log recoverable error: There was an error while hydrating. ' +
'Because the error happened outside of a Suspense boundary, the ' +
'entire root will switch to client rendering.',
]);
}).toErrorDev(
[
'Warning: An error occurred during hydration. The server HTML was replaced with client content in <div>.',
'Warning: Expected server HTML to contain a matching <div> in <div>.\n' +
' in div (at **)\n' +
' in App (at **)',
],
{withoutStack: 1},
);
expect(getVisibleChildren(container)).toEqual(<div>client</div>);
} else {
const serverRenderedDiv = container.getElementsByTagName('div')[0];
// The first paint uses the server snapshot
expect(Scheduler).toFlushUntilNextPaint(['server']);
expect(getVisibleChildren(container)).toEqual(<div>server</div>);
// Hydration succeeded
expect(ref.current).toEqual(serverRenderedDiv);

// Asynchronously we detect that the store has changed on the client,
// and patch up the inconsistency
expect(Scheduler).toFlushUntilNextPaint(['client']);
expect(getVisibleChildren(container)).toEqual(<div>client</div>);
expect(ref.current).toEqual(serverRenderedDiv);
}
expect(() => {
// The first paint switches to client rendering due to mismatch
expect(Scheduler).toFlushUntilNextPaint([
'client',
'Log recoverable error: Hydration failed because the initial ' +
'UI does not match what was rendered on the server.',
'Log recoverable error: There was an error while hydrating. ' +
'Because the error happened outside of a Suspense boundary, the ' +
'entire root will switch to client rendering.',
]);
}).toErrorDev(
[
'Warning: An error occurred during hydration. The server HTML was replaced with client content in <div>.',
'Warning: Expected server HTML to contain a matching <div> in <div>.\n' +
' in div (at **)\n' +
' in App (at **)',
],
{withoutStack: 1},
);
expect(getVisibleChildren(container)).toEqual(<div>client</div>);
});

// The selector implementation uses the lazy ref initialization pattern
Expand Down Expand Up @@ -1932,43 +1917,27 @@ describe('ReactDOMFizzServer', () => {
},
});

if (gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)) {
// The first paint uses the client due to mismatch forcing client render
expect(() => {
// The first paint switches to client rendering due to mismatch
expect(Scheduler).toFlushUntilNextPaint([
'client',
'Log recoverable error: Hydration failed because the initial ' +
'UI does not match what was rendered on the server.',
'Log recoverable error: There was an error while hydrating. ' +
'Because the error happened outside of a Suspense boundary, the ' +
'entire root will switch to client rendering.',
]);
}).toErrorDev(
[
'Warning: An error occurred during hydration. The server HTML was replaced with client content',
'Warning: Expected server HTML to contain a matching <div> in <div>.\n' +
' in div (at **)\n' +
' in App (at **)',
],
{withoutStack: 1},
);
expect(getVisibleChildren(container)).toEqual(<div>client</div>);
} else {
const serverRenderedDiv = container.getElementsByTagName('div')[0];

// The first paint uses the server snapshot
expect(Scheduler).toFlushUntilNextPaint(['server']);
expect(getVisibleChildren(container)).toEqual(<div>server</div>);
// Hydration succeeded
expect(ref.current).toEqual(serverRenderedDiv);

// Asynchronously we detect that the store has changed on the client,
// and patch up the inconsistency
expect(Scheduler).toFlushUntilNextPaint(['client']);
expect(getVisibleChildren(container)).toEqual(<div>client</div>);
expect(ref.current).toEqual(serverRenderedDiv);
}
// The first paint uses the client due to mismatch forcing client render
expect(() => {
// The first paint switches to client rendering due to mismatch
expect(Scheduler).toFlushUntilNextPaint([
'client',
'Log recoverable error: Hydration failed because the initial ' +
'UI does not match what was rendered on the server.',
'Log recoverable error: There was an error while hydrating. ' +
'Because the error happened outside of a Suspense boundary, the ' +
'entire root will switch to client rendering.',
]);
}).toErrorDev(
[
'Warning: An error occurred during hydration. The server HTML was replaced with client content',
'Warning: Expected server HTML to contain a matching <div> in <div>.\n' +
' in div (at **)\n' +
' in App (at **)',
],
{withoutStack: 1},
);
expect(getVisibleChildren(container)).toEqual(<div>client</div>);
});

// @gate experimental
Expand Down
205 changes: 85 additions & 120 deletions packages/react-dom/src/__tests__/ReactDOMFizzSuppressHydrationWarning-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -240,23 +240,18 @@ describe('ReactDOMFizzServerHydrationWarning', () => {
Scheduler.unstable_yieldValue(error.message);
},
});
if (gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)) {
expect(() => {
expect(Scheduler).toFlushAndYield([
'Hydration failed because the initial UI does not match what was rendered on the server.',
'There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.',
]);
}).toErrorDev(
[
'Expected server HTML to contain a matching <span> in <span>',
'An error occurred during hydration. The server HTML was replaced with client content in <div>.',
],
{withoutStack: 1},
);
} else {
// This used to not warn.
expect(Scheduler).toFlushAndYield([]);
}
expect(() => {
expect(Scheduler).toFlushAndYield([
'Hydration failed because the initial UI does not match what was rendered on the server.',
'There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.',
]);
}).toErrorDev(
[
'Expected server HTML to contain a matching <span> in <span>',
'An error occurred during hydration. The server HTML was replaced with client content in <div>.',
],
{withoutStack: 1},
);
expect(getVisibleChildren(container)).toEqual(
<div>
<span>
Expand Down Expand Up @@ -329,23 +324,18 @@ describe('ReactDOMFizzServerHydrationWarning', () => {
Scheduler.unstable_yieldValue(error.message);
},
});
if (gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)) {
expect(() => {
expect(Scheduler).toFlushAndYield([
'Hydration failed because the initial UI does not match what was rendered on the server.',
'There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.',
]);
}).toErrorDev(
[
'Did not expect server HTML to contain the text node "Server" in <span>',
'An error occurred during hydration. The server HTML was replaced with client content in <div>.',
],
{withoutStack: 1},
);
} else {
// This used to not warn.
expect(Scheduler).toFlushAndYield([]);
}
expect(() => {
expect(Scheduler).toFlushAndYield([
'Hydration failed because the initial UI does not match what was rendered on the server.',
'There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.',
]);
}).toErrorDev(
[
'Did not expect server HTML to contain the text node "Server" in <span>',
'An error occurred during hydration. The server HTML was replaced with client content in <div>.',
],
{withoutStack: 1},
);
expect(getVisibleChildren(container)).toEqual(
<div>
<span />
Expand Down Expand Up @@ -383,23 +373,18 @@ describe('ReactDOMFizzServerHydrationWarning', () => {
Scheduler.unstable_yieldValue(error.message);
},
});
if (gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)) {
expect(() => {
expect(Scheduler).toFlushAndYield([
'Hydration failed because the initial UI does not match what was rendered on the server.',
'There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.',
]);
}).toErrorDev(
[
'Expected server HTML to contain a matching text node for "Client" in <span>.',
'An error occurred during hydration. The server HTML was replaced with client content in <div>.',
],
{withoutStack: 1},
);
} else {
// This used to not warn.
expect(Scheduler).toFlushAndYield([]);
}
expect(() => {
expect(Scheduler).toFlushAndYield([
'Hydration failed because the initial UI does not match what was rendered on the server.',
'There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.',
]);
}).toErrorDev(
[
'Expected server HTML to contain a matching text node for "Client" in <span>.',
'An error occurred during hydration. The server HTML was replaced with client content in <div>.',
],
{withoutStack: 1},
);
expect(getVisibleChildren(container)).toEqual(
<div>
<span>
Expand Down Expand Up @@ -440,23 +425,18 @@ describe('ReactDOMFizzServerHydrationWarning', () => {
Scheduler.unstable_yieldValue(error.message);
},
});
if (gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)) {
expect(() => {
expect(Scheduler).toFlushAndYield([
'Hydration failed because the initial UI does not match what was rendered on the server.',
'There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.',
]);
}).toErrorDev(
[
'Did not expect server HTML to contain the text node "Server" in <span>.',
'An error occurred during hydration. The server HTML was replaced with client content in <div>.',
],
{withoutStack: 1},
);
} else {
// This used to not warn.
expect(Scheduler).toFlushAndYield([]);
}
expect(() => {
expect(Scheduler).toFlushAndYield([
'Hydration failed because the initial UI does not match what was rendered on the server.',
'There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.',
]);
}).toErrorDev(
[
'Did not expect server HTML to contain the text node "Server" in <span>.',
'An error occurred during hydration. The server HTML was replaced with client content in <div>.',
],
{withoutStack: 1},
);
expect(getVisibleChildren(container)).toEqual(
<div>
<span>
Expand Down Expand Up @@ -495,24 +475,19 @@ describe('ReactDOMFizzServerHydrationWarning', () => {
Scheduler.unstable_yieldValue(error.message);
},
});
if (gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)) {
expect(() => {
expect(Scheduler).toFlushAndYield([
'Hydration failed because the initial UI does not match what was rendered on the server.',
'Hydration failed because the initial UI does not match what was rendered on the server.',
'There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.',
]);
}).toErrorDev(
[
'Expected server HTML to contain a matching text node for "Client" in <span>.',
'An error occurred during hydration. The server HTML was replaced with client content in <div>.',
],
{withoutStack: 1},
);
} else {
// This used to not warn.
expect(Scheduler).toFlushAndYield([]);
}
expect(() => {
expect(Scheduler).toFlushAndYield([
'Hydration failed because the initial UI does not match what was rendered on the server.',
'Hydration failed because the initial UI does not match what was rendered on the server.',
'There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.',
]);
}).toErrorDev(
[
'Expected server HTML to contain a matching text node for "Client" in <span>.',
'An error occurred during hydration. The server HTML was replaced with client content in <div>.',
],
{withoutStack: 1},
);
expect(getVisibleChildren(container)).toEqual(
<div>
<span>
Expand Down Expand Up @@ -627,23 +602,18 @@ describe('ReactDOMFizzServerHydrationWarning', () => {
Scheduler.unstable_yieldValue(error.message);
},
});
if (gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)) {
expect(() => {
expect(Scheduler).toFlushAndYield([
'Hydration failed because the initial UI does not match what was rendered on the server.',
'There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.',
]);
}).toErrorDev(
[
'Expected server HTML to contain a matching <p> in <div>.',
'An error occurred during hydration. The server HTML was replaced with client content in <div>.',
],
{withoutStack: 1},
);
} else {
// This used to not warn.
expect(Scheduler).toFlushAndYield([]);
}
expect(() => {
expect(Scheduler).toFlushAndYield([
'Hydration failed because the initial UI does not match what was rendered on the server.',
'There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.',
]);
}).toErrorDev(
[
'Expected server HTML to contain a matching <p> in <div>.',
'An error occurred during hydration. The server HTML was replaced with client content in <div>.',
],
{withoutStack: 1},
);
expect(getVisibleChildren(container)).toEqual(
<div>
<p>Client and server</p>
Expand Down Expand Up @@ -679,23 +649,18 @@ describe('ReactDOMFizzServerHydrationWarning', () => {
Scheduler.unstable_yieldValue(error.message);
},
});
if (gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)) {
expect(() => {
expect(Scheduler).toFlushAndYield([
'Hydration failed because the initial UI does not match what was rendered on the server.',
'There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.',
]);
}).toErrorDev(
[
'Did not expect server HTML to contain a <p> in <div>.',
'An error occurred during hydration. The server HTML was replaced with client content in <div>.',
],
{withoutStack: 1},
);
} else {
// This used to not warn.
expect(Scheduler).toFlushAndYield([]);
}
expect(() => {
expect(Scheduler).toFlushAndYield([
'Hydration failed because the initial UI does not match what was rendered on the server.',
'There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.',
]);
}).toErrorDev(
[
'Did not expect server HTML to contain a <p> in <div>.',
'An error occurred during hydration. The server HTML was replaced with client content in <div>.',
],
{withoutStack: 1},
);
expect(getVisibleChildren(container)).toEqual(
<div>
<p>Client and server</p>
Expand Down
Loading

0 comments on commit 0dc4e66

Please sign in to comment.