{"parents":["77e872217c7f4044ae4f96dd99bf999efb601040"],"files":[{"status":"M","path":"packages\/react-dom\/src\/__tests__\/ReactDOMServerPartialHydration-test.internal.js"}],"patch":"diff --git a\/packages\/react-dom\/src\/__tests__\/ReactDOMServerPartialHydration-test.internal.js b\/packages\/react-dom\/src\/__tests__\/ReactDOMServerPartialHydration-test.internal.js\nindex 43c8c2de6c..c8b546b52d 100644\n--- a\/packages\/react-dom\/src\/__tests__\/ReactDOMServerPartialHydration-test.internal.js\n+++ b\/packages\/react-dom\/src\/__tests__\/ReactDOMServerPartialHydration-test.internal.js\n@@ -2897,6 +2897,89 @@ describe('ReactDOMServerPartialHydration', () => {\n expect(ref.current).not.toBe(null);\n });\n \n+ \/\/ @gate experimental\n+ it('regression test: does not overfire non-bubbling browser events', async () => {\n+ let suspend = false;\n+ let resolve;\n+ const promise = new Promise(resolvePromise => (resolve = resolvePromise));\n+\n+ function Sibling({text}) {\n+ if (suspend) {\n+ throw promise;\n+ } else {\n+ return 'Hello';\n+ }\n+ }\n+\n+ let submits = 0;\n+\n+ function Form() {\n+ const [submitted, setSubmitted] = React.useState(false);\n+ if (submitted) {\n+ return null;\n+ }\n+ return (\n+ {\n+ setSubmitted(true);\n+ submits++;\n+ }}>\n+ Click me\n+ <\/form>\n+ );\n+ }\n+\n+ function App() {\n+ return (\n+

\n+ \n+

\n+ \n+ <\/Suspense>\n+ <\/div>\n+ );\n+ }\n+\n+ suspend = false;\n+ const finalHTML = ReactDOMServer.renderToString();\n+ const container = document.createElement('div');\n+ container.innerHTML = finalHTML;\n+\n+ \/\/ We need this to be in the document since we'll dispatch events on it.\n+ document.body.appendChild(container);\n+\n+ const form = container.getElementsByTagName('form')[0];\n+\n+ \/\/ On the client we don't have all data yet but we want to start\n+ \/\/ hydrating anyway.\n+ suspend = true;\n+ const root = ReactDOM.createRoot(container, {hydrate: true});\n+ root.render();\n+ Scheduler.unstable_flushAll();\n+ jest.runAllTimers();\n+\n+ expect(container.textContent).toBe('Click meHello');\n+\n+ \/\/ We're now partially hydrated.\n+ form.dispatchEvent(\n+ new Event('submit', {\n+ bubbles: true,\n+ }),\n+ );\n+ expect(submits).toBe(0);\n+\n+ \/\/ Resolving the promise so that rendering can complete.\n+ suspend = false;\n+ resolve();\n+ await promise;\n+\n+ Scheduler.unstable_flushAll();\n+ jest.runAllTimers();\n+ expect(submits).toBe(1);\n+ expect(container.textContent).toBe('Hello');\n+ document.body.removeChild(container);\n+ });\n+\n \/\/ This test fails, in both forks. Without a boundary, the deferred tree won't\n \/\/ re-enter hydration mode. It doesn't come up in practice because there's\n \/\/ always a parent Suspense boundary. But it's still a bug. Leaving for a\n","commit":{"revision":"e0e6b9c036abde428d3130738604fd5abb67aa8f","authorName":"Dan Abramov","authoredAt":"2020-07-08T20:48:43+01:00","authorEmail":"dan.abramov@gmail.com","subject":"Add regression test for #19269 (#19282)","shortRevision":"e0e6b9c036"},"body":""}

dillon1000/react

Files changed