{"body":"","commit":{"authorEmail":"dan.abramov@gmail.com","authoredAt":"2020-12-01T16:40:12+00:00","shortRevision":"148ffe3cfe","subject":"Failing test for Client reconciliation (#20318)","revision":"148ffe3cfe7a2627bebfb1852f332a1d122b3103","authorName":"Dan Abramov"},"parents":["ad6f3d5c55a79e8a44798aad36118e73de3a64f8"],"patch":"diff --git a\/packages\/react-transport-dom-webpack\/src\/__tests__\/ReactFlightDOM-test.js b\/packages\/react-transport-dom-webpack\/src\/__tests__\/ReactFlightDOM-test.js\nindex e437c7b20b..4ff3ff2034 100644\n--- a\/packages\/react-transport-dom-webpack\/src\/__tests__\/ReactFlightDOM-test.js\n+++ b\/packages\/react-transport-dom-webpack\/src\/__tests__\/ReactFlightDOM-test.js\n@@ -440,4 +440,92 @@ describe('ReactFlightDOM', () => {\n '

Game over<\/p>', \/\/ TODO: should not have message in prod.\n );\n });\n+\n+ \/\/ @gate experimental\n+ it('should preserve state of client components on refetch', async () => {\n+ const {Suspense} = React;\n+\n+ \/\/ Client\n+\n+ function Page({response}) {\n+ return response.readRoot();\n+ }\n+\n+ function Input() {\n+ return ;\n+ }\n+\n+ const InputClient = moduleReference(Input);\n+\n+ \/\/ Server\n+\n+ function App({color}) {\n+ \/\/ Verify both DOM and Client children.\n+ return (\n+

\n+ \n+ \n+ <\/div>\n+ );\n+ }\n+\n+ const container = document.createElement('div');\n+ const root = ReactDOM.unstable_createRoot(container);\n+\n+ const stream1 = getTestStream();\n+ ReactTransportDOMServer.pipeToNodeWritable(\n+ ,\n+ stream1.writable,\n+ webpackMap,\n+ );\n+ const response1 = ReactTransportDOMClient.createFromReadableStream(\n+ stream1.readable,\n+ );\n+ await act(async () => {\n+ root.render(\n+ (loading)<\/p>}>\n+ \n+ <\/Suspense>,\n+ );\n+ });\n+ expect(container.children.length).toBe(1);\n+ expect(container.children[0].tagName).toBe('DIV');\n+ expect(container.children[0].style.color).toBe('red');\n+\n+ \/\/ Change the DOM state for both inputs.\n+ const inputA = container.children[0].children[0];\n+ expect(inputA.tagName).toBe('INPUT');\n+ inputA.value = 'hello';\n+ const inputB = container.children[0].children[1];\n+ expect(inputB.tagName).toBe('INPUT');\n+ inputB.value = 'goodbye';\n+\n+ const stream2 = getTestStream();\n+ ReactTransportDOMServer.pipeToNodeWritable(\n+ ,\n+ stream2.writable,\n+ webpackMap,\n+ );\n+ const response2 = ReactTransportDOMClient.createFromReadableStream(\n+ stream2.readable,\n+ );\n+ await act(async () => {\n+ root.render(\n+ (loading)<\/p>}>\n+ \n+ <\/Suspense>,\n+ );\n+ });\n+ expect(container.children.length).toBe(1);\n+ expect(container.children[0].tagName).toBe('DIV');\n+ expect(container.children[0].style.color).toBe('blue');\n+\n+ \/\/ Verify we didn't destroy the DOM for either input.\n+ expect(inputA === container.children[0].children[0]).toBe(true);\n+ expect(inputA.tagName).toBe('INPUT');\n+ expect(inputA.value).toBe('hello');\n+ expect(inputB === container.children[0].children[1]).toBe(true);\n+ expect(inputB.tagName).toBe('INPUT');\n+ expect(inputB.value).toBe('goodbye');\n+ });\n });\n","files":[{"status":"M","path":"packages\/react-transport-dom-webpack\/src\/__tests__\/ReactFlightDOM-test.js"}]}

dillon1000/react

Files changed