{"patch":"diff --git a\/packages\/react-dom\/src\/__tests__\/ReactMultiChild-test.js b\/packages\/react-dom\/src\/__tests__\/ReactMultiChild-test.js\nindex d33d00275b..96413378f6 100644\n--- a\/packages\/react-dom\/src\/__tests__\/ReactMultiChild-test.js\n+++ b\/packages\/react-dom\/src\/__tests__\/ReactMultiChild-test.js\n@@ -11,17 +11,20 @@\n \n describe('ReactMultiChild', () => {\n let React;\n- let ReactDOM;\n+ let ReactDOMClient;\n+ let act;\n \n beforeEach(() => {\n jest.resetModules();\n React = require('react');\n- ReactDOM = require('react-dom');\n+ ReactDOMClient = require('react-dom\/client');\n+ act = require('internal-test-utils').act;\n });\n \n describe('reconciliation', () => {\n- it('should update children when possible', () => {\n+ it('should update children when possible', async () => {\n const container = document.createElement('div');\n+ const root = ReactDOMClient.createRoot(container);\n \n const mockMount = jest.fn();\n const mockUpdate = jest.fn();\n@@ -40,31 +43,34 @@ describe('ReactMultiChild', () => {\n expect(mockUpdate).toHaveBeenCalledTimes(0);\n expect(mockUnmount).toHaveBeenCalledTimes(0);\n \n- ReactDOM.render(\n-

\n- \n- <\/div>,\n- container,\n- );\n+ await act(async () => {\n+ root.render(\n+

\n+ \n+ <\/div>,\n+ );\n+ });\n \n expect(mockMount).toHaveBeenCalledTimes(1);\n expect(mockUpdate).toHaveBeenCalledTimes(0);\n expect(mockUnmount).toHaveBeenCalledTimes(0);\n \n- ReactDOM.render(\n-

\n- \n- <\/div>,\n- container,\n- );\n+ await act(async () => {\n+ root.render(\n+

\n+ \n+ <\/div>,\n+ );\n+ });\n \n expect(mockMount).toHaveBeenCalledTimes(1);\n expect(mockUpdate).toHaveBeenCalledTimes(1);\n expect(mockUnmount).toHaveBeenCalledTimes(0);\n });\n \n- it('should replace children with different constructors', () => {\n+ it('should replace children with different constructors', async () => {\n const container = document.createElement('div');\n+ const root = ReactDOMClient.createRoot(container);\n \n const mockMount = jest.fn();\n const mockUnmount = jest.fn();\n@@ -80,29 +86,32 @@ describe('ReactMultiChild', () => {\n expect(mockMount).toHaveBeenCalledTimes(0);\n expect(mockUnmount).toHaveBeenCalledTimes(0);\n \n- ReactDOM.render(\n-

\n- \n- <\/div>,\n- container,\n- );\n+ await act(async () => {\n+ root.render(\n+

\n+ \n+ <\/div>,\n+ );\n+ });\n \n expect(mockMount).toHaveBeenCalledTimes(1);\n expect(mockUnmount).toHaveBeenCalledTimes(0);\n \n- ReactDOM.render(\n-

\n- \n- <\/div>,\n- container,\n- );\n+ await act(async () => {\n+ root.render(\n+

\n+ \n+ <\/div>,\n+ );\n+ });\n \n expect(mockMount).toHaveBeenCalledTimes(1);\n expect(mockUnmount).toHaveBeenCalledTimes(1);\n });\n \n- it('should NOT replace children with different owners', () => {\n+ it('should NOT replace children with different owners', async () => {\n const container = document.createElement('div');\n+ const root = ReactDOMClient.createRoot(container);\n \n const mockMount = jest.fn();\n const mockUnmount = jest.fn();\n@@ -124,24 +133,28 @@ describe('ReactMultiChild', () => {\n expect(mockMount).toHaveBeenCalledTimes(0);\n expect(mockUnmount).toHaveBeenCalledTimes(0);\n \n- ReactDOM.render(, container);\n+ await act(async () => {\n+ root.render();\n+ });\n \n expect(mockMount).toHaveBeenCalledTimes(1);\n expect(mockUnmount).toHaveBeenCalledTimes(0);\n \n- ReactDOM.render(\n- \n- \n- <\/WrapperComponent>,\n- container,\n- );\n+ await act(async () => {\n+ root.render(\n+ \n+ \n+ <\/WrapperComponent>,\n+ );\n+ });\n \n expect(mockMount).toHaveBeenCalledTimes(1);\n expect(mockUnmount).toHaveBeenCalledTimes(0);\n });\n \n- it('should replace children with different keys', () => {\n+ it('should replace children with different keys', async () => {\n const container = document.createElement('div');\n+ const root = ReactDOMClient.createRoot(container);\n \n const mockMount = jest.fn();\n const mockUnmount = jest.fn();\n@@ -157,29 +170,32 @@ describe('ReactMultiChild', () => {\n expect(mockMount).toHaveBeenCalledTimes(0);\n expect(mockUnmount).toHaveBeenCalledTimes(0);\n \n- ReactDOM.render(\n-

\n- \n- <\/div>,\n- container,\n- );\n+ await act(async () => {\n+ root.render(\n+

\n+ \n+ <\/div>,\n+ );\n+ });\n \n expect(mockMount).toHaveBeenCalledTimes(1);\n expect(mockUnmount).toHaveBeenCalledTimes(0);\n \n- ReactDOM.render(\n-

\n- \n- <\/div>,\n- container,\n- );\n+ await act(async () => {\n+ root.render(\n+

\n+ \n+ <\/div>,\n+ );\n+ });\n \n expect(mockMount).toHaveBeenCalledTimes(2);\n expect(mockUnmount).toHaveBeenCalledTimes(1);\n });\n \n- it('should warn for duplicated array keys with component stack info', () => {\n+ it('should warn for duplicated array keys with component stack info', async () => {\n const container = document.createElement('div');\n+ const root = ReactDOMClient.createRoot(container);\n \n class WrapperComponent extends React.Component {\n render() {\n@@ -196,14 +212,15 @@ describe('ReactMultiChild', () => {\n );\n }\n }\n-\n- ReactDOM.render({[

]}<\/Parent>, container);\n-\n- expect(() =>\n- ReactDOM.render(\n- {[

]}<\/Parent>,\n- container,\n- ),\n+ await act(async () => {\n+ root.render({[

]}<\/Parent>);\n+ });\n+\n+ await expect(\n+ async () =>\n+ await act(async () => {\n+ root.render({[

]}<\/Parent>);\n+ }),\n ).toErrorDev(\n 'Encountered two children with the same key, `1`. ' +\n 'Keys should be unique so that components maintain their identity ' +\n@@ -217,8 +234,9 @@ describe('ReactMultiChild', () => {\n );\n });\n \n- it('should warn for duplicated iterable keys with component stack info', () => {\n+ it('should warn for duplicated iterable keys with component stack info', async () => {\n const container = document.createElement('div');\n+ const root = ReactDOMClient.createRoot(container);\n \n class WrapperComponent extends React.Component {\n render() {\n@@ -253,17 +271,19 @@ describe('ReactMultiChild', () => {\n },\n };\n }\n-\n- ReactDOM.render(\n- {createIterable([

])}<\/Parent>,\n- container,\n- );\n-\n- expect(() =>\n- ReactDOM.render(\n- {createIterable([

])}<\/Parent>,\n- container,\n- ),\n+ await act(async () => {\n+ root.render({createIterable([

])}<\/Parent>);\n+ });\n+\n+ await expect(\n+ async () =>\n+ await act(async () => {\n+ root.render(\n+ \n+ {createIterable([

])}\n+ <\/Parent>,\n+ );\n+ }),\n ).toErrorDev(\n 'Encountered two children with the same key, `1`. ' +\n 'Keys should be unique so that components maintain their identity ' +\n@@ -278,7 +298,7 @@ describe('ReactMultiChild', () => {\n });\n });\n \n- it('should warn for using maps as children with owner info', () => {\n+ it('should warn for using maps as children with owner info', async () => {\n class Parent extends React.Component {\n render() {\n return (\n@@ -294,7 +314,13 @@ describe('ReactMultiChild', () => {\n }\n }\n const container = document.createElement('div');\n- expect(() => ReactDOM.render(, container)).toErrorDev(\n+ const root = ReactDOMClient.createRoot(container);\n+ await expect(\n+ async () =>\n+ await act(async () => {\n+ root.render();\n+ }),\n+ ).toErrorDev(\n 'Using Maps as children is not supported. ' +\n 'Use an array of keyed ReactElements instead.\\n' +\n ' in div (at **)\\n' +\n@@ -302,15 +328,18 @@ describe('ReactMultiChild', () => {\n );\n });\n \n- it('should warn for using generators as children', () => {\n+ it('should warn for using generators as children', async () => {\n function* Foo() {\n yield

Hello<\/h1>;\n yield

World<\/h1>;\n }\n \n- const div = document.createElement('div');\n- expect(() => {\n- ReactDOM.render(, div);\n+ const container = document.createElement('div');\n+ const root = ReactDOMClient.createRoot(container);\n+ await expect(async () => {\n+ await act(async () => {\n+ root.render();\n+ });\n }).toErrorDev(\n 'Using Generators as children is unsupported and will likely yield ' +\n 'unexpected results because enumerating a generator mutates it. You may ' +\n@@ -320,10 +349,12 @@ describe('ReactMultiChild', () => {\n );\n \n \/\/ Test de-duplication\n- ReactDOM.render(, div);\n+ await act(async () => {\n+ root.render();\n+ });\n });\n \n- it('should not warn for using generators in legacy iterables', () => {\n+ it('should not warn for using generators in legacy iterables', async () => {\n const fooIterable = {\n '@@iterator': function* () {\n yield
Hello<\/h1>;\n@@ -335,15 +366,20 @@ describe('ReactMultiChild', () => {\n return fooIterable;\n }\n \n- const div = document.createElement('div');\n- ReactDOM.render(, div);\n- expect(div.textContent).toBe('HelloWorld');\n+ const container = document.createElement('div');\n+ const root = ReactDOMClient.createRoot(container);\n+ await act(async () => {\n+ root.render();\n+ });\n+ expect(container.textContent).toBe('HelloWorld');\n \n- ReactDOM.render(, div);\n- expect(div.textContent).toBe('HelloWorld');\n+ await act(async () => {\n+ root.render();\n+ });\n+ expect(container.textContent).toBe('HelloWorld');\n });\n \n- it('should not warn for using generators in modern iterables', () => {\n+ it('should not warn for using generators in modern iterables', async () => {\n const fooIterable = {\n [Symbol.iterator]: function* () {\n yield
Hello<\/h1>;\n@@ -356,14 +392,19 @@ describe('ReactMultiChild', () => {\n }\n \n const div = document.createElement('div');\n- ReactDOM.render(, div);\n+ const root = ReactDOMClient.createRoot(div);\n+ await act(async () => {\n+ root.render();\n+ });\n expect(div.textContent).toBe('HelloWorld');\n \n- ReactDOM.render(, div);\n+ await act(async () => {\n+ root.render();\n+ });\n expect(div.textContent).toBe('HelloWorld');\n });\n \n- it('should reorder bailed-out children', () => {\n+ it('should reorder bailed-out children', async () => {\n class LetterInner extends React.Component {\n render() {\n return
{this.props.char}<\/div>;\n@@ -393,15 +434,20 @@ describe('ReactMultiChild', () => {\n }\n \n const container = document.createElement('div');\n+ const root = ReactDOMClient.createRoot(container);\n \n \/\/ Two random strings -- some additions, some removals, some moves\n- ReactDOM.render(, container);\n+ await act(async () => {\n+ root.render();\n+ });\n expect(container.textContent).toBe('XKwHomsNjIkBcQWFbiZU');\n- ReactDOM.render(, container);\n+ await act(async () => {\n+ root.render();\n+ });\n expect(container.textContent).toBe('EHCjpdTUuiybDvhRJwZt');\n });\n \n- it('prepares new children before unmounting old', () => {\n+ it('prepares new children before unmounting old', async () => {\n const log = [];\n \n class Spy extends React.Component {\n@@ -426,20 +472,23 @@ describe('ReactMultiChild', () => {\n const SpyB = props => ;\n \n const container = document.createElement('div');\n- ReactDOM.render(\n-
\n- \n- \n- <\/div>,\n- container,\n- );\n- ReactDOM.render(\n-
\n- \n- \n- <\/div>,\n- container,\n- );\n+ const root = ReactDOMClient.createRoot(container);\n+ await act(async () => {\n+ root.render(\n+
\n+ \n+ \n+ <\/div>,\n+ );\n+ });\n+ await act(async () => {\n+ root.render(\n+
\n+ \n+ \n+ <\/div>,\n+ );\n+ });\n \n expect(log).toEqual([\n 'oneA componentWillMount',\n","parents":["8f998bf93fdc417ea9e8f99dedfe3a7c3d6e5bbc"],"files":[{"path":"packages\/react-dom\/src\/tests\/ReactMultiChild-test.js","status":"M"}],"commit":{"authoredAt":"2024-01-26T13:18:19-08:00","shortRevision":"759811b062","revision":"759811b0627384e5dde8ac81397cb2b8c7390298","subject":"Convert ReactMultiChild-test.js to createRoot (#28117)","authorEmail":"7158882+mattcarrollcode@users.noreply.github.com","authorName":"Matt Carroll"},"body":""}

dillon1000/react

Files changed