{"parents":["212d2909d3c66eb5950b915b1f079f261e3ccb7c"],"patch":"diff --git a\/packages\/react-dom\/src\/__tests__\/ReactDOMFizzServer-test.js b\/packages\/react-dom\/src\/__tests__\/ReactDOMFizzServer-test.js\nindex c2074d8041..ee91831e9f 100644\n--- a\/packages\/react-dom\/src\/__tests__\/ReactDOMFizzServer-test.js\n+++ b\/packages\/react-dom\/src\/__tests__\/ReactDOMFizzServer-test.js\n@@ -16,6 +16,7 @@ let React;\n let ReactDOM;\n let ReactDOMFizzServer;\n let Suspense;\n+let SuspenseList;\n let PropTypes;\n let textCache;\n let document;\n@@ -37,6 +38,7 @@ describe('ReactDOMFizzServer', () => {\n }\n Stream = require('stream');\n Suspense = React.Suspense;\n+ SuspenseList = React.unstable_SuspenseList;\n PropTypes = require('prop-types');\n \n textCache = new Map();\n@@ -476,6 +478,7 @@ describe('ReactDOMFizzServer', () => {\n });\n \n \/\/ We're still showing a fallback.\n+ expect(getVisibleChildren(container)).toEqual(

Loading...<\/div>);\n \n \/\/ Attempt to hydrate the content.\n const root = ReactDOM.unstable_createRoot(container, {hydrate: true});\n@@ -507,6 +510,176 @@ describe('ReactDOMFizzServer', () => {\n expect(ref.current).toBe(h1);\n });\n \n+ \/\/ @gate experimental\n+ it('handles an error on the client if the server ends up erroring', async () => {\n+ const ref = React.createRef();\n+\n+ class ErrorBoundary extends React.Component {\n+ state = {error: null};\n+ static getDerivedStateFromError(error) {\n+ return {error};\n+ }\n+ render() {\n+ if (this.state.error) {\n+ return {this.state.error.message}<\/b>;\n+ }\n+ return this.props.children;\n+ }\n+ }\n+\n+ function App() {\n+ return (\n+ \n+
\n+ \n+ \n+ \n+ <\/span>\n+ <\/Suspense>\n+ <\/div>\n+ <\/ErrorBoundary>\n+ );\n+ }\n+\n+ const loggedErrors = [];\n+\n+ \/\/ We originally suspend the boundary and start streaming the loading state.\n+ await act(async () => {\n+ const {startWriting} = ReactDOMFizzServer.pipeToNodeWritable(\n+ ,\n+ writable,\n+ {\n+ onError(x) {\n+ loggedErrors.push(x);\n+ },\n+ },\n+ );\n+ startWriting();\n+ });\n+\n+ \/\/ We're still showing a fallback.\n+ expect(getVisibleChildren(container)).toEqual(
Loading...<\/div>);\n+\n+ expect(loggedErrors).toEqual([]);\n+\n+ \/\/ Attempt to hydrate the content.\n+ const root = ReactDOM.unstable_createRoot(container, {hydrate: true});\n+ root.render();\n+ Scheduler.unstable_flushAll();\n+\n+ \/\/ We're still loading because we're waiting for the server to stream more content.\n+ expect(getVisibleChildren(container)).toEqual(
Loading...<\/div>);\n+\n+ const theError = new Error('Error Message');\n+ await act(async () => {\n+ rejectText('This Errors', theError);\n+ });\n+\n+ expect(loggedErrors).toEqual([theError]);\n+\n+ \/\/ The server errored, but we still haven't hydrated. We don't know if the\n+ \/\/ client will succeed yet, so we still show the loading state.\n+ expect(getVisibleChildren(container)).toEqual(
Loading...<\/div>);\n+ expect(ref.current).toBe(null);\n+\n+ \/\/ Flush the hydration.\n+ Scheduler.unstable_flushAll();\n+\n+ \/\/ Hydrating should've generated an error and replaced the suspense boundary.\n+ expect(getVisibleChildren(container)).toEqual(Error Message<\/b>);\n+\n+ const b = container.getElementsByTagName('b')[0];\n+ expect(ref.current).toBe(b);\n+ });\n+\n+ \/\/ @gate experimental\n+ it('shows inserted items before pending in a SuspenseList as fallbacks while hydrating', async () => {\n+ const ref = React.createRef();\n+\n+ \/\/ These are hoisted to avoid them from rerendering.\n+ const a = (\n+ \n+ \n+ \n+ <\/span>\n+ <\/Suspense>\n+ );\n+ const b = (\n+ \n+ \n+ \n+ <\/span>\n+ <\/Suspense>\n+ );\n+\n+ function App({showMore}) {\n+ return (\n+ \n+ {a}\n+ {b}\n+ {showMore ? (\n+ \n+ C<\/span>\n+ <\/Suspense>\n+ ) : null}\n+ <\/SuspenseList>\n+ );\n+ }\n+\n+ \/\/ We originally suspend the boundary and start streaming the loading state.\n+ await act(async () => {\n+ const {startWriting} = ReactDOMFizzServer.pipeToNodeWritable(\n+ ,\n+ writable,\n+ );\n+ startWriting();\n+ });\n+\n+ const root = ReactDOM.unstable_createRoot(container, {hydrate: true});\n+ root.render();\n+ Scheduler.unstable_flushAll();\n+\n+ \/\/ We're not hydrated yet.\n+ expect(ref.current).toBe(null);\n+ expect(getVisibleChildren(container)).toEqual([\n+ 'Loading A',\n+ \/\/ TODO: This is incorrect. It should be \"Loading B\" but Fizz SuspenseList\n+ \/\/ isn't implemented fully yet.\n+ B<\/span>,\n+ ]);\n+\n+ \/\/ Add more rows before we've hydrated the first two.\n+ root.render();\n+ Scheduler.unstable_flushAll();\n+\n+ \/\/ We're not hydrated yet.\n+ expect(ref.current).toBe(null);\n+\n+ \/\/ We haven't resolved yet.\n+ expect(getVisibleChildren(container)).toEqual([\n+ 'Loading A',\n+ \/\/ TODO: This is incorrect. It should be \"Loading B\" but Fizz SuspenseList\n+ \/\/ isn't implemented fully yet.\n+ B<\/span>,\n+ 'Loading C',\n+ ]);\n+\n+ await act(async () => {\n+ await resolveText('A');\n+ });\n+\n+ Scheduler.unstable_flushAll();\n+\n+ expect(getVisibleChildren(container)).toEqual([\n+ A<\/span>,\n+ B<\/span>,\n+ C<\/span>,\n+ ]);\n+\n+ const span = container.getElementsByTagName('span')[0];\n+ expect(ref.current).toBe(span);\n+ });\n+\n \/\/ @gate experimental\n it('client renders a boundary if it does not resolve before aborting', async () => {\n function App() {\ndiff --git a\/packages\/react-dom\/src\/__tests__\/ReactDOMServerPartialHydration-test.internal.js b\/packages\/react-dom\/src\/__tests__\/ReactDOMServerPartialHydration-test.internal.js\nindex bc0df9fa6c..02a388a189 100644\n--- a\/packages\/react-dom\/src\/__tests__\/ReactDOMServerPartialHydration-test.internal.js\n+++ b\/packages\/react-dom\/src\/__tests__\/ReactDOMServerPartialHydration-test.internal.js\n@@ -1358,189 +1358,6 @@ describe('ReactDOMServerPartialHydration', () => {\n expect(ref.current).toBe(span);\n });\n \n- \/\/ @gate experimental\n- it('waits for pending content to come in from the server and then hydrates it', async () => {\n- let suspend = false;\n- const promise = new Promise(resolvePromise => {});\n- const ref = React.createRef();\n-\n- function Child() {\n- if (suspend) {\n- throw promise;\n- } else {\n- return 'Hello';\n- }\n- }\n-\n- function App() {\n- return (\n-
\n- \n- \n- \n- <\/span>\n- <\/Suspense>\n- <\/div>\n- );\n- }\n-\n- \/\/ We're going to simulate what Fizz will do during streaming rendering.\n-\n- \/\/ First we generate the HTML of the loading state.\n- suspend = true;\n- const loadingHTML = ReactDOMServer.renderToString();\n- \/\/ Then we generate the HTML of the final content.\n- suspend = false;\n- const finalHTML = ReactDOMServer.renderToString();\n-\n- const container = document.createElement('div');\n- container.innerHTML = loadingHTML;\n-\n- const suspenseNode = container.firstChild.firstChild;\n- expect(suspenseNode.nodeType).toBe(8);\n- \/\/ Put the suspense node in hydration state.\n- suspenseNode.data = '$?';\n-\n- \/\/ This will simulates new content streaming into the document and\n- \/\/ replacing the fallback with final content.\n- function streamInContent() {\n- const temp = document.createElement('div');\n- temp.innerHTML = finalHTML;\n- const finalSuspenseNode = temp.firstChild.firstChild;\n- const fallbackContent = suspenseNode.nextSibling;\n- const finalContent = finalSuspenseNode.nextSibling;\n- suspenseNode.parentNode.replaceChild(finalContent, fallbackContent);\n- suspenseNode.data = '$';\n- if (suspenseNode._reactRetry) {\n- suspenseNode._reactRetry();\n- }\n- }\n-\n- \/\/ We're still showing a fallback.\n- expect(container.getElementsByTagName('span').length).toBe(0);\n-\n- \/\/ Attempt to hydrate the content.\n- suspend = false;\n- const root = ReactDOM.createRoot(container, {hydrate: true});\n- root.render();\n- Scheduler.unstable_flushAll();\n- jest.runAllTimers();\n-\n- \/\/ We're still loading because we're waiting for the server to stream more content.\n- expect(container.textContent).toBe('Loading...');\n-\n- \/\/ The server now updates the content in place in the fallback.\n- streamInContent();\n-\n- \/\/ The final HTML is now in place.\n- expect(container.textContent).toBe('Hello');\n- const span = container.getElementsByTagName('span')[0];\n-\n- \/\/ But it is not yet hydrated.\n- expect(ref.current).toBe(null);\n-\n- Scheduler.unstable_flushAll();\n- jest.runAllTimers();\n-\n- \/\/ Now it's hydrated.\n- expect(ref.current).toBe(span);\n- });\n-\n- \/\/ @gate experimental\n- it('handles an error on the client if the server ends up erroring', async () => {\n- let suspend = false;\n- const promise = new Promise(resolvePromise => {});\n- const ref = React.createRef();\n-\n- function Child() {\n- if (suspend) {\n- throw promise;\n- } else {\n- throw new Error('Error Message');\n- }\n- }\n-\n- class ErrorBoundary extends React.Component {\n- state = {error: null};\n- static getDerivedStateFromError(error) {\n- return {error};\n- }\n- render() {\n- if (this.state.error) {\n- return
{this.state.error.message}<\/div>;\n- }\n- return this.props.children;\n- }\n- }\n-\n- function App() {\n- return (\n- \n-
\n- \n- \n- \n- <\/span>\n- <\/Suspense>\n- <\/div>\n- <\/ErrorBoundary>\n- );\n- }\n-\n- \/\/ We're going to simulate what Fizz will do during streaming rendering.\n-\n- \/\/ First we generate the HTML of the loading state.\n- suspend = true;\n- const loadingHTML = ReactDOMServer.renderToString();\n-\n- const container = document.createElement('div');\n- container.innerHTML = loadingHTML;\n-\n- const suspenseNode = container.firstChild.firstChild;\n- expect(suspenseNode.nodeType).toBe(8);\n- \/\/ Put the suspense node in hydration state.\n- suspenseNode.data = '$?';\n-\n- \/\/ This will simulates the server erroring and putting the fallback\n- \/\/ as the final state.\n- function streamInError() {\n- suspenseNode.data = '$!';\n- if (suspenseNode._reactRetry) {\n- suspenseNode._reactRetry();\n- }\n- }\n-\n- \/\/ We're still showing a fallback.\n- expect(container.getElementsByTagName('span').length).toBe(0);\n-\n- \/\/ Attempt to hydrate the content.\n- suspend = false;\n- const root = ReactDOM.createRoot(container, {hydrate: true});\n- root.render();\n- Scheduler.unstable_flushAll();\n- jest.runAllTimers();\n-\n- \/\/ We're still loading because we're waiting for the server to stream more content.\n- expect(container.textContent).toBe('Loading...');\n-\n- \/\/ The server now updates the content in place in the fallback.\n- streamInError();\n-\n- \/\/ The server errored, but we still haven't hydrated. We don't know if the\n- \/\/ client will succeed yet, so we still show the loading state.\n- expect(container.textContent).toBe('Loading...');\n- expect(ref.current).toBe(null);\n-\n- Scheduler.unstable_flushAll();\n- jest.runAllTimers();\n-\n- \/\/ Hydrating should've generated an error and replaced the suspense boundary.\n- expect(container.textContent).toBe('Error Message');\n-\n- const div = container.getElementsByTagName('div')[0];\n- expect(ref.current).toBe(div);\n- });\n-\n \/\/ @gate experimental\n it('shows inserted items in a SuspenseList before content is hydrated', async () => {\n let suspend = false;\n@@ -1702,98 +1519,6 @@ describe('ReactDOMServerPartialHydration', () => {\n expect(container.textContent).toBe('ALoading B');\n });\n \n- \/\/ @gate experimental\n- it('shows inserted items before pending in a SuspenseList as fallbacks', async () => {\n- let suspend = false;\n- let resolve;\n- const promise = new Promise(resolvePromise => (resolve = resolvePromise));\n- const ref = React.createRef();\n-\n- function Child({children}) {\n- if (suspend) {\n- throw promise;\n- } else {\n- return children;\n- }\n- }\n-\n- \/\/ These are hoisted to avoid them from rerendering.\n- const a = (\n- \n- \n- A<\/span>\n- <\/Child>\n- <\/Suspense>\n- );\n- const b = (\n- \n- \n- B<\/span>\n- <\/Child>\n- <\/Suspense>\n- );\n-\n- function App({showMore}) {\n- return (\n- \n- {a}\n- {b}\n- {showMore ? (\n- \n- C<\/span>\n- <\/Suspense>\n- ) : null}\n- <\/SuspenseList>\n- );\n- }\n-\n- suspend = false;\n- const html = ReactDOMServer.renderToString();\n-\n- const container = document.createElement('div');\n- container.innerHTML = html;\n-\n- const suspenseNode = container.firstChild;\n- expect(suspenseNode.nodeType).toBe(8);\n- \/\/ Put the suspense node in pending state.\n- suspenseNode.data = '$?';\n-\n- const root = ReactDOM.createRoot(container, {hydrate: true});\n-\n- suspend = true;\n- act(() => {\n- root.render();\n- });\n-\n- \/\/ We're not hydrated yet.\n- expect(ref.current).toBe(null);\n- expect(container.textContent).toBe('AB');\n-\n- \/\/ Add more rows before we've hydrated the first two.\n- act(() => {\n- root.render();\n- });\n-\n- \/\/ We're not hydrated yet.\n- expect(ref.current).toBe(null);\n-\n- \/\/ Since the first two are already showing their final content\n- \/\/ we should be able to show the real content.\n- expect(container.textContent).toBe('ABLoading C');\n-\n- suspend = false;\n- await act(async () => {\n- \/\/ Resolve the boundary to be in its resolved final state.\n- suspenseNode.data = '$';\n- if (suspenseNode._reactRetry) {\n- suspenseNode._reactRetry();\n- }\n- await resolve();\n- });\n-\n- expect(container.textContent).toBe('ABC');\n- });\n-\n \/\/ @gate experimental\n it('clears server boundaries when SuspenseList runs out of time hydrating', async () => {\n let suspend = false;\n","files":[{"path":"packages\/react-dom\/src\/__tests__\/ReactDOMFizzServer-test.js","status":"M"},{"path":"packages\/react-dom\/src\/__tests__\/ReactDOMServerPartialHydration-test.internal.js","status":"M"}],"commit":{"authorName":"Sebastian Markbåge","authoredAt":"2021-05-05T21:22:27-04:00","subject":"Convert emulated-Fizz PartialHydration tests to Fizz tests (#21437)","authorEmail":"sema@fb.com","shortRevision":"46ef1ab32a","revision":"46ef1ab32ad2119ce268b8e292bfa0da7705b852"},"body":""}

dillon1000/react

Files changed