diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
index 5eea362a3e8..229f72e34fb 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
@@ -2406,19 +2406,12 @@ describe('ReactDOMFizzServer', () => {
},
});
- await expect(async () => {
- // The first paint switches to client rendering due to mismatch
- await waitForPaint([
- 'client',
- "Log recoverable error: Hydration failed because the server rendered HTML didn't match the client.",
- 'Log recoverable error: There was an error while hydrating.',
- ]);
- }).toErrorDev(
- [
- 'Warning: An error occurred during hydration. The server HTML was replaced with client content.',
- ],
- {withoutStack: 1},
- );
+ // The first paint switches to client rendering due to mismatch
+ await waitForPaint([
+ 'client',
+ "Log recoverable error: Hydration failed because the server rendered HTML didn't match the client.",
+ 'Log recoverable error: There was an error while hydrating.',
+ ]);
expect(getVisibleChildren(container)).toEqual(
client
);
});
@@ -2486,19 +2479,12 @@ describe('ReactDOMFizzServer', () => {
});
// The first paint uses the client due to mismatch forcing client render
- await expect(async () => {
- // The first paint switches to client rendering due to mismatch
- await waitForPaint([
- 'client',
- "Log recoverable error: Hydration failed because the server rendered HTML didn't match the client.",
- 'Log recoverable error: There was an error while hydrating.',
- ]);
- }).toErrorDev(
- [
- 'Warning: An error occurred during hydration. The server HTML was replaced with client content',
- ],
- {withoutStack: 1},
- );
+ // The first paint switches to client rendering due to mismatch
+ await waitForPaint([
+ 'client',
+ "Log recoverable error: Hydration failed because the server rendered HTML didn't match the client.",
+ 'Log recoverable error: There was an error while hydrating.',
+ ]);
expect(getVisibleChildren(container)).toEqual(
client
);
});
@@ -2564,16 +2550,11 @@ describe('ReactDOMFizzServer', () => {
// An error logged but instead of surfacing it to the UI, we switched
// to client rendering.
- await expect(async () => {
- await waitForAll([
- 'Yay!',
- 'Hydration error',
- 'There was an error while hydrating.',
- ]);
- }).toErrorDev(
- 'An error occurred during hydration. The server HTML was replaced',
- {withoutStack: true},
- );
+ await waitForAll([
+ 'Yay!',
+ 'Hydration error',
+ 'There was an error while hydrating.',
+ ]);
expect(getVisibleChildren(container)).toEqual(Yay!);
// The node that's inside the boundary that errored during hydration was
@@ -6339,9 +6320,7 @@ describe('ReactDOMFizzServer', () => {
errors.push(error);
},
});
- await expect(async () => {
- await waitForAll([]);
- }).toErrorDev(['An error occurred during hydration'], {withoutStack: 1});
+ await waitForAll([]);
expect(errors.length).toEqual(2);
expect(getVisibleChildren(container)).toEqual();
});
diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzSuppressHydrationWarning-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzSuppressHydrationWarning-test.js
index 36c3d4f804d..7a584d1797d 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzSuppressHydrationWarning-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzSuppressHydrationWarning-test.js
@@ -249,17 +249,10 @@ describe('ReactDOMFizzServerHydrationWarning', () => {
Scheduler.log(normalizeError(error.message));
},
});
- await expect(async () => {
- await waitForAll([
- "Hydration failed because the server rendered HTML didn't match the client.",
- 'There was an error while hydrating.',
- ]);
- }).toErrorDev(
- [
- 'An error occurred during hydration. The server HTML was replaced with client content.',
- ],
- {withoutStack: 1},
- );
+ await waitForAll([
+ "Hydration failed because the server rendered HTML didn't match the client.",
+ 'There was an error while hydrating.',
+ ]);
expect(getVisibleChildren(container)).toEqual(
@@ -337,17 +330,10 @@ describe('ReactDOMFizzServerHydrationWarning', () => {
Scheduler.log(normalizeError(error.message));
},
});
- await expect(async () => {
- await waitForAll([
- "Hydration failed because the server rendered HTML didn't match the client.",
- 'There was an error while hydrating.',
- ]);
- }).toErrorDev(
- [
- 'An error occurred during hydration. The server HTML was replaced with client content.',
- ],
- {withoutStack: 1},
- );
+ await waitForAll([
+ "Hydration failed because the server rendered HTML didn't match the client.",
+ 'There was an error while hydrating.',
+ ]);
expect(getVisibleChildren(container)).toEqual(
@@ -384,17 +370,10 @@ describe('ReactDOMFizzServerHydrationWarning', () => {
Scheduler.log(normalizeError(error.message));
},
});
- await expect(async () => {
- await waitForAll([
- "Hydration failed because the server rendered HTML didn't match the client.",
- 'There was an error while hydrating.',
- ]);
- }).toErrorDev(
- [
- 'An error occurred during hydration. The server HTML was replaced with client content.',
- ],
- {withoutStack: 1},
- );
+ await waitForAll([
+ "Hydration failed because the server rendered HTML didn't match the client.",
+ 'There was an error while hydrating.',
+ ]);
expect(getVisibleChildren(container)).toEqual(
@@ -434,17 +413,10 @@ describe('ReactDOMFizzServerHydrationWarning', () => {
Scheduler.log(normalizeError(error.message));
},
});
- await expect(async () => {
- await waitForAll([
- "Hydration failed because the server rendered HTML didn't match the client.",
- 'There was an error while hydrating.',
- ]);
- }).toErrorDev(
- [
- 'An error occurred during hydration. The server HTML was replaced with client content.',
- ],
- {withoutStack: 1},
- );
+ await waitForAll([
+ "Hydration failed because the server rendered HTML didn't match the client.",
+ 'There was an error while hydrating.',
+ ]);
expect(getVisibleChildren(container)).toEqual(
@@ -482,17 +454,10 @@ describe('ReactDOMFizzServerHydrationWarning', () => {
Scheduler.log(normalizeError(error.message));
},
});
- await expect(async () => {
- await waitForAll([
- "Hydration failed because the server rendered HTML didn't match the client.",
- 'There was an error while hydrating.',
- ]);
- }).toErrorDev(
- [
- 'An error occurred during hydration. The server HTML was replaced with client content.',
- ],
- {withoutStack: 1},
- );
+ await waitForAll([
+ "Hydration failed because the server rendered HTML didn't match the client.",
+ 'There was an error while hydrating.',
+ ]);
expect(getVisibleChildren(container)).toEqual(
@@ -604,17 +569,10 @@ describe('ReactDOMFizzServerHydrationWarning', () => {
Scheduler.log(normalizeError(error.message));
},
});
- await expect(async () => {
- await waitForAll([
- "Hydration failed because the server rendered HTML didn't match the client.",
- 'There was an error while hydrating.',
- ]);
- }).toErrorDev(
- [
- 'An error occurred during hydration. The server HTML was replaced with client content.',
- ],
- {withoutStack: 1},
- );
+ await waitForAll([
+ "Hydration failed because the server rendered HTML didn't match the client.",
+ 'There was an error while hydrating.',
+ ]);
expect(getVisibleChildren(container)).toEqual(
Client and server
@@ -649,17 +607,10 @@ describe('ReactDOMFizzServerHydrationWarning', () => {
Scheduler.log(normalizeError(error.message));
},
});
- await expect(async () => {
- await waitForAll([
- "Hydration failed because the server rendered HTML didn't match the client.",
- 'There was an error while hydrating.',
- ]);
- }).toErrorDev(
- [
- 'An error occurred during hydration. The server HTML was replaced with client content.',
- ],
- {withoutStack: 1},
- );
+ await waitForAll([
+ "Hydration failed because the server rendered HTML didn't match the client.",
+ 'There was an error while hydrating.',
+ ]);
expect(getVisibleChildren(container)).toEqual(
Client and server
diff --git a/packages/react-dom/src/__tests__/ReactDOMFloat-test.js b/packages/react-dom/src/__tests__/ReactDOMFloat-test.js
index b0ea66c592a..741e2390c50 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFloat-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFloat-test.js
@@ -6477,14 +6477,7 @@ body {
},
},
);
- await expect(async () => {
- await waitForAll([]);
- }).toErrorDev(
- [
- 'Warning: An error occurred during hydration. The server HTML was replaced with client content.',
- ],
- {withoutStack: 1},
- );
+ await waitForAll([]);
expect(getMeaningfulChildren(document)).toEqual(
@@ -8267,14 +8260,7 @@ background-color: green;
},
);
- await expect(async () => {
- await waitForAll([]);
- }).toErrorDev(
- [
- 'Warning: An error occurred during hydration. The server HTML was replaced with client content.',
- ],
- {withoutStack: 1},
- );
+ await waitForAll([]);
expect(getMeaningfulChildren(document)).toEqual(
diff --git a/packages/react-dom/src/__tests__/ReactDOMHydrationDiff-test.js b/packages/react-dom/src/__tests__/ReactDOMHydrationDiff-test.js
index 526096966c9..b973f85211a 100644
--- a/packages/react-dom/src/__tests__/ReactDOMHydrationDiff-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMHydrationDiff-test.js
@@ -89,7 +89,6 @@ describe('ReactDOMServerHydration', () => {
if (gate(flags => flags.favorSafetyOverHydrationPerf)) {
expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
[
- "Warning: An error occurred during hydration. The server HTML was replaced with client content.",
"Caught [Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:
- A server/client branch \`if (typeof window !== 'undefined')\`.
@@ -154,7 +153,6 @@ describe('ReactDOMServerHydration', () => {
if (gate(flags => flags.favorSafetyOverHydrationPerf)) {
expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
[
- "Warning: An error occurred during hydration. The server HTML was replaced with client content.",
"Caught [Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:
- A server/client branch \`if (typeof window !== 'undefined')\`.
@@ -463,7 +461,6 @@ describe('ReactDOMServerHydration', () => {
}
expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
[
- "Warning: An error occurred during hydration. The server HTML was replaced with client content.",
"Caught [Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:
- A server/client branch \`if (typeof window !== 'undefined')\`.
@@ -498,7 +495,6 @@ describe('ReactDOMServerHydration', () => {
}
expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
[
- "Warning: An error occurred during hydration. The server HTML was replaced with client content.",
"Caught [Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:
- A server/client branch \`if (typeof window !== 'undefined')\`.
@@ -535,7 +531,6 @@ describe('ReactDOMServerHydration', () => {
}
expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
[
- "Warning: An error occurred during hydration. The server HTML was replaced with client content.",
"Caught [Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:
- A server/client branch \`if (typeof window !== 'undefined')\`.
@@ -573,7 +568,6 @@ describe('ReactDOMServerHydration', () => {
}
expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
[
- "Warning: An error occurred during hydration. The server HTML was replaced with client content.",
"Caught [Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:
- A server/client branch \`if (typeof window !== 'undefined')\`.
@@ -606,28 +600,27 @@ describe('ReactDOMServerHydration', () => {
}
if (gate(flags => flags.favorSafetyOverHydrationPerf)) {
expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
- [
- "Warning: An error occurred during hydration. The server HTML was replaced with client content.",
- "Caught [Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:
-
- - A server/client branch \`if (typeof window !== 'undefined')\`.
- - Variable input such as \`Date.now()\` or \`Math.random()\` which changes each time it's called.
- - Date formatting in a user's locale which doesn't match the server.
- - External changing data without sending a snapshot of it along with the HTML.
- - Invalid HTML tag nesting.
-
- It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.
-
- https://react.dev/link/hydration-mismatch
-
-
-
- + only
- -
- ]",
- "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
- ]
- `);
+ [
+ "Caught [Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:
+
+ - A server/client branch \`if (typeof window !== 'undefined')\`.
+ - Variable input such as \`Date.now()\` or \`Math.random()\` which changes each time it's called.
+ - Date formatting in a user's locale which doesn't match the server.
+ - External changing data without sending a snapshot of it along with the HTML.
+ - Invalid HTML tag nesting.
+
+ It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.
+
+ https://react.dev/link/hydration-mismatch
+
+
+
+ + only
+ -
+ ]",
+ "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
+ ]
+ `);
} else {
expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
[
@@ -666,7 +659,6 @@ describe('ReactDOMServerHydration', () => {
}
expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
[
- "Warning: An error occurred during hydration. The server HTML was replaced with client content.",
"Caught [Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:
- A server/client branch \`if (typeof window !== 'undefined')\`.
@@ -704,7 +696,6 @@ describe('ReactDOMServerHydration', () => {
}
expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
[
- "Warning: An error occurred during hydration. The server HTML was replaced with client content.",
"Caught [Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:
- A server/client branch \`if (typeof window !== 'undefined')\`.
@@ -741,7 +732,6 @@ describe('ReactDOMServerHydration', () => {
}
expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
[
- "Warning: An error occurred during hydration. The server HTML was replaced with client content.",
"Caught [Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:
- A server/client branch \`if (typeof window !== 'undefined')\`.
@@ -780,7 +770,6 @@ describe('ReactDOMServerHydration', () => {
}
expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
[
- "Warning: An error occurred during hydration. The server HTML was replaced with client content.",
"Caught [Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:
- A server/client branch \`if (typeof window !== 'undefined')\`.
@@ -815,7 +804,6 @@ describe('ReactDOMServerHydration', () => {
}
expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
[
- "Warning: An error occurred during hydration. The server HTML was replaced with client content.",
"Caught [Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:
- A server/client branch \`if (typeof window !== 'undefined')\`.
@@ -852,7 +840,6 @@ describe('ReactDOMServerHydration', () => {
}
expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
[
- "Warning: An error occurred during hydration. The server HTML was replaced with client content.",
"Caught [Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:
- A server/client branch \`if (typeof window !== 'undefined')\`.
@@ -889,7 +876,6 @@ describe('ReactDOMServerHydration', () => {
}
expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
[
- "Warning: An error occurred during hydration. The server HTML was replaced with client content.",
"Caught [Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:
- A server/client branch \`if (typeof window !== 'undefined')\`.
@@ -920,7 +906,6 @@ describe('ReactDOMServerHydration', () => {
}
expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
[
- "Warning: An error occurred during hydration. The server HTML was replaced with client content.",
"Caught [Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:
- A server/client branch \`if (typeof window !== 'undefined')\`.
@@ -955,7 +940,6 @@ describe('ReactDOMServerHydration', () => {
}
expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
[
- "Warning: An error occurred during hydration. The server HTML was replaced with client content.",
"Caught [Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:
- A server/client branch \`if (typeof window !== 'undefined')\`.
@@ -992,7 +976,6 @@ describe('ReactDOMServerHydration', () => {
}
expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
[
- "Warning: An error occurred during hydration. The server HTML was replaced with client content.",
"Caught [Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:
- A server/client branch \`if (typeof window !== 'undefined')\`.
@@ -1029,7 +1012,6 @@ describe('ReactDOMServerHydration', () => {
}
expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
[
- "Warning: An error occurred during hydration. The server HTML was replaced with client content.",
"Caught [Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:
- A server/client branch \`if (typeof window !== 'undefined')\`.
@@ -1074,7 +1056,6 @@ describe('ReactDOMServerHydration', () => {
}
expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
[
- "Warning: An error occurred during hydration. The server HTML was replaced with client content.",
"Caught [Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:
- A server/client branch \`if (typeof window !== 'undefined')\`.
@@ -1111,7 +1092,6 @@ describe('ReactDOMServerHydration', () => {
}
expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
[
- "Warning: An error occurred during hydration. The server HTML was replaced with client content.",
"Caught [Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:
- A server/client branch \`if (typeof window !== 'undefined')\`.
@@ -1150,7 +1130,6 @@ describe('ReactDOMServerHydration', () => {
// TODO: This message doesn't seem to have any useful details.
expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
[
- "Warning: An error occurred during hydration. The server HTML was replaced with client content.",
"Caught [Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:
- A server/client branch \`if (typeof window !== 'undefined')\`.
@@ -1193,7 +1172,6 @@ describe('ReactDOMServerHydration', () => {
// rendered suspense boundaries this test will likely change again
expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
[
- "Warning: An error occurred during hydration. The server HTML was replaced with client content.",
"Caught [Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:
- A server/client branch \`if (typeof window !== 'undefined')\`.
@@ -1365,7 +1343,6 @@ describe('ReactDOMServerHydration', () => {
}
expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
[
- "Warning: An error occurred during hydration. The server HTML was replaced with client content.",
"Caught [Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:
- A server/client branch \`if (typeof window !== 'undefined')\`.
@@ -1405,7 +1382,6 @@ describe('ReactDOMServerHydration', () => {
}
expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
[
- "Warning: An error occurred during hydration. The server HTML was replaced with client content.",
"Caught [Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:
- A server/client branch \`if (typeof window !== 'undefined')\`.
@@ -1468,7 +1444,6 @@ describe('ReactDOMServerHydration', () => {
expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
[
- "Warning: An error occurred during hydration. The server HTML was replaced with client content.",
"Caught [Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:
- A server/client branch \`if (typeof window !== 'undefined')\`.
@@ -1531,7 +1506,6 @@ describe('ReactDOMServerHydration', () => {
expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
[
- "Warning: An error occurred during hydration. The server HTML was replaced with client content.",
"Caught [Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:
- A server/client branch \`if (typeof window !== 'undefined')\`.
diff --git a/packages/react-dom/src/__tests__/ReactDOMOption-test.js b/packages/react-dom/src/__tests__/ReactDOMOption-test.js
index d5225893acf..8743c5993dd 100644
--- a/packages/react-dom/src/__tests__/ReactDOMOption-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMOption-test.js
@@ -237,7 +237,7 @@ describe('ReactDOMOption', () => {
expect(node.selectedIndex).toEqual(2);
});
- it('generates a warning and hydration error when an invalid nested tag is used as a child', async () => {
+ it('generates a hydration error when an invalid nested tag is used as a child', async () => {
const ref = React.createRef();
const children = (