{"body":"Co-authored-by: Sebastian Silbermann ","commit":{"authorEmail":"rickhanlonii@gmail.com","subject":"Convert ReactRenderDocument to hydrateRoot (#28153)","authoredAt":"2024-02-07T09:54:46-05:00","shortRevision":"2cd19ed1dd","authorName":"Ricky","revision":"2cd19ed1dd86889bc8038fb8b541699e3965ea5c"},"parents":["bfdc12c1912143ae4ec6d7466e619130adc911c5"],"patch":"diff --git a\/packages\/react-dom\/src\/__tests__\/ReactRenderDocument-test.js b\/packages\/react-dom\/src\/__tests__\/ReactRenderDocument-test.js\nindex d918e27d3b..e828889995 100644\n--- a\/packages\/react-dom\/src\/__tests__\/ReactRenderDocument-test.js\n+++ b\/packages\/react-dom\/src\/__tests__\/ReactRenderDocument-test.js\n@@ -11,7 +11,11 @@\n \n let React;\n let ReactDOM;\n+let ReactDOMClient;\n let ReactDOMServer;\n+let act;\n+let Scheduler;\n+let assertLog;\n \n function getTestDocument(markup) {\n const doc = document.implementation.createHTMLDocument('');\n@@ -28,11 +32,15 @@ describe('rendering React components at document', () => {\n beforeEach(() => {\n React = require('react');\n ReactDOM = require('react-dom');\n+ ReactDOMClient = require('react-dom\/client');\n ReactDOMServer = require('react-dom\/server');\n+ act = require('internal-test-utils').act;\n+ assertLog = require('internal-test-utils').assertLog;\n+ Scheduler = require('scheduler');\n });\n \n describe('with new explicit hydration API', () => {\n- it('should be able to adopt server markup', () => {\n+ it('should be able to adopt server markup', async () => {\n class Root extends React.Component {\n render() {\n return (\n@@ -51,16 +59,21 @@ describe('rendering React components at document', () => {\n const testDocument = getTestDocument(markup);\n const body = testDocument.body;\n \n- ReactDOM.hydrate(, testDocument);\n+ let root;\n+ await act(() => {\n+ root = ReactDOMClient.hydrateRoot(testDocument, );\n+ });\n expect(testDocument.body.innerHTML).toBe('Hello world');\n \n- ReactDOM.hydrate(, testDocument);\n+ await act(() => {\n+ root.render();\n+ });\n expect(testDocument.body.innerHTML).toBe('Hello moon');\n \n expect(body === testDocument.body).toBe(true);\n });\n \n- it('should be able to unmount component from document node, but leaves singleton nodes intact', () => {\n+ it('should be able to unmount component from document node, but leaves singleton nodes intact', async () => {\n class Root extends React.Component {\n render() {\n return (\n@@ -76,7 +89,10 @@ describe('rendering React components at document', () => {\n \n const markup = ReactDOMServer.renderToString();\n const testDocument = getTestDocument(markup);\n- ReactDOM.hydrate(, testDocument);\n+ let root;\n+ await act(() => {\n+ root = ReactDOMClient.hydrateRoot(testDocument, );\n+ });\n expect(testDocument.body.innerHTML).toBe('Hello world');\n \n const originalDocEl = testDocument.documentElement;\n@@ -84,7 +100,7 @@ describe('rendering React components at document', () => {\n const originalBody = testDocument.body;\n \n \/\/ When we unmount everything is removed except the singleton nodes of html, head, and body\n- ReactDOM.unmountComponentAtNode(testDocument);\n+ root.unmount();\n expect(testDocument.firstChild).toBe(originalDocEl);\n expect(testDocument.head).toBe(originalHead);\n expect(testDocument.body).toBe(originalBody);\n@@ -92,7 +108,7 @@ describe('rendering React components at document', () => {\n expect(originalHead.firstChild).toEqual(null);\n });\n \n- it('should not be able to switch root constructors', () => {\n+ it('should not be able to switch root constructors', async () => {\n class Component extends React.Component {\n render() {\n return (\n@@ -122,17 +138,21 @@ describe('rendering React components at document', () => {\n const markup = ReactDOMServer.renderToString();\n const testDocument = getTestDocument(markup);\n \n- ReactDOM.hydrate(, testDocument);\n+ let root;\n+ await act(() => {\n+ root = ReactDOMClient.hydrateRoot(testDocument, );\n+ });\n \n expect(testDocument.body.innerHTML).toBe('Hello world');\n \n- \/\/ This works but is probably a bad idea.\n- ReactDOM.hydrate(, testDocument);\n+ await act(() => {\n+ root.render();\n+ });\n \n expect(testDocument.body.innerHTML).toBe('Goodbye world');\n });\n \n- it('should be able to mount into document', () => {\n+ it('should be able to mount into document', async () => {\n class Component extends React.Component {\n render() {\n return (\n@@ -151,40 +171,80 @@ describe('rendering React components at document', () => {\n );\n const testDocument = getTestDocument(markup);\n \n- ReactDOM.hydrate(, testDocument);\n+ await act(() => {\n+ ReactDOMClient.hydrateRoot(\n+ testDocument,\n+ ,\n+ );\n+ });\n \n expect(testDocument.body.innerHTML).toBe('Hello world');\n });\n \n- it('cannot render over an existing text child at the root', () => {\n+ it('cannot render over an existing text child at the root', async () => {\n const container = document.createElement('div');\n container.textContent = 'potato';\n- expect(() => ReactDOM.hydrate(

parsnip<\/div>, container)).toErrorDev(\n- 'Expected server HTML to contain a matching

.',\n+\n+ expect(() => {\n+ ReactDOM.flushSync(() => {\n+ ReactDOMClient.hydrateRoot(container,

parsnip<\/div>, {\n+ onRecoverableError: error => {\n+ Scheduler.log('Log recoverable error: ' + error.message);\n+ },\n+ });\n+ });\n+ }).toErrorDev(\n+ [\n+ 'Warning: An error occurred during hydration. The server HTML was replaced with client content in

.',\n+ 'Expected server HTML to contain a matching

\n-

parsnip<\/div>\n- <\/div>,\n- container,\n- ),\n- ).toErrorDev(\n- 'Expected server HTML to contain a matching

.',\n+ expect(() => {\n+ ReactDOM.flushSync(() => {\n+ ReactDOMClient.hydrateRoot(\n+ container,\n+

\n+

parsnip<\/div>\n+ <\/div>,\n+ {\n+ onRecoverableError: error => {\n+ Scheduler.log('Log recoverable error: ' + error.message);\n+ },\n+ },\n+ );\n+ });\n+ }).toErrorDev(\n+ [\n+ 'Warning: An error occurred during hydration. The server HTML was replaced with client content in

.',\n+ 'Expected server HTML to contain a matching

.',\n+ ],\n+ {withoutStack: 1},\n );\n+\n+ assertLog([\n+ 'Log recoverable error: Hydration failed because the initial UI does not match what was rendered on the server.',\n+ '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.',\n+ ]);\n expect(container.textContent).toBe('parsnip');\n });\n \n- it('should give helpful errors on state desync', () => {\n+ it('should give helpful errors on state desync', async () => {\n class Component extends React.Component {\n render() {\n return (\n@@ -203,13 +263,45 @@ describe('rendering React components at document', () => {\n );\n const testDocument = getTestDocument(markup);\n \n- expect(() =>\n- ReactDOM.hydrate(, testDocument),\n- ).toErrorDev('Warning: Text content did not match.');\n+ const enableClientRenderFallbackOnTextMismatch = gate(\n+ flags => flags.enableClientRenderFallbackOnTextMismatch,\n+ );\n+ expect(() => {\n+ ReactDOM.flushSync(() => {\n+ ReactDOMClient.hydrateRoot(\n+ testDocument,\n+ ,\n+ {\n+ onRecoverableError: error => {\n+ Scheduler.log('Log recoverable error: ' + error.message);\n+ },\n+ },\n+ );\n+ });\n+ }).toErrorDev(\n+ enableClientRenderFallbackOnTextMismatch\n+ ? [\n+ 'Warning: An error occurred during hydration. The server HTML was replaced with client content in <#document>.',\n+ 'Warning: Text content did not match.',\n+ ]\n+ : ['Warning: Text content did not match.'],\n+ {\n+ withoutStack: enableClientRenderFallbackOnTextMismatch ? 1 : 0,\n+ },\n+ );\n+\n+ assertLog(\n+ enableClientRenderFallbackOnTextMismatch\n+ ? [\n+ 'Log recoverable error: Text content does not match server-rendered HTML.',\n+ '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.',\n+ ]\n+ : [],\n+ );\n expect(testDocument.body.innerHTML).toBe('Hello world');\n });\n \n- it('should render w\/ no markup to full document', () => {\n+ it('should render w\/ no markup to full document', async () => {\n const testDocument = getTestDocument();\n \n class Component extends React.Component {\n@@ -227,23 +319,59 @@ describe('rendering React components at document', () => {\n \n if (gate(flags => flags.enableFloat)) {\n \/\/ with float the title no longer is a hydration mismatch so we get an error on the body mismatch\n- expect(() =>\n- ReactDOM.hydrate(, testDocument),\n- ).toErrorDev(\n- 'Expected server HTML to contain a matching text node for \"Hello world\" in ',\n+ expect(() => {\n+ ReactDOM.flushSync(() => {\n+ ReactDOMClient.hydrateRoot(\n+ testDocument,\n+ ,\n+ {\n+ onRecoverableError: error => {\n+ Scheduler.log('Log recoverable error: ' + error.message);\n+ },\n+ },\n+ );\n+ });\n+ }).toErrorDev(\n+ [\n+ 'Warning: An error occurred during hydration. The server HTML was replaced with client content in <#document>.',\n+ 'Expected server HTML to contain a matching text node for \"Hello world\" in ',\n+ ],\n+ {withoutStack: 1},\n );\n+ assertLog([\n+ 'Log recoverable error: Hydration failed because the initial UI does not match what was rendered on the server.',\n+ '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.',\n+ ]);\n } else {\n \/\/ getTestDocument() has an extra that we didn't render.\n- expect(() =>\n- ReactDOM.hydrate(, testDocument),\n- ).toErrorDev(\n- 'Did not expect server HTML to contain a in .',\n+ expect(() => {\n+ ReactDOM.flushSync(() => {\n+ ReactDOMClient.hydrateRoot(\n+ testDocument,\n+ ,\n+ {\n+ onRecoverableError: error => {\n+ Scheduler.log('Log recoverable error: ' + error.message);\n+ },\n+ },\n+ );\n+ });\n+ }).toErrorDev(\n+ [\n+ 'Warning: An error occurred during hydration. The server HTML was replaced with client content in <#document>.',\n+ 'Warning: Text content did not match. Server: \"test doc\" Client: \"Hello World\"',\n+ ],\n+ {withoutStack: 1},\n );\n+ assertLog([\n+ 'Log recoverable error: Text content does not match server-rendered HTML.',\n+ '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.',\n+ ]);\n }\n expect(testDocument.body.innerHTML).toBe('Hello world');\n });\n \n- it('supports findDOMNode on full-page components', () => {\n+ it('supports findDOMNode on full-page components in legacy mode', () => {\n const tree = (\n \n \n","files":[{"status":"M","path":"packages\/react-dom\/src\/__tests__\/ReactRenderDocument-test.js"}]}

dillon1000/react

Files changed