diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js index 2b9c77c08ba94..180af00121538 100644 --- a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js @@ -4610,7 +4610,6 @@ describe('ReactDOMFizzServer', () => { ); }); - // @gate favorSafetyOverHydrationPerf it('#24384: Suspending should halt hydration warnings but still emit hydration warnings after unsuspending if mismatches are genuine', async () => { const makeApp = () => { let resolve, resolved; @@ -4694,7 +4693,6 @@ describe('ReactDOMFizzServer', () => { await waitForAll([]); }); - // @gate favorSafetyOverHydrationPerf it('only warns once on hydration mismatch while within a suspense boundary', async () => { const App = ({text}) => { return ( @@ -10202,75 +10200,19 @@ describe('ReactDOMFizzServer', () => { }, }); await waitForAll([]); - if (gate(flags => flags.favorSafetyOverHydrationPerf)) { - expect(getVisibleChildren(document)).toEqual( - - - - - client - , - ); - expect(recoverableErrors).toEqual([ - expect.stringContaining( - "Hydration failed because the server rendered text didn't match the client.", - ), - ]); - } else { - expect(getVisibleChildren(document)).toEqual( - - - - - server - , - ); - expect(recoverableErrors).toEqual([]); - assertConsoleErrorDev([ - "A tree hydrated but some attributes of the server rendered HTML didn't match the client properties. This won't be patched up. This can happen if a SSR-ed Client Component used:" + - '\n' + - "\n- A server/client branch `if (typeof window !== 'undefined')`." + - "\n- Variable input such as `Date.now()` or `Math.random()` which changes each time it's called." + - "\n- Date formatting in a user's locale which doesn't match the server." + - '\n- External changing data without sending a snapshot of it along with the HTML.' + - '\n- Invalid HTML tag nesting.' + - '\n' + - '\nIt can also happen if the client has a browser extension installed which messes with the HTML before React loaded.' + - '\n' + - '\nhttps://react.dev/link/hydration-mismatch' + - '\n' + - '\n ' + - '\n ' + - '\n ' + - '\n ' + - '\n ' + - '\n ' + - '\n+ client' + - '\n- server' + - '\n+ client' + - '\n- server' + - '\n' + - '\n in meta (at **)' + - '\n in ClientApp (at **)', - ]); - } + expect(getVisibleChildren(document)).toEqual( + + + + + client + , + ); + expect(recoverableErrors).toEqual([ + expect.stringContaining( + "Hydration failed because the server rendered text didn't match the client.", + ), + ]); root.unmount(); expect(getVisibleChildren(document)).toEqual( diff --git a/packages/react-dom/src/__tests__/ReactDOMFloat-test.js b/packages/react-dom/src/__tests__/ReactDOMFloat-test.js index a28d492b1cf83..848fdd6521960 100644 --- a/packages/react-dom/src/__tests__/ReactDOMFloat-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMFloat-test.js @@ -7391,7 +7391,6 @@ body { ); }); - // @gate favorSafetyOverHydrationPerf it('retains styles even when a new html, head, and/body mount', async () => { await act(() => { const {pipe} = renderToPipeableStream( @@ -9358,7 +9357,6 @@ background-color: green; ]); }); - // @gate favorSafetyOverHydrationPerf it('can render a title before a singleton even if that singleton clears its contents', async () => { await act(() => { const {pipe} = renderToPipeableStream( diff --git a/packages/react-dom/src/__tests__/ReactDOMHydrationDiff-test.js b/packages/react-dom/src/__tests__/ReactDOMHydrationDiff-test.js index 8b0bb44ccf4bc..92da0bc12306c 100644 --- a/packages/react-dom/src/__tests__/ReactDOMHydrationDiff-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMHydrationDiff-test.js @@ -124,8 +124,7 @@ describe('ReactDOMServerHydration', () => { ); } - if (gate(flags => flags.favorSafetyOverHydrationPerf)) { - expect(testMismatch(Mismatch)).toMatchInlineSnapshot(` + expect(testMismatch(Mismatch)).toMatchInlineSnapshot(` [ "Caught [Hydration failed because the server rendered text 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: @@ -150,33 +149,6 @@ describe('ReactDOMServerHydration', () => { in Mismatch (at **)", ] `); - } else { - expect(testMismatch(Mismatch)).toMatchInlineSnapshot(` - [ - "A tree hydrated but some attributes of the server rendered HTML didn't match the client properties. This won't be patched up. 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 - - -
-
- + client - - server - - Owner Stack: - in main (at **) - in Mismatch (at **)", - ] - `); - } }); // @gate __DEV__ @@ -193,8 +165,7 @@ describe('ReactDOMServerHydration', () => { } /* eslint-disable no-irregular-whitespace */ - if (gate(flags => flags.favorSafetyOverHydrationPerf)) { - expect(testMismatch(Mismatch)).toMatchInlineSnapshot(` + expect(testMismatch(Mismatch)).toMatchInlineSnapshot(` [ "Caught [Hydration failed because the server rendered text 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: @@ -218,32 +189,6 @@ describe('ReactDOMServerHydration', () => { in Mismatch (at **)", ] `); - } else { - expect(testMismatch(Mismatch)).toMatchInlineSnapshot(` - [ - "A tree hydrated but some attributes of the server rendered HTML didn't match the client properties. This won't be patched up. 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 - - -
- + This markup contains an nbsp entity:   client text - - This markup contains an nbsp entity:   server text - - Owner Stack: - in div (at **) - in Mismatch (at **)", - ] - `); - } /* eslint-enable no-irregular-whitespace */ }); @@ -740,8 +685,7 @@ describe('ReactDOMServerHydration', () => { function Mismatch({isClient}) { return
{isClient && 'only'}
; } - if (gate(flags => flags.favorSafetyOverHydrationPerf)) { - expect(testMismatch(Mismatch)).toMatchInlineSnapshot(` + expect(testMismatch(Mismatch)).toMatchInlineSnapshot(` [ "Caught [Hydration failed because the server rendered text 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: @@ -765,32 +709,6 @@ describe('ReactDOMServerHydration', () => { in Mismatch (at **)", ] `); - } else { - expect(testMismatch(Mismatch)).toMatchInlineSnapshot(` - [ - "A tree hydrated but some attributes of the server rendered HTML didn't match the client properties. This won't be patched up. 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 - - - - Owner Stack: - in div (at **) - in Mismatch (at **)", - ] - `); - } }); // @gate __DEV__ diff --git a/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js index 5b719ddf4acc5..b865b6afd784f 100644 --- a/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js +++ b/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js @@ -3913,7 +3913,6 @@ describe('ReactDOMServerPartialHydration', () => { ); }); - // @gate favorSafetyOverHydrationPerf it("falls back to client rendering when there's a text mismatch (direct text child)", async () => { function DirectTextChild({text}) { return
{text}
; @@ -3937,7 +3936,6 @@ describe('ReactDOMServerPartialHydration', () => { ]); }); - // @gate favorSafetyOverHydrationPerf it("falls back to client rendering when there's a text mismatch (text child with siblings)", async () => { function Sibling() { return 'Sibling'; diff --git a/packages/react-dom/src/__tests__/ReactDOMUseId-test.js b/packages/react-dom/src/__tests__/ReactDOMUseId-test.js index 0654e8c6e6851..08c48d5f0d7cd 100644 --- a/packages/react-dom/src/__tests__/ReactDOMUseId-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMUseId-test.js @@ -24,7 +24,6 @@ let hasErrored = false; let fatalError = undefined; let waitForPaint; let SuspenseList; -let assertConsoleErrorDev; describe('useId', () => { beforeEach(() => { @@ -33,8 +32,6 @@ describe('useId', () => { React = require('react'); ReactDOMClient = require('react-dom/client'); clientAct = require('internal-test-utils').act; - assertConsoleErrorDev = - require('internal-test-utils').assertConsoleErrorDev; ReactDOMFizzServer = require('react-dom/server'); Stream = require('stream'); Suspense = React.Suspense; @@ -667,82 +664,31 @@ describe('useId', () => {
`); - if (gate(flags => flags.favorSafetyOverHydrationPerf)) { - // TODO: This is a bug with revealOrder="backwards" in that it hydrates in reverse. - await expect(async () => { - await clientAct(async () => { - ReactDOMClient.hydrateRoot(container, ); - }); - }).rejects.toThrowError( - `Hydration failed because the server rendered text didn't match the client. As a result this tree will be regenerated on the client.`, - ); - - expect(container).toMatchInlineSnapshot(` -
- - A - - - B - -
- `); - } else { + // TODO: This is a bug with revealOrder="backwards" in that it hydrates in reverse. + await expect(async () => { await clientAct(async () => { ReactDOMClient.hydrateRoot(container, ); }); + }).rejects.toThrowError( + `Hydration failed because the server rendered text didn't match the client. As a result this tree will be regenerated on the client.`, + ); - // TODO: This is a bug with revealOrder="backwards" in that it hydrates in reverse. - assertConsoleErrorDev([ - `A tree hydrated but some attributes of the server rendered HTML didn't match the client properties. This won't be patched up. 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 - - - - - - - -+ B -- A -`, - ]); - - expect(container).toMatchInlineSnapshot(` + expect(container).toMatchInlineSnapshot(`
A B
`); - } }); it('basic incremental hydration', async () => { diff --git a/packages/react-dom/src/__tests__/ReactRenderDocument-test.js b/packages/react-dom/src/__tests__/ReactRenderDocument-test.js index f53354073eae8..583643449f78f 100644 --- a/packages/react-dom/src/__tests__/ReactRenderDocument-test.js +++ b/packages/react-dom/src/__tests__/ReactRenderDocument-test.js @@ -16,7 +16,6 @@ let ReactDOMServer; let act; let Scheduler; let assertLog; -let assertConsoleErrorDev; function getTestDocument(markup) { const doc = document.implementation.createHTMLDocument(''); @@ -49,8 +48,6 @@ describe('rendering React components at document', () => { act = require('internal-test-utils').act; assertLog = require('internal-test-utils').assertLog; Scheduler = require('scheduler'); - assertConsoleErrorDev = - require('internal-test-utils').assertConsoleErrorDev; }); describe('with new explicit hydration API', () => { @@ -270,9 +267,6 @@ describe('rendering React components at document', () => { ); const testDocument = getTestDocument(markup); - const favorSafetyOverHydrationPerf = gate( - flags => flags.favorSafetyOverHydrationPerf, - ); ReactDOM.flushSync(() => { ReactDOMClient.hydrateRoot( testDocument, @@ -289,45 +283,11 @@ describe('rendering React components at document', () => { }, ); }); - assertConsoleErrorDev( - favorSafetyOverHydrationPerf - ? [] - : [ - "A tree hydrated but some attributes of the server rendered HTML didn't match the client properties. " + - "This won't be patched up. This can happen if a SSR-ed Client Component used:\n" + - '\n' + - "- A server/client branch `if (typeof window !== 'undefined')`.\n" + - "- Variable input such as `Date.now()` or `Math.random()` which changes each time it's called.\n" + - "- Date formatting in a user's locale which doesn't match the server.\n" + - '- External changing data without sending a snapshot of it along with the HTML.\n' + - '- Invalid HTML tag nesting.\n\nIt can also happen if the client has a browser extension ' + - 'installed which messes with the HTML before React loaded.\n' + - '\n' + - 'https://react.dev/link/hydration-mismatch\n' + - '\n' + - ' \n' + - ' \n' + - ' \n' + - ' \n' + - '+ Hello world\n' + - '- Goodbye world\n' + - '+ Hello world\n' + - '- Goodbye world\n' + - '\n in body (at **)' + - '\n in Component (at **)', - ], - ); - assertLog( - favorSafetyOverHydrationPerf - ? [ - "onRecoverableError: Hydration failed because the server rendered text didn't match the client.", - ] - : [], - ); - expect(testDocument.body.innerHTML).toBe( - favorSafetyOverHydrationPerf ? 'Hello world' : 'Goodbye world', - ); + assertLog([ + "onRecoverableError: Hydration failed because the server rendered text didn't match the client.", + ]); + expect(testDocument.body.innerHTML).toBe('Hello world'); }); it('should render w/ no markup to full document', async () => { diff --git a/packages/react-dom/src/__tests__/ReactServerRenderingHydration-test.js b/packages/react-dom/src/__tests__/ReactServerRenderingHydration-test.js index e8435bd1ce8f3..5ea0ceeac4545 100644 --- a/packages/react-dom/src/__tests__/ReactServerRenderingHydration-test.js +++ b/packages/react-dom/src/__tests__/ReactServerRenderingHydration-test.js @@ -127,9 +127,6 @@ describe('ReactDOMServerHydration', () => { // Now simulate a situation where the app is not idempotent. React should // warn but do the right thing. element.innerHTML = lastMarkup; - const favorSafetyOverHydrationPerf = gate( - flags => flags.favorSafetyOverHydrationPerf, - ); root = await act(() => { return ReactDOMClient.hydrateRoot( element, @@ -144,37 +141,10 @@ describe('ReactDOMServerHydration', () => { }, ); }); - assertConsoleErrorDev( - favorSafetyOverHydrationPerf - ? [] - : [ - "A tree hydrated but some attributes of the server rendered HTML didn't match the client properties. " + - "This won't be patched up. This can happen if a SSR-ed Client Component used:\n" + - '\n' + - "- A server/client branch `if (typeof window !== 'undefined')`.\n" + - "- Variable input such as `Date.now()` or `Math.random()` which changes each time it's called.\n" + - "- Date formatting in a user's locale which doesn't match the server.\n" + - '- External changing data without sending a snapshot of it along with the HTML.\n' + - '- Invalid HTML tag nesting.\n\nIt can also happen if the client has a browser extension ' + - 'installed which messes with the HTML before React loaded.\n' + - '\n' + - 'https://react.dev/link/hydration-mismatch\n' + - '\n' + - ' \n' + - ' \n' + - '+ y\n' + - '- x\n' + - '\n in span (at **)' + - '\n in TestComponent (at **)', - ], - ); + expect(mountCount).toEqual(4); expect(element.innerHTML.length > 0).toBe(true); - if (favorSafetyOverHydrationPerf) { - expect(element.innerHTML).not.toEqual(lastMarkup); - } else { - expect(element.innerHTML).toEqual(lastMarkup); - } + expect(element.innerHTML).not.toEqual(lastMarkup); // Ensure the events system works after markup mismatch. expect(numClicks).toEqual(1); @@ -240,9 +210,6 @@ describe('ReactDOMServerHydration', () => { const onFocusAfterHydration = jest.fn(); element.firstChild.focus = onFocusBeforeHydration; - const favorSafetyOverHydrationPerf = gate( - flags => flags.favorSafetyOverHydrationPerf, - ); await act(() => { ReactDOMClient.hydrateRoot( element, @@ -252,28 +219,6 @@ describe('ReactDOMServerHydration', () => { {onRecoverableError: error => {}}, ); }); - assertConsoleErrorDev( - favorSafetyOverHydrationPerf - ? [] - : [ - "A tree hydrated but some attributes of the server rendered HTML didn't match the client properties. " + - "This won't be patched up. This can happen if a SSR-ed Client Component used:\n" + - '\n' + - "- A server/client branch `if (typeof window !== 'undefined')`.\n" + - "- Variable input such as `Date.now()` or `Math.random()` which changes each time it's called.\n" + - "- Date formatting in a user's locale which doesn't match the server.\n" + - '- External changing data without sending a snapshot of it along with the HTML.\n' + - '- Invalid HTML tag nesting.\n\nIt can also happen if the client has a browser extension ' + - 'installed which messes with the HTML before React loaded.\n' + - '\n' + - 'https://react.dev/link/hydration-mismatch\n' + - '\n' + - '