{"files":[{"status":"M","path":"packages\/react-dom\/src\/__tests__\/ReactMultiChildReconcile-test.js"}],"parents":["f5a3158a784ad9677d071004b37b100f26c6c4e3"],"patch":"diff --git a\/packages\/react-dom\/src\/__tests__\/ReactMultiChildReconcile-test.js b\/packages\/react-dom\/src\/__tests__\/ReactMultiChildReconcile-test.js\nindex 0bfb27ade1..3a2a512688 100644\n--- a\/packages\/react-dom\/src\/__tests__\/ReactMultiChildReconcile-test.js\n+++ b\/packages\/react-dom\/src\/__tests__\/ReactMultiChildReconcile-test.js\n@@ -10,7 +10,8 @@\n 'use strict';\n \n const React = require('react');\n-const ReactDOM = require('react-dom');\n+const ReactDOMClient = require('react-dom\/client');\n+const act = require('internal-test-utils').act;\n \n const stripEmptyValues = function (obj) {\n const ret = {};\n@@ -221,24 +222,40 @@ function verifyDomOrderingAccurate(outerContainer, statusDisplays) {\n expect(orderedDomKeys).toEqual(orderedLogicalKeys);\n }\n \n-function testPropsSequenceWithPreparedChildren(sequence, prepareChildren) {\n+async function testPropsSequenceWithPreparedChildren(\n+ sequence,\n+ prepareChildren,\n+) {\n const container = document.createElement('div');\n- const parentInstance = ReactDOM.render(\n- ,\n- container,\n- );\n+ const root = ReactDOMClient.createRoot(container);\n+ let parentInstance;\n+ await act(() => {\n+ root.render(\n+ {\n+ if (parentInstance === undefined) {\n+ parentInstance = current;\n+ }\n+ }}\n+ \/>,\n+ );\n+ });\n let statusDisplays = parentInstance.getStatusDisplays();\n let lastInternalStates = getInternalStateByUserName(statusDisplays);\n verifyStatuses(statusDisplays, sequence[0]);\n \n for (let i = 1; i < sequence.length; i++) {\n- ReactDOM.render(\n- ,\n- container,\n- );\n+ await act(() => {\n+ root.render(\n+ ,\n+ );\n+ });\n+\n statusDisplays = parentInstance.getStatusDisplays();\n verifyStatuses(statusDisplays, sequence[i]);\n verifyStatesPreserved(lastInternalStates, statusDisplays);\n@@ -274,13 +291,13 @@ function prepareChildrenModernIterable(childrenArray) {\n };\n }\n \n-function testPropsSequence(sequence) {\n- testPropsSequenceWithPreparedChildren(sequence, prepareChildrenArray);\n- testPropsSequenceWithPreparedChildren(\n+async function testPropsSequence(sequence) {\n+ await testPropsSequenceWithPreparedChildren(sequence, prepareChildrenArray);\n+ await testPropsSequenceWithPreparedChildren(\n sequence,\n prepareChildrenLegacyIterable,\n );\n- testPropsSequenceWithPreparedChildren(\n+ await testPropsSequenceWithPreparedChildren(\n sequence,\n prepareChildrenModernIterable,\n );\n@@ -291,7 +308,7 @@ describe('ReactMultiChildReconcile', () => {\n jest.resetModules();\n });\n \n- it('should reset internal state if removed then readded in an array', () => {\n+ it('should reset internal state if removed then readded in an array', async () => {\n \/\/ Test basics.\n const props = {\n usernameToStatus: {\n@@ -300,32 +317,44 @@ describe('ReactMultiChildReconcile', () => {\n };\n \n const container = document.createElement('div');\n- const parentInstance = ReactDOM.render(\n- ,\n- container,\n- );\n+ const root = ReactDOMClient.createRoot(container);\n+ let parentInstance;\n+ await act(() => {\n+ root.render(\n+ {\n+ if (parentInstance === undefined) {\n+ parentInstance = current;\n+ }\n+ }}\n+ \/>,\n+ );\n+ });\n let statusDisplays = parentInstance.getStatusDisplays();\n const startingInternalState = statusDisplays.jcw.getInternalState();\n \n \/\/ Now remove the child.\n- ReactDOM.render(\n- ,\n- container,\n- );\n+ await act(() => {\n+ root.render(\n+ ,\n+ );\n+ });\n+\n statusDisplays = parentInstance.getStatusDisplays();\n expect(statusDisplays.jcw).toBeFalsy();\n \n \/\/ Now reset the props that cause there to be a child\n- ReactDOM.render(\n- ,\n- container,\n- );\n+ await act(() => {\n+ root.render(\n+ ,\n+ );\n+ });\n+\n statusDisplays = parentInstance.getStatusDisplays();\n expect(statusDisplays.jcw).toBeTruthy();\n expect(statusDisplays.jcw.getInternalState()).not.toBe(\n@@ -333,7 +362,7 @@ describe('ReactMultiChildReconcile', () => {\n );\n });\n \n- it('should reset internal state if removed then readded in a legacy iterable', () => {\n+ it('should reset internal state if removed then readded in a legacy iterable', async () => {\n \/\/ Test basics.\n const props = {\n usernameToStatus: {\n@@ -342,32 +371,47 @@ describe('ReactMultiChildReconcile', () => {\n };\n \n const container = document.createElement('div');\n- const parentInstance = ReactDOM.render(\n- ,\n- container,\n- );\n+ const root = ReactDOMClient.createRoot(container);\n+ let parentInstance;\n+ await act(() => {\n+ root.render(\n+ {\n+ if (parentInstance === undefined) {\n+ parentInstance = current;\n+ }\n+ }}\n+ \/>,\n+ );\n+ });\n+\n let statusDisplays = parentInstance.getStatusDisplays();\n const startingInternalState = statusDisplays.jcw.getInternalState();\n \n \/\/ Now remove the child.\n- ReactDOM.render(\n- ,\n- container,\n- );\n+ await act(() => {\n+ root.render(\n+ ,\n+ );\n+ });\n+\n statusDisplays = parentInstance.getStatusDisplays();\n expect(statusDisplays.jcw).toBeFalsy();\n \n \/\/ Now reset the props that cause there to be a child\n- ReactDOM.render(\n- ,\n- container,\n- );\n+ await act(() => {\n+ root.render(\n+ ,\n+ );\n+ });\n+\n statusDisplays = parentInstance.getStatusDisplays();\n expect(statusDisplays.jcw).toBeTruthy();\n expect(statusDisplays.jcw.getInternalState()).not.toBe(\n@@ -375,7 +419,7 @@ describe('ReactMultiChildReconcile', () => {\n );\n });\n \n- it('should reset internal state if removed then readded in a modern iterable', () => {\n+ it('should reset internal state if removed then readded in a modern iterable', async () => {\n \/\/ Test basics.\n const props = {\n usernameToStatus: {\n@@ -384,32 +428,47 @@ describe('ReactMultiChildReconcile', () => {\n };\n \n const container = document.createElement('div');\n- const parentInstance = ReactDOM.render(\n- ,\n- container,\n- );\n+ const root = ReactDOMClient.createRoot(container);\n+ let parentInstance;\n+ await act(() => {\n+ root.render(\n+ {\n+ if (parentInstance === undefined) {\n+ parentInstance = current;\n+ }\n+ }}\n+ \/>,\n+ );\n+ });\n+\n let statusDisplays = parentInstance.getStatusDisplays();\n const startingInternalState = statusDisplays.jcw.getInternalState();\n \n \/\/ Now remove the child.\n- ReactDOM.render(\n- ,\n- container,\n- );\n+ await act(() => {\n+ root.render(\n+ ,\n+ );\n+ });\n+\n statusDisplays = parentInstance.getStatusDisplays();\n expect(statusDisplays.jcw).toBeFalsy();\n \n \/\/ Now reset the props that cause there to be a child\n- ReactDOM.render(\n- ,\n- container,\n- );\n+ await act(() => {\n+ root.render(\n+ ,\n+ );\n+ });\n+\n statusDisplays = parentInstance.getStatusDisplays();\n expect(statusDisplays.jcw).toBeTruthy();\n expect(statusDisplays.jcw.getInternalState()).not.toBe(\n@@ -417,7 +476,7 @@ describe('ReactMultiChildReconcile', () => {\n );\n });\n \n- it('should create unique identity', () => {\n+ it('should create unique identity', async () => {\n \/\/ Test basics.\n const usernameToStatus = {\n jcw: 'jcwStatus',\n@@ -425,10 +484,10 @@ describe('ReactMultiChildReconcile', () => {\n bob: 'bobStatus',\n };\n \n- testPropsSequence([{usernameToStatus: usernameToStatus}]);\n+ await testPropsSequence([{usernameToStatus: usernameToStatus}]);\n });\n \n- it('should preserve order if children order has not changed', () => {\n+ it('should preserve order if children order has not changed', async () => {\n const PROPS_SEQUENCE = [\n {\n usernameToStatus: {\n@@ -443,10 +502,10 @@ describe('ReactMultiChildReconcile', () => {\n },\n },\n ];\n- testPropsSequence(PROPS_SEQUENCE);\n+ await testPropsSequence(PROPS_SEQUENCE);\n });\n \n- it('should transition from zero to one children correctly', () => {\n+ it('should transition from zero to one children correctly', async () => {\n const PROPS_SEQUENCE = [\n {usernameToStatus: {}},\n {\n@@ -455,10 +514,10 @@ describe('ReactMultiChildReconcile', () => {\n },\n },\n ];\n- testPropsSequence(PROPS_SEQUENCE);\n+ await testPropsSequence(PROPS_SEQUENCE);\n });\n \n- it('should transition from one to zero children correctly', () => {\n+ it('should transition from one to zero children correctly', async () => {\n const PROPS_SEQUENCE = [\n {\n usernameToStatus: {\n@@ -467,11 +526,11 @@ describe('ReactMultiChildReconcile', () => {\n },\n {usernameToStatus: {}},\n ];\n- testPropsSequence(PROPS_SEQUENCE);\n+ await testPropsSequence(PROPS_SEQUENCE);\n });\n \n- it('should transition from one child to null children', () => {\n- testPropsSequence([\n+ it('should transition from one child to null children', async () => {\n+ await testPropsSequence([\n {\n usernameToStatus: {\n first: 'firstStatus',\n@@ -481,8 +540,8 @@ describe('ReactMultiChildReconcile', () => {\n ]);\n });\n \n- it('should transition from null children to one child', () => {\n- testPropsSequence([\n+ it('should transition from null children to one child', async () => {\n+ await testPropsSequence([\n {},\n {\n usernameToStatus: {\n@@ -492,8 +551,8 @@ describe('ReactMultiChildReconcile', () => {\n ]);\n });\n \n- it('should transition from zero children to null children', () => {\n- testPropsSequence([\n+ it('should transition from zero children to null children', async () => {\n+ await testPropsSequence([\n {\n usernameToStatus: {},\n },\n@@ -501,8 +560,8 @@ describe('ReactMultiChildReconcile', () => {\n ]);\n });\n \n- it('should transition from null children to zero children', () => {\n- testPropsSequence([\n+ it('should transition from null children to zero children', async () => {\n+ await testPropsSequence([\n {},\n {\n usernameToStatus: {},\n@@ -514,7 +573,7 @@ describe('ReactMultiChildReconcile', () => {\n * `FriendsStatusDisplay` renders nulls as empty children (it's a convention\n * of `FriendsStatusDisplay`, nothing related to React or these test cases.\n *\/\n- it('should remove nulled out children at the beginning', () => {\n+ it('should remove nulled out children at the beginning', async () => {\n const PROPS_SEQUENCE = [\n {\n usernameToStatus: {\n@@ -529,10 +588,10 @@ describe('ReactMultiChildReconcile', () => {\n },\n },\n ];\n- testPropsSequence(PROPS_SEQUENCE);\n+ await testPropsSequence(PROPS_SEQUENCE);\n });\n \n- it('should remove nulled out children at the end', () => {\n+ it('should remove nulled out children at the end', async () => {\n const PROPS_SEQUENCE = [\n {\n usernameToStatus: {\n@@ -547,10 +606,10 @@ describe('ReactMultiChildReconcile', () => {\n },\n },\n ];\n- testPropsSequence(PROPS_SEQUENCE);\n+ await testPropsSequence(PROPS_SEQUENCE);\n });\n \n- it('should reverse the order of two children', () => {\n+ it('should reverse the order of two children', async () => {\n const PROPS_SEQUENCE = [\n {\n usernameToStatus: {\n@@ -565,10 +624,10 @@ describe('ReactMultiChildReconcile', () => {\n },\n },\n ];\n- testPropsSequence(PROPS_SEQUENCE);\n+ await testPropsSequence(PROPS_SEQUENCE);\n });\n \n- it('should reverse the order of more than two children', () => {\n+ it('should reverse the order of more than two children', async () => {\n const PROPS_SEQUENCE = [\n {\n usernameToStatus: {\n@@ -585,10 +644,10 @@ describe('ReactMultiChildReconcile', () => {\n },\n },\n ];\n- testPropsSequence(PROPS_SEQUENCE);\n+ await testPropsSequence(PROPS_SEQUENCE);\n });\n \n- it('should cycle order correctly', () => {\n+ it('should cycle order correctly', async () => {\n const PROPS_SEQUENCE = [\n {\n usernameToStatus: {\n@@ -632,10 +691,10 @@ describe('ReactMultiChildReconcile', () => {\n },\n },\n ];\n- testPropsSequence(PROPS_SEQUENCE);\n+ await testPropsSequence(PROPS_SEQUENCE);\n });\n \n- it('should cycle order correctly in the other direction', () => {\n+ it('should cycle order correctly in the other direction', async () => {\n const PROPS_SEQUENCE = [\n {\n usernameToStatus: {\n@@ -679,10 +738,10 @@ describe('ReactMultiChildReconcile', () => {\n },\n },\n ];\n- testPropsSequence(PROPS_SEQUENCE);\n+ await testPropsSequence(PROPS_SEQUENCE);\n });\n \n- it('should remove nulled out children and ignore new null children', () => {\n+ it('should remove nulled out children and ignore new null children', async () => {\n const PROPS_SEQUENCE = [\n {\n usernameToStatus: {\n@@ -698,10 +757,10 @@ describe('ReactMultiChildReconcile', () => {\n },\n },\n ];\n- testPropsSequence(PROPS_SEQUENCE);\n+ await testPropsSequence(PROPS_SEQUENCE);\n });\n \n- it('should remove nulled out children and reorder remaining', () => {\n+ it('should remove nulled out children and reorder remaining', async () => {\n const PROPS_SEQUENCE = [\n {\n usernameToStatus: {\n@@ -719,10 +778,10 @@ describe('ReactMultiChildReconcile', () => {\n },\n },\n ];\n- testPropsSequence(PROPS_SEQUENCE);\n+ await testPropsSequence(PROPS_SEQUENCE);\n });\n \n- it('should append children to the end', () => {\n+ it('should append children to the end', async () => {\n const PROPS_SEQUENCE = [\n {\n usernameToStatus: {\n@@ -738,10 +797,10 @@ describe('ReactMultiChildReconcile', () => {\n },\n },\n ];\n- testPropsSequence(PROPS_SEQUENCE);\n+ await testPropsSequence(PROPS_SEQUENCE);\n });\n \n- it('should append multiple children to the end', () => {\n+ it('should append multiple children to the end', async () => {\n const PROPS_SEQUENCE = [\n {\n usernameToStatus: {\n@@ -758,10 +817,10 @@ describe('ReactMultiChildReconcile', () => {\n },\n },\n ];\n- testPropsSequence(PROPS_SEQUENCE);\n+ await testPropsSequence(PROPS_SEQUENCE);\n });\n \n- it('should prepend children to the beginning', () => {\n+ it('should prepend children to the beginning', async () => {\n const PROPS_SEQUENCE = [\n {\n usernameToStatus: {\n@@ -777,10 +836,10 @@ describe('ReactMultiChildReconcile', () => {\n },\n },\n ];\n- testPropsSequence(PROPS_SEQUENCE);\n+ await testPropsSequence(PROPS_SEQUENCE);\n });\n \n- it('should prepend multiple children to the beginning', () => {\n+ it('should prepend multiple children to the beginning', async () => {\n const PROPS_SEQUENCE = [\n {\n usernameToStatus: {\n@@ -797,10 +856,10 @@ describe('ReactMultiChildReconcile', () => {\n },\n },\n ];\n- testPropsSequence(PROPS_SEQUENCE);\n+ await testPropsSequence(PROPS_SEQUENCE);\n });\n \n- it('should not prepend an empty child to the beginning', () => {\n+ it('should not prepend an empty child to the beginning', async () => {\n const PROPS_SEQUENCE = [\n {\n usernameToStatus: {\n@@ -816,10 +875,10 @@ describe('ReactMultiChildReconcile', () => {\n },\n },\n ];\n- testPropsSequence(PROPS_SEQUENCE);\n+ await testPropsSequence(PROPS_SEQUENCE);\n });\n \n- it('should not append an empty child to the end', () => {\n+ it('should not append an empty child to the end', async () => {\n const PROPS_SEQUENCE = [\n {\n usernameToStatus: {\n@@ -835,10 +894,10 @@ describe('ReactMultiChildReconcile', () => {\n },\n },\n ];\n- testPropsSequence(PROPS_SEQUENCE);\n+ await testPropsSequence(PROPS_SEQUENCE);\n });\n \n- it('should not insert empty children in the middle', () => {\n+ it('should not insert empty children in the middle', async () => {\n const PROPS_SEQUENCE = [\n {\n usernameToStatus: {\n@@ -856,10 +915,10 @@ describe('ReactMultiChildReconcile', () => {\n },\n },\n ];\n- testPropsSequence(PROPS_SEQUENCE);\n+ await testPropsSequence(PROPS_SEQUENCE);\n });\n \n- it('should insert one new child in the middle', () => {\n+ it('should insert one new child in the middle', async () => {\n const PROPS_SEQUENCE = [\n {\n usernameToStatus: {\n@@ -875,10 +934,10 @@ describe('ReactMultiChildReconcile', () => {\n },\n },\n ];\n- testPropsSequence(PROPS_SEQUENCE);\n+ await testPropsSequence(PROPS_SEQUENCE);\n });\n \n- it('should insert multiple new truthy children in the middle', () => {\n+ it('should insert multiple new truthy children in the middle', async () => {\n const PROPS_SEQUENCE = [\n {\n usernameToStatus: {\n@@ -896,10 +955,10 @@ describe('ReactMultiChildReconcile', () => {\n },\n },\n ];\n- testPropsSequence(PROPS_SEQUENCE);\n+ await testPropsSequence(PROPS_SEQUENCE);\n });\n \n- it('should insert non-empty children in middle where nulls were', () => {\n+ it('should insert non-empty children in middle where nulls were', async () => {\n const PROPS_SEQUENCE = [\n {\n usernameToStatus: {\n@@ -920,6 +979,6 @@ describe('ReactMultiChildReconcile', () => {\n },\n },\n ];\n- testPropsSequence(PROPS_SEQUENCE);\n+ await testPropsSequence(PROPS_SEQUENCE);\n });\n });\n","body":"","commit":{"shortRevision":"214fe84f53","authorName":"Sebastian Silbermann","authorEmail":"silbermann.sebastian@gmail.com","authoredAt":"2024-02-04T15:44:46+01:00","subject":"Convert ReactMultiChildReconcile to createRoot (#28169)","revision":"214fe84f53c5ba9d40c3427b72c5e6fb9be830e5"}}

dillon1000/react

Files changed