{"files":[{"status":"M","path":"packages\/react-dom\/src\/__tests__\/ReactServerRenderingHydration-test.js"}],"patch":"diff --git a\/packages\/react-dom\/src\/__tests__\/ReactServerRenderingHydration-test.js b\/packages\/react-dom\/src\/__tests__\/ReactServerRenderingHydration-test.js\nindex c7416b255d..982166b405 100644\n--- a\/packages\/react-dom\/src\/__tests__\/ReactServerRenderingHydration-test.js\n+++ b\/packages\/react-dom\/src\/__tests__\/ReactServerRenderingHydration-test.js\n@@ -34,7 +34,7 @@ describe('ReactDOMServerHydration', () => {\n act = InternalTestUtils.act;\n });\n \n- it('should have the correct mounting behavior (new hydrate API)', () => {\n+ it('should have the correct mounting behavior', async () => {\n let mountCount = 0;\n let numClicks = 0;\n \n@@ -61,20 +61,29 @@ describe('ReactDOMServerHydration', () => {\n const element = document.createElement('div');\n document.body.appendChild(element);\n try {\n- ReactDOM.render(, element);\n+ let root = ReactDOMClient.createRoot(element);\n+ await act(() => {\n+ root.render();\n+ });\n \n let lastMarkup = element.innerHTML;\n \n \/\/ Exercise the update path. Markup should not change,\n \/\/ but some lifecycle methods should be run again.\n- ReactDOM.render(, element);\n+ await act(() => {\n+ root.render();\n+ });\n expect(mountCount).toEqual(1);\n \n \/\/ Unmount and remount. We should get another mount event and\n \/\/ we should get different markup, as the IDs are unique each time.\n- ReactDOM.unmountComponentAtNode(element);\n+ root.unmount();\n expect(element.innerHTML).toEqual('');\n- ReactDOM.render(, element);\n+ root = ReactDOMClient.createRoot(element);\n+ await act(() => {\n+ root.render();\n+ });\n+\n expect(mountCount).toEqual(2);\n expect(element.innerHTML).not.toEqual(lastMarkup);\n \n@@ -82,13 +91,22 @@ describe('ReactDOMServerHydration', () => {\n \/\/ we used server rendering. We should mount again, but the markup should\n \/\/ be unchanged. We will append a sentinel at the end of innerHTML to be\n \/\/ sure that innerHTML was not changed.\n- ReactDOM.unmountComponentAtNode(element);\n+ await act(() => {\n+ root.unmount();\n+ });\n expect(element.innerHTML).toEqual('');\n \n lastMarkup = ReactDOMServer.renderToString();\n element.innerHTML = lastMarkup;\n \n- let instance = ReactDOM.hydrate(, element);\n+ let instance;\n+\n+ root = await act(() => {\n+ return ReactDOMClient.hydrateRoot(\n+ element,\n+ (instance = current)} \/>,\n+ );\n+ });\n expect(mountCount).toEqual(3);\n expect(element.innerHTML).toBe(lastMarkup);\n \n@@ -97,15 +115,41 @@ describe('ReactDOMServerHydration', () => {\n instance.spanRef.current.click();\n expect(numClicks).toEqual(1);\n \n- ReactDOM.unmountComponentAtNode(element);\n+ await act(() => {\n+ root.unmount();\n+ });\n expect(element.innerHTML).toEqual('');\n \n \/\/ Now simulate a situation where the app is not idempotent. React should\n \/\/ warn but do the right thing.\n element.innerHTML = lastMarkup;\n- expect(() => {\n- instance = ReactDOM.hydrate(, element);\n- }).toErrorDev('Text content did not match. Server: \"x\" Client: \"y\"');\n+ const enableClientRenderFallbackOnTextMismatch = gate(\n+ flags => flags.enableClientRenderFallbackOnTextMismatch,\n+ );\n+ await expect(async () => {\n+ root = await act(() => {\n+ return ReactDOMClient.hydrateRoot(\n+ element,\n+ {\n+ instance = current;\n+ }}\n+ \/>,\n+ {\n+ onRecoverableError: error => {},\n+ },\n+ );\n+ });\n+ }).toErrorDev(\n+ enableClientRenderFallbackOnTextMismatch\n+ ? [\n+ 'An error occurred during hydration. The server HTML was replaced with client content in

.',\n+ 'Text content did not match. Server: \"x\" Client: \"y\"',\n+ ]\n+ : ['Text content did not match. Server: \"x\" Client: \"y\"'],\n+ {withoutStack: enableClientRenderFallbackOnTextMismatch ? 1 : 0},\n+ );\n expect(mountCount).toEqual(4);\n expect(element.innerHTML.length > 0).toBe(true);\n expect(element.innerHTML).not.toEqual(lastMarkup);\n@@ -164,25 +208,46 @@ describe('ReactDOMServerHydration', () => {\n });\n \n \/\/ Regression test for https:\/\/github.com\/facebook\/react\/issues\/11726\n- it('should not focus on either server or client with autofocus={false} even if there is a markup mismatch', () => {\n+ it('should not focus on either server or client with autofocus={false} even if there is a markup mismatch', async () => {\n const element = document.createElement('div');\n element.innerHTML = ReactDOMServer.renderToString(\n

dillon1000/react

Files changed