Skip to content

Commit

Permalink
New warnings are from enableClientRenderFallbackOnTextMismatch
Browse files Browse the repository at this point in the history
  • Loading branch information
Sebastian Silbermann committed Feb 26, 2024
1 parent ab6a13e commit d8bb04e
Showing 1 changed file with 34 additions and 15 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -123,6 +123,9 @@ describe('ReactDOMServerHydration', () => {
// Now simulate a situation where the app is not idempotent. React should
// warn but do the right thing.
element.innerHTML = lastMarkup;
const enableClientRenderFallbackOnTextMismatch = gate(
flags => flags.enableClientRenderFallbackOnTextMismatch,
);
await expect(async () => {
root = await act(() => {
return ReactDOMClient.hydrateRoot(
Expand All @@ -139,11 +142,13 @@ describe('ReactDOMServerHydration', () => {
);
});
}).toErrorDev(
[
'Text content did not match. Server: "x" Client: "y"',
'An error occurred during hydration. The server HTML was replaced with client content in <div>.',
],
{withoutStack: 1},
enableClientRenderFallbackOnTextMismatch
? [
'An error occurred during hydration. The server HTML was replaced with client content in <div>.',
'Text content did not match. Server: "x" Client: "y"',
]
: ['Text content did not match. Server: "x" Client: "y"'],
{withoutStack: enableClientRenderFallbackOnTextMismatch ? 1 : 0},
);
expect(mountCount).toEqual(4);
expect(element.innerHTML.length > 0).toBe(true);
Expand Down Expand Up @@ -213,6 +218,9 @@ describe('ReactDOMServerHydration', () => {
const onFocusAfterHydration = jest.fn();
element.firstChild.focus = onFocusBeforeHydration;

const enableClientRenderFallbackOnTextMismatch = gate(
flags => flags.enableClientRenderFallbackOnTextMismatch,
);
await expect(async () => {
await act(() => {
ReactDOMClient.hydrateRoot(
Expand All @@ -224,11 +232,15 @@ describe('ReactDOMServerHydration', () => {
);
});
}).toErrorDev(
[
'An error occurred during hydration. The server HTML was replaced with client content in <div>.',
'Warning: Text content did not match. Server: "server" Client: "client"',
],
{withoutStack: 1},
enableClientRenderFallbackOnTextMismatch
? [
'An error occurred during hydration. The server HTML was replaced with client content in <div>.',
'Warning: Text content did not match. Server: "server" Client: "client"',
]
: [
'Warning: Text content did not match. Server: "server" Client: "client"',
],
{withoutStack: enableClientRenderFallbackOnTextMismatch ? 1 : 0},
);

expect(onFocusBeforeHydration).not.toHaveBeenCalled();
Expand Down Expand Up @@ -583,6 +595,9 @@ describe('ReactDOMServerHydration', () => {
);
domElement.innerHTML = markup;

const enableClientRenderFallbackOnTextMismatch = gate(
flags => flags.enableClientRenderFallbackOnTextMismatch,
);
await expect(async () => {
await act(() => {
ReactDOMClient.hydrateRoot(
Expand All @@ -596,11 +611,15 @@ describe('ReactDOMServerHydration', () => {

expect(domElement.innerHTML).not.toEqual(markup);
}).toErrorDev(
[
'An error occurred during hydration. The server HTML was replaced with client content in <div>.',
'Warning: Text content did not match. Server: "server" Client: "client"',
],
{withoutStack: 1},
enableClientRenderFallbackOnTextMismatch
? [
'An error occurred during hydration. The server HTML was replaced with client content in <div>.',
'Warning: Text content did not match. Server: "server" Client: "client"',
]
: [
'Warning: Text content did not match. Server: "server" Client: "client"',
],
{withoutStack: enableClientRenderFallbackOnTextMismatch ? 1 : 0},
);
});

Expand Down

0 comments on commit d8bb04e

Please sign in to comment.