{"patch":"diff --git a\/packages\/react-dom\/src\/__tests__\/ReactDOMInput-test.js b\/packages\/react-dom\/src\/__tests__\/ReactDOMInput-test.js\nindex 6b8baaddbe..2ccd1c0436 100644\n--- a\/packages\/react-dom\/src\/__tests__\/ReactDOMInput-test.js\n+++ b\/packages\/react-dom\/src\/__tests__\/ReactDOMInput-test.js\n@@ -25,6 +25,7 @@ describe('ReactDOMInput', () => {\n let setUntrackedValue;\n let setUntrackedChecked;\n let container;\n+ let root;\n \n function dispatchEventOnNode(node, type) {\n node.dispatchEvent(new Event(type, {bubbles: true, cancelable: true}));\n@@ -99,6 +100,7 @@ describe('ReactDOMInput', () => {\n \n container = document.createElement('div');\n document.body.appendChild(container);\n+ root = ReactDOMClient.createRoot(container);\n });\n \n afterEach(() => {\n@@ -106,9 +108,11 @@ describe('ReactDOMInput', () => {\n jest.restoreAllMocks();\n });\n \n- it('should warn for controlled value of 0 with missing onChange', () => {\n- expect(() => {\n- ReactDOM.render(, container);\n+ it('should warn for controlled value of 0 with missing onChange', async () => {\n+ await expect(async () => {\n+ await act(() => {\n+ root.render();\n+ });\n }).toErrorDev(\n 'Warning: You provided a `value` prop to a form ' +\n 'field without an `onChange` handler. This will render a read-only ' +\n@@ -117,9 +121,11 @@ describe('ReactDOMInput', () => {\n );\n });\n \n- it('should warn for controlled value of \"\" with missing onChange', () => {\n- expect(() => {\n- ReactDOM.render(, container);\n+ it('should warn for controlled value of \"\" with missing onChange', async () => {\n+ await expect(async () => {\n+ await act(() => {\n+ root.render();\n+ });\n }).toErrorDev(\n 'Warning: You provided a `value` prop to a form ' +\n 'field without an `onChange` handler. This will render a read-only ' +\n@@ -128,9 +134,11 @@ describe('ReactDOMInput', () => {\n );\n });\n \n- it('should warn for controlled value of \"0\" with missing onChange', () => {\n- expect(() => {\n- ReactDOM.render(, container);\n+ it('should warn for controlled value of \"0\" with missing onChange', async () => {\n+ await expect(async () => {\n+ await act(() => {\n+ root.render();\n+ });\n }).toErrorDev(\n 'Warning: You provided a `value` prop to a form ' +\n 'field without an `onChange` handler. This will render a read-only ' +\n@@ -139,72 +147,95 @@ describe('ReactDOMInput', () => {\n );\n });\n \n- it('should warn for controlled value of false with missing onChange', () => {\n- expect(() =>\n- ReactDOM.render(, container),\n- ).toErrorDev(\n+ it('should warn for controlled value of false with missing onChange', async () => {\n+ await expect(async () => {\n+ await act(() => {\n+ root.render();\n+ });\n+ }).toErrorDev(\n 'Warning: You provided a `checked` prop to a form field without an `onChange` handler.',\n );\n });\n \n- it('should warn with checked and no onChange handler with readOnly specified', () => {\n- ReactDOM.render(\n- ,\n- container,\n- );\n- ReactDOM.unmountComponentAtNode(container);\n+ it('should warn with checked and no onChange handler with readOnly specified', async () => {\n+ await act(() => {\n+ root.render();\n+ });\n+ root.unmount();\n+ root = ReactDOMClient.createRoot(container);\n \n- expect(() =>\n- ReactDOM.render(\n- ,\n- container,\n- ),\n- ).toErrorDev(\n+ await expect(async () => {\n+ await act(() => {\n+ root.render();\n+ });\n+ }).toErrorDev(\n 'Warning: You provided a `checked` prop to a form field without an `onChange` handler. ' +\n 'This will render a read-only field. If the field should be mutable use `defaultChecked`. ' +\n 'Otherwise, set either `onChange` or `readOnly`.',\n );\n });\n \n- it('should not warn about missing onChange in uncontrolled inputs', () => {\n- ReactDOM.render(, container);\n- ReactDOM.unmountComponentAtNode(container);\n- ReactDOM.render(, container);\n- ReactDOM.unmountComponentAtNode(container);\n- ReactDOM.render(, container);\n- ReactDOM.unmountComponentAtNode(container);\n- ReactDOM.render(, container);\n- ReactDOM.unmountComponentAtNode(container);\n- ReactDOM.render(, container);\n- ReactDOM.unmountComponentAtNode(container);\n- ReactDOM.render(, container);\n+ it('should not warn about missing onChange in uncontrolled inputs', async () => {\n+ await act(() => {\n+ root.render();\n+ });\n+ root.unmount();\n+ root = ReactDOMClient.createRoot(container);\n+ await act(() => {\n+ root.render();\n+ });\n+ root.unmount();\n+ root = ReactDOMClient.createRoot(container);\n+ await act(() => {\n+ root.render();\n+ });\n+ root.unmount();\n+ root = ReactDOMClient.createRoot(container);\n+ await act(() => {\n+ root.render();\n+ });\n+ root.unmount();\n+ root = ReactDOMClient.createRoot(container);\n+ await act(() => {\n+ root.render();\n+ });\n+ root.unmount();\n+ root = ReactDOMClient.createRoot(container);\n+ await act(() => {\n+ root.render();\n+ });\n });\n \n- it('should not warn with value and onInput handler', () => {\n- ReactDOM.render( {}} \/>, container);\n+ it('should not warn with value and onInput handler', async () => {\n+ await act(() => {\n+ root.render( {}} \/>);\n+ });\n });\n \n- it('should properly control a value even if no event listener exists', () => {\n- let node;\n-\n- expect(() => {\n- node = ReactDOM.render(, container);\n+ it('should properly control a value even if no event listener exists', async () => {\n+ await expect(async () => {\n+ await act(() => {\n+ root.render();\n+ });\n }).toErrorDev(\n 'Warning: You provided a `value` prop to a form field without an `onChange` handler.',\n );\n+ const node = container.firstChild;\n expect(isValueDirty(node)).toBe(true);\n \n setUntrackedValue.call(node, 'giraffe');\n \n \/\/ This must use the native event dispatching. If we simulate, we will\n \/\/ bypass the lazy event attachment system so we won't actually test this.\n- dispatchEventOnNode(node, 'input');\n+ await act(() => {\n+ dispatchEventOnNode(node, 'input');\n+ });\n \n expect(node.value).toBe('lion');\n expect(isValueDirty(node)).toBe(true);\n });\n \n- it('should control a value in reentrant events', () => {\n+ it('should control a value in reentrant events', async () => {\n class ControlledInputs extends React.Component {\n state = {value: 'lion'};\n a = null;\n@@ -240,23 +271,35 @@ describe('ReactDOMInput', () => {\n }\n }\n \n- const instance = ReactDOM.render(, container);\n+ const ref = React.createRef();\n+ await act(() => {\n+ root.render();\n+ });\n+ const instance = ref.current;\n \n \/\/ Focus the field so we can later blur it.\n \/\/ Don't remove unless you've verified the fix in #8240 is still covered.\n- instance.a.focus();\n+ await act(() => {\n+ instance.a.focus();\n+ });\n setUntrackedValue.call(instance.a, 'giraffe');\n \/\/ This must use the native event dispatching. If we simulate, we will\n \/\/ bypass the lazy event attachment system so we won't actually test this.\n- dispatchEventOnNode(instance.a, 'input');\n- dispatchEventOnNode(instance.a, 'blur');\n- dispatchEventOnNode(instance.a, 'focusout');\n+ await act(() => {\n+ dispatchEventOnNode(instance.a, 'input');\n+ });\n+ await act(() => {\n+ dispatchEventOnNode(instance.a, 'blur');\n+ });\n+ await act(() => {\n+ dispatchEventOnNode(instance.a, 'focusout');\n+ });\n \n expect(instance.a.value).toBe('giraffe');\n expect(instance.switchedFocus).toBe(true);\n });\n \n- it('should control values in reentrant events with different targets', () => {\n+ it('should control values in reentrant events with different targets', async () => {\n class ControlledInputs extends React.Component {\n state = {value: 'lion'};\n a = null;\n@@ -288,21 +331,29 @@ describe('ReactDOMInput', () => {\n }\n }\n \n- const instance = ReactDOM.render(, container);\n+ const ref = React.createRef();\n+ await act(() => {\n+ root.render();\n+ });\n+ const instance = ref.current;\n \n setUntrackedValue.call(instance.a, 'giraffe');\n \/\/ This must use the native event dispatching. If we simulate, we will\n \/\/ bypass the lazy event attachment system so we won't actually test this.\n- dispatchEventOnNode(instance.a, 'input');\n+ await act(() => {\n+ dispatchEventOnNode(instance.a, 'input');\n+ });\n \n expect(instance.a.value).toBe('lion');\n expect(instance.b.checked).toBe(true);\n });\n \n describe('switching text inputs between numeric and string numbers', () => {\n- it('does change the number 2 to \"2.0\" with no change handler', () => {\n- const stub = ;\n- const node = ReactDOM.render(stub, container);\n+ it('does change the number 2 to \"2.0\" with no change handler', async () => {\n+ await act(() => {\n+ root.render();\n+ });\n+ const node = container.firstChild;\n \n setUntrackedValue.call(node, '2.0');\n dispatchEventOnNode(node, 'input');\n@@ -315,9 +366,11 @@ describe('ReactDOMInput', () => {\n }\n });\n \n- it('does change the string \"2\" to \"2.0\" with no change handler', () => {\n- const stub = ;\n- const node = ReactDOM.render(stub, container);\n+ it('does change the string \"2\" to \"2.0\" with no change handler', async () => {\n+ await act(() => {\n+ root.render();\n+ });\n+ const node = container.firstChild;\n \n setUntrackedValue.call(node, '2.0');\n dispatchEventOnNode(node, 'input');\n@@ -330,7 +383,7 @@ describe('ReactDOMInput', () => {\n }\n });\n \n- it('changes the number 2 to \"2.0\" using a change handler', () => {\n+ it('changes the number 2 to \"2.0\" using a change handler', async () => {\n class Stub extends React.Component {\n state = {\n value: 2,\n@@ -345,8 +398,10 @@ describe('ReactDOMInput', () => {\n }\n }\n \n- const stub = ReactDOM.render(, container);\n- const node = ReactDOM.findDOMNode(stub);\n+ await act(() => {\n+ root.render();\n+ });\n+ const node = container.firstChild;\n \n setUntrackedValue.call(node, '2.0');\n dispatchEventOnNode(node, 'input');\n@@ -360,7 +415,7 @@ describe('ReactDOMInput', () => {\n });\n });\n \n- it('does change the string \".98\" to \"0.98\" with no change handler', () => {\n+ it('does change the string \".98\" to \"0.98\" with no change handler', async () => {\n class Stub extends React.Component {\n state = {\n value: '.98',\n@@ -370,20 +425,24 @@ describe('ReactDOMInput', () => {\n }\n }\n \n- let stub;\n- expect(() => {\n- stub = ReactDOM.render(, container);\n+ const ref = React.createRef();\n+ await expect(async () => {\n+ await act(() => {\n+ root.render();\n+ });\n }).toErrorDev(\n 'You provided a `value` prop to a form field ' +\n 'without an `onChange` handler.',\n );\n- const node = ReactDOM.findDOMNode(stub);\n- stub.setState({value: '0.98'});\n+ const node = container.firstChild;\n+ await act(() => {\n+ ref.current.setState({value: '0.98'});\n+ });\n \n expect(node.value).toEqual('0.98');\n });\n \n- it('performs a state change from \"\" to 0', () => {\n+ it('performs a state change from \"\" to 0', async () => {\n class Stub extends React.Component {\n state = {\n value: '',\n@@ -393,40 +452,43 @@ describe('ReactDOMInput', () => {\n }\n }\n \n- const stub = ReactDOM.render(, container);\n- const node = ReactDOM.findDOMNode(stub);\n- stub.setState({value: 0});\n+ const ref = React.createRef();\n+ await act(() => {\n+ root.render();\n+ });\n+ const node = container.firstChild;\n+ await act(() => {\n+ ref.current.setState({value: 0});\n+ });\n \n expect(node.value).toEqual('0');\n });\n \n- it('updates the value on radio buttons from \"\" to 0', function () {\n- ReactDOM.render(\n- ,\n- container,\n- );\n- ReactDOM.render(\n- ,\n- container,\n- );\n+ it('updates the value on radio buttons from \"\" to 0', async () => {\n+ await act(() => {\n+ root.render();\n+ });\n+ await act(() => {\n+ root.render();\n+ });\n expect(container.firstChild.value).toBe('0');\n expect(container.firstChild.getAttribute('value')).toBe('0');\n });\n \n- it('updates the value on checkboxes from \"\" to 0', function () {\n- ReactDOM.render(\n- ,\n- container,\n- );\n- ReactDOM.render(\n- ,\n- container,\n- );\n+ it('updates the value on checkboxes from \"\" to 0', async () => {\n+ await act(() => {\n+ root.render();\n+ });\n+ await act(() => {\n+ root.render(\n+ ,\n+ );\n+ });\n expect(container.firstChild.value).toBe('0');\n expect(container.firstChild.getAttribute('value')).toBe('0');\n });\n \n- it('distinguishes precision for extra zeroes in string number values', () => {\n+ it('distinguishes precision for extra zeroes in string number values', async () => {\n class Stub extends React.Component {\n state = {\n value: '3.0000',\n@@ -436,37 +498,45 @@ describe('ReactDOMInput', () => {\n }\n }\n \n- let stub;\n-\n- expect(() => {\n- stub = ReactDOM.render(, container);\n+ const ref = React.createRef();\n+ await expect(async () => {\n+ await act(() => {\n+ root.render();\n+ });\n }).toErrorDev(\n 'You provided a `value` prop to a form field ' +\n 'without an `onChange` handler.',\n );\n- const node = ReactDOM.findDOMNode(stub);\n- stub.setState({value: '3'});\n+ const node = container.firstChild;\n+ await act(() => {\n+ ref.current.setState({value: '3'});\n+ });\n \n expect(node.value).toEqual('3');\n });\n \n- it('should display `defaultValue` of number 0', () => {\n- const stub = ;\n- const node = ReactDOM.render(stub, container);\n+ it('should display `defaultValue` of number 0', async () => {\n+ await act(() => {\n+ root.render();\n+ });\n+ const node = container.firstChild;\n \n expect(node.getAttribute('value')).toBe('0');\n expect(node.value).toBe('0');\n });\n \n- it('only assigns defaultValue if it changes', () => {\n+ it('only assigns defaultValue if it changes', async () => {\n class Test extends React.Component {\n render() {\n return ;\n }\n }\n \n- const component = ReactDOM.render(, container);\n- const node = ReactDOM.findDOMNode(component);\n+ const ref = React.createRef();\n+ await act(() => {\n+ root.render();\n+ });\n+ const node = container.firstChild;\n \n Object.defineProperty(node, 'defaultValue', {\n get() {\n@@ -479,28 +549,36 @@ describe('ReactDOMInput', () => {\n },\n });\n \n- component.forceUpdate();\n+ await act(() => {\n+ ref.current.forceUpdate();\n+ });\n });\n \n- it('should display \"true\" for `defaultValue` of `true`', () => {\n+ it('should display \"true\" for `defaultValue` of `true`', async () => {\n const stub = ;\n- const node = ReactDOM.render(stub, container);\n+ await act(() => {\n+ root.render(stub);\n+ });\n+ const node = container.firstChild;\n \n expect(node.value).toBe('true');\n });\n \n- it('should display \"false\" for `defaultValue` of `false`', () => {\n+ it('should display \"false\" for `defaultValue` of `false`', async () => {\n const stub = ;\n- const node = ReactDOM.render(stub, container);\n+ await act(() => {\n+ root.render(stub);\n+ });\n+ const node = container.firstChild;\n \n expect(node.value).toBe('false');\n });\n \n- it('should update `defaultValue` for uncontrolled input', () => {\n- const node = ReactDOM.render(\n- ,\n- container,\n- );\n+ it('should update `defaultValue` for uncontrolled input', async () => {\n+ await act(() => {\n+ root.render();\n+ });\n+ const node = container.firstChild;\n \n expect(node.value).toBe('0');\n expect(node.defaultValue).toBe('0');\n@@ -510,7 +588,9 @@ describe('ReactDOMInput', () => {\n expect(isValueDirty(node)).toBe(true);\n }\n \n- ReactDOM.render(, container);\n+ await act(() => {\n+ root.render();\n+ });\n \n if (disableInputAttributeSyncing) {\n expect(node.value).toBe('1');\n@@ -523,16 +603,18 @@ describe('ReactDOMInput', () => {\n }\n });\n \n- it('should update `defaultValue` for uncontrolled date\/time input', () => {\n- const node = ReactDOM.render(\n- ,\n- container,\n- );\n+ it('should update `defaultValue` for uncontrolled date\/time input', async () => {\n+ await act(() => {\n+ root.render();\n+ });\n+ const node = container.firstChild;\n \n expect(node.value).toBe('1980-01-01');\n expect(node.defaultValue).toBe('1980-01-01');\n \n- ReactDOM.render(, container);\n+ await act(() => {\n+ root.render();\n+ });\n \n if (disableInputAttributeSyncing) {\n expect(node.value).toBe('2000-01-01');\n@@ -542,19 +624,23 @@ describe('ReactDOMInput', () => {\n expect(node.defaultValue).toBe('2000-01-01');\n }\n \n- ReactDOM.render(, container);\n+ await act(() => {\n+ root.render();\n+ });\n });\n \n- it('should take `defaultValue` when changing to uncontrolled input', () => {\n- const node = ReactDOM.render(\n- ,\n- container,\n- );\n+ it('should take `defaultValue` when changing to uncontrolled input', async () => {\n+ await act(() => {\n+ root.render();\n+ });\n+ const node = container.firstChild;\n expect(node.value).toBe('0');\n expect(isValueDirty(node)).toBe(true);\n- expect(() =>\n- ReactDOM.render(, container),\n- ).toErrorDev(\n+ await expect(async () => {\n+ await act(() => {\n+ root.render();\n+ });\n+ }).toErrorDev(\n 'A component is changing a controlled input to be uncontrolled.',\n );\n expect(node.value).toBe('0');\n@@ -580,8 +666,11 @@ describe('ReactDOMInput', () => {\n expect(div.firstChild.getAttribute('defaultValue')).toBe(null);\n });\n \n- it('should render name attribute if it is supplied', () => {\n- const node = ReactDOM.render(, container);\n+ it('should render name attribute if it is supplied', async () => {\n+ await act(() => {\n+ root.render();\n+ });\n+ const node = container.firstChild;\n expect(node.name).toBe('name');\n expect(container.firstChild.getAttribute('name')).toBe('name');\n });\n@@ -594,8 +683,10 @@ describe('ReactDOMInput', () => {\n expect(div.firstChild.getAttribute('name')).toBe('name');\n });\n \n- it('should not render name attribute if it is not supplied', () => {\n- ReactDOM.render(, container);\n+ it('should not render name attribute if it is not supplied', async () => {\n+ await act(() => {\n+ root.render();\n+ });\n expect(container.firstChild.getAttribute('name')).toBe(null);\n });\n \n@@ -607,7 +698,7 @@ describe('ReactDOMInput', () => {\n expect(div.firstChild.getAttribute('name')).toBe(null);\n });\n \n- it('should display \"foobar\" for `defaultValue` of `objToString`', () => {\n+ it('should display \"foobar\" for `defaultValue` of `objToString`', async () => {\n const objToString = {\n toString: function () {\n return 'foobar';\n@@ -615,7 +706,10 @@ describe('ReactDOMInput', () => {\n };\n \n const stub = ;\n- const node = ReactDOM.render(stub, container);\n+ await act(() => {\n+ root.render(stub);\n+ });\n+ const node = container.firstChild;\n \n expect(node.value).toBe('foobar');\n });\n@@ -631,10 +725,12 @@ describe('ReactDOMInput', () => {\n return '2020-01-01';\n }\n }\n+ const legacyContainer = document.createElement('div');\n+ document.body.appendChild(legacyContainer);\n const test = () =>\n ReactDOM.render(\n ,\n- container,\n+ legacyContainer,\n );\n expect(() =>\n expect(test).toThrowError(new TypeError('prod message')),\n@@ -644,7 +740,7 @@ describe('ReactDOMInput', () => {\n );\n });\n \n- it('should throw for text inputs if `defaultValue` is an object where valueOf() throws', () => {\n+ it('should throw for text inputs if `defaultValue` is an object where valueOf() throws', async () => {\n class TemporalLike {\n valueOf() {\n \/\/ Throwing here is the behavior of ECMAScript \"Temporal\" date\/time API.\n@@ -655,20 +751,19 @@ describe('ReactDOMInput', () => {\n return '2020-01-01';\n }\n }\n- const test = () =>\n- ReactDOM.render(\n- ,\n- container,\n+ await expect(async () => {\n+ await expect(async () => {\n+ await act(() => {\n+ root.render();\n+ });\n+ }).toErrorDev(\n+ 'Form field values (value, checked, defaultValue, or defaultChecked props) must be ' +\n+ 'strings, not TemporalLike. This value must be coerced to a string before using it here.',\n );\n- expect(() =>\n- expect(test).toThrowError(new TypeError('prod message')),\n- ).toErrorDev(\n- 'Form field values (value, checked, defaultValue, or defaultChecked props) must be ' +\n- 'strings, not TemporalLike. This value must be coerced to a string before using it here.',\n- );\n+ }).rejects.toThrowError(new TypeError('prod message'));\n });\n \n- it('should throw for date inputs if `value` is an object where valueOf() throws', () => {\n+ it('should throw for date inputs if `value` is an object where valueOf() throws', async () => {\n class TemporalLike {\n valueOf() {\n \/\/ Throwing here is the behavior of ECMAScript \"Temporal\" date\/time API.\n@@ -679,20 +774,25 @@ describe('ReactDOMInput', () => {\n return '2020-01-01';\n }\n }\n- const test = () =>\n- ReactDOM.render(\n- {}} \/>,\n- container,\n+ await expect(async () => {\n+ await expect(async () => {\n+ await act(() => {\n+ root.render(\n+ {}}\n+ \/>,\n+ );\n+ });\n+ }).toErrorDev(\n+ 'Form field values (value, checked, defaultValue, or defaultChecked props) must be ' +\n+ 'strings, not TemporalLike. This value must be coerced to a string before using it here.',\n );\n- expect(() =>\n- expect(test).toThrowError(new TypeError('prod message')),\n- ).toErrorDev(\n- 'Form field values (value, checked, defaultValue, or defaultChecked props) must be ' +\n- 'strings, not TemporalLike. This value must be coerced to a string before using it here.',\n- );\n+ }).rejects.toThrowError(new TypeError('prod message'));\n });\n \n- it('should throw for text inputs if `value` is an object where valueOf() throws', () => {\n+ it('should throw for text inputs if `value` is an object where valueOf() throws', async () => {\n class TemporalLike {\n valueOf() {\n \/\/ Throwing here is the behavior of ECMAScript \"Temporal\" date\/time API.\n@@ -703,55 +803,66 @@ describe('ReactDOMInput', () => {\n return '2020-01-01';\n }\n }\n- const test = () =>\n- ReactDOM.render(\n- {}} \/>,\n- container,\n+ await expect(async () => {\n+ await expect(async () => {\n+ await act(() => {\n+ root.render(\n+ {}}\n+ \/>,\n+ );\n+ });\n+ }).toErrorDev(\n+ 'Form field values (value, checked, defaultValue, or defaultChecked props) must be ' +\n+ 'strings, not TemporalLike. This value must be coerced to a string before using it here.',\n );\n- expect(() =>\n- expect(test).toThrowError(new TypeError('prod message')),\n- ).toErrorDev(\n- 'Form field values (value, checked, defaultValue, or defaultChecked props) must be ' +\n- 'strings, not TemporalLike. This value must be coerced to a string before using it here.',\n- );\n+ }).rejects.toThrowError(new TypeError('prod message'));\n });\n \n- it('should display `value` of number 0', () => {\n- const stub = ;\n- const node = ReactDOM.render(stub, container);\n+ it('should display `value` of number 0', async () => {\n+ await act(() => {\n+ root.render();\n+ });\n+ const node = container.firstChild;\n \n expect(node.value).toBe('0');\n });\n \n- it('should allow setting `value` to `true`', () => {\n- let stub = ;\n- const node = ReactDOM.render(stub, container);\n+ it('should allow setting `value` to `true`', async () => {\n+ await act(() => {\n+ root.render();\n+ });\n+ const node = container.firstChild;\n \n expect(node.value).toBe('yolo');\n \n- stub = ReactDOM.render(\n- ,\n- container,\n- );\n+ await act(() => {\n+ root.render();\n+ });\n expect(node.value).toEqual('true');\n });\n \n- it('should allow setting `value` to `false`', () => {\n- let stub = ;\n- const node = ReactDOM.render(stub, container);\n+ it('should allow setting `value` to `false`', async () => {\n+ await act(() => {\n+ root.render();\n+ });\n+ const node = container.firstChild;\n \n expect(node.value).toBe('yolo');\n \n- stub = ReactDOM.render(\n- ,\n- container,\n- );\n+ await act(() => {\n+ root.render();\n+ });\n expect(node.value).toEqual('false');\n });\n \n- it('should allow setting `value` to `objToString`', () => {\n- let stub = ;\n- const node = ReactDOM.render(stub, container);\n+ it('should allow setting `value` to `objToString`', async () => {\n+ await act(() => {\n+ root.render();\n+ });\n+ const node = container.firstChild;\n \n expect(node.value).toBe('foo');\n \n@@ -760,15 +871,18 @@ describe('ReactDOMInput', () => {\n return 'foobar';\n },\n };\n- stub = ReactDOM.render(\n- ,\n- container,\n- );\n+ await act(() => {\n+ root.render(\n+ ,\n+ );\n+ });\n expect(node.value).toEqual('foobar');\n });\n \n- it('should not incur unnecessary DOM mutations', () => {\n- ReactDOM.render( {}} \/>, container);\n+ it('should not incur unnecessary DOM mutations', async () => {\n+ await act(() => {\n+ root.render( {}} \/>);\n+ });\n \n const node = container.firstChild;\n let nodeValue = 'a';\n@@ -782,15 +896,21 @@ describe('ReactDOMInput', () => {\n }),\n });\n \n- ReactDOM.render( {}} \/>, container);\n+ await act(() => {\n+ root.render( {}} \/>);\n+ });\n expect(nodeValueSetter).toHaveBeenCalledTimes(0);\n \n- ReactDOM.render( {}} \/>, container);\n+ await act(() => {\n+ root.render( {}} \/>);\n+ });\n expect(nodeValueSetter).toHaveBeenCalledTimes(1);\n });\n \n- it('should not incur unnecessary DOM mutations for numeric type conversion', () => {\n- ReactDOM.render( {}} \/>, container);\n+ it('should not incur unnecessary DOM mutations for numeric type conversion', async () => {\n+ await act(() => {\n+ root.render( {}} \/>);\n+ });\n \n const node = container.firstChild;\n let nodeValue = '0';\n@@ -804,12 +924,16 @@ describe('ReactDOMInput', () => {\n }),\n });\n \n- ReactDOM.render( {}} \/>, container);\n+ await act(() => {\n+ root.render( {}} \/>);\n+ });\n expect(nodeValueSetter).toHaveBeenCalledTimes(0);\n });\n \n- it('should not incur unnecessary DOM mutations for the boolean type conversion', () => {\n- ReactDOM.render( {}} \/>, container);\n+ it('should not incur unnecessary DOM mutations for the boolean type conversion', async () => {\n+ await act(() => {\n+ root.render( {}} \/>);\n+ });\n \n const node = container.firstChild;\n let nodeValue = 'true';\n@@ -823,34 +947,46 @@ describe('ReactDOMInput', () => {\n }),\n });\n \n- ReactDOM.render( {}} \/>, container);\n+ await act(() => {\n+ root.render( {}} \/>);\n+ });\n expect(nodeValueSetter).toHaveBeenCalledTimes(0);\n });\n \n- it('should properly control a value of number `0`', () => {\n- const stub = ;\n- const node = ReactDOM.render(stub, container);\n+ it('should properly control a value of number `0`', async () => {\n+ await act(() => {\n+ root.render();\n+ });\n+ const node = container.firstChild;\n \n setUntrackedValue.call(node, 'giraffe');\n dispatchEventOnNode(node, 'input');\n expect(node.value).toBe('0');\n });\n \n- it('should properly control 0.0 for a text input', () => {\n- const stub = ;\n- const node = ReactDOM.render(stub, container);\n+ it('should properly control 0.0 for a text input', async () => {\n+ await act(() => {\n+ root.render();\n+ });\n+ const node = container.firstChild;\n \n setUntrackedValue.call(node, '0.0');\n- dispatchEventOnNode(node, 'input');\n+ await act(() => {\n+ dispatchEventOnNode(node, 'input');\n+ });\n expect(node.value).toBe('0');\n });\n \n- it('should properly control 0.0 for a number input', () => {\n- const stub = ;\n- const node = ReactDOM.render(stub, container);\n+ it('should properly control 0.0 for a number input', async () => {\n+ await act(() => {\n+ root.render();\n+ });\n+ const node = container.firstChild;\n \n setUntrackedValue.call(node, '0.0');\n- dispatchEventOnNode(node, 'input');\n+ await act(() => {\n+ dispatchEventOnNode(node, 'input');\n+ });\n \n if (disableInputAttributeSyncing) {\n expect(node.value).toBe('0.0');\n@@ -864,18 +1000,16 @@ describe('ReactDOMInput', () => {\n }\n });\n \n- it('should properly transition from an empty value to 0', function () {\n- ReactDOM.render(\n- ,\n- container,\n- );\n+ it('should properly transition from an empty value to 0', async () => {\n+ await act(() => {\n+ root.render();\n+ });\n const node = container.firstChild;\n expect(isValueDirty(node)).toBe(false);\n \n- ReactDOM.render(\n- ,\n- container,\n- );\n+ await act(() => {\n+ root.render();\n+ });\n \n expect(node.value).toBe('0');\n expect(isValueDirty(node)).toBe(true);\n@@ -887,33 +1021,29 @@ describe('ReactDOMInput', () => {\n }\n });\n \n- it('should properly transition from 0 to an empty value', function () {\n- ReactDOM.render(\n- ,\n- container,\n- );\n+ it('should properly transition from 0 to an empty value', async () => {\n+ await act(() => {\n+ root.render();\n+ });\n const node = container.firstChild;\n expect(isValueDirty(node)).toBe(true);\n \n- ReactDOM.render(\n- ,\n- container,\n- );\n+ await act(() => {\n+ root.render();\n+ });\n \n expect(node.value).toBe('');\n expect(node.defaultValue).toBe('');\n expect(isValueDirty(node)).toBe(true);\n });\n \n- it('should properly transition a text input from 0 to an empty 0.0', function () {\n- ReactDOM.render(\n- ,\n- container,\n- );\n- ReactDOM.render(\n- ,\n- container,\n- );\n+ it('should properly transition a text input from 0 to an empty 0.0', async () => {\n+ await act(() => {\n+ root.render();\n+ });\n+ await act(() => {\n+ root.render();\n+ });\n \n const node = container.firstChild;\n \n@@ -925,15 +1055,13 @@ describe('ReactDOMInput', () => {\n }\n });\n \n- it('should properly transition a number input from \"\" to 0', function () {\n- ReactDOM.render(\n- ,\n- container,\n- );\n- ReactDOM.render(\n- ,\n- container,\n- );\n+ it('should properly transition a number input from \"\" to 0', async () => {\n+ await act(() => {\n+ root.render();\n+ });\n+ await act(() => {\n+ root.render();\n+ });\n \n const node = container.firstChild;\n \n@@ -945,15 +1073,13 @@ describe('ReactDOMInput', () => {\n }\n });\n \n- it('should properly transition a number input from \"\" to \"0\"', function () {\n- ReactDOM.render(\n- ,\n- container,\n- );\n- ReactDOM.render(\n- ,\n- container,\n- );\n+ it('should properly transition a number input from \"\" to \"0\"', async () => {\n+ await act(() => {\n+ root.render();\n+ });\n+ await act(() => {\n+ root.render();\n+ });\n \n const node = container.firstChild;\n \n@@ -965,31 +1091,36 @@ describe('ReactDOMInput', () => {\n }\n });\n \n- it('should have the correct target value', () => {\n+ it('should have the correct target value', async () => {\n let handled = false;\n const handler = function (event) {\n expect(event.target.nodeName).toBe('INPUT');\n handled = true;\n };\n- const stub = ;\n- const node = ReactDOM.render(stub, container);\n+ await act(() => {\n+ root.render();\n+ });\n+ const node = container.firstChild;\n \n setUntrackedValue.call(node, 'giraffe');\n \n- dispatchEventOnNode(node, 'input');\n+ await act(() => {\n+ dispatchEventOnNode(node, 'input');\n+ });\n \n expect(handled).toBe(true);\n });\n \n- it('should restore uncontrolled inputs to last defaultValue upon reset', () => {\n+ it('should restore uncontrolled inputs to last defaultValue upon reset', async () => {\n const inputRef = React.createRef();\n- ReactDOM.render(\n-

\n- \n- \n- <\/form>,\n- container,\n- );\n+ await act(() => {\n+ root.render(\n+ \n+ \n+ \n+ <\/form>,\n+ );\n+ });\n expect(inputRef.current.value).toBe('default1');\n if (disableInputAttributeSyncing) {\n expect(isValueDirty(inputRef.current)).toBe(false);\n@@ -1002,13 +1133,14 @@ describe('ReactDOMInput', () => {\n expect(inputRef.current.value).toBe('changed');\n expect(isValueDirty(inputRef.current)).toBe(true);\n \n- ReactDOM.render(\n- \n- \n- \n- <\/form>,\n- container,\n- );\n+ await act(() => {\n+ root.render(\n+ \n+ \n+ \n+ <\/form>,\n+ );\n+ });\n expect(inputRef.current.value).toBe('changed');\n expect(isValueDirty(inputRef.current)).toBe(true);\n \n@@ -1020,9 +1152,11 @@ describe('ReactDOMInput', () => {\n expect(isValueDirty(inputRef.current)).toBe(false);\n });\n \n- it('should not set a value for submit buttons unnecessarily', () => {\n+ it('should not set a value for submit buttons unnecessarily', async () => {\n const stub = ;\n- ReactDOM.render(stub, container);\n+ await act(() => {\n+ root.render(stub);\n+ });\n const node = container.firstChild;\n \n \/\/ The value shouldn't be '', or else the button will have no text; it\n@@ -1032,18 +1166,21 @@ describe('ReactDOMInput', () => {\n expect(node.hasAttribute('value')).toBe(false);\n });\n \n- it('should remove the value attribute on submit inputs when value is updated to undefined', () => {\n+ it('should remove the value attribute on submit inputs when value is updated to undefined', async () => {\n const stub = ;\n- ReactDOM.render(stub, container);\n+ await act(() => {\n+ root.render(stub);\n+ });\n \n \/\/ Not really relevant to this particular test, but changing to undefined\n \/\/ should nonetheless trigger a warning\n- expect(() =>\n- ReactDOM.render(\n- ,\n- container,\n- ),\n- ).toErrorDev(\n+ await expect(async () => {\n+ await act(() => {\n+ root.render(\n+ ,\n+ );\n+ });\n+ }).toErrorDev(\n 'A component is changing a controlled input to be uncontrolled.',\n );\n \n@@ -1051,18 +1188,21 @@ describe('ReactDOMInput', () => {\n expect(node.getAttribute('value')).toBe(null);\n });\n \n- it('should remove the value attribute on reset inputs when value is updated to undefined', () => {\n+ it('should remove the value attribute on reset inputs when value is updated to undefined', async () => {\n const stub = ;\n- ReactDOM.render(stub, container);\n+ await act(() => {\n+ root.render(stub);\n+ });\n \n \/\/ Not really relevant to this particular test, but changing to undefined\n \/\/ should nonetheless trigger a warning\n- expect(() =>\n- ReactDOM.render(\n- ,\n- container,\n- ),\n- ).toErrorDev(\n+ await expect(async () => {\n+ await act(() => {\n+ root.render(\n+ ,\n+ );\n+ });\n+ }).toErrorDev(\n 'A component is changing a controlled input to be uncontrolled.',\n );\n \n@@ -1070,44 +1210,56 @@ describe('ReactDOMInput', () => {\n expect(node.getAttribute('value')).toBe(null);\n });\n \n- it('should set a value on a submit input', () => {\n+ it('should set a value on a submit input', async () => {\n const stub = ;\n- ReactDOM.render(stub, container);\n+ await act(() => {\n+ root.render(stub);\n+ });\n const node = container.firstChild;\n \n expect(node.getAttribute('value')).toBe('banana');\n });\n \n- it('should not set an undefined value on a submit input', () => {\n+ it('should not set an undefined value on a submit input', async () => {\n const stub = ;\n- ReactDOM.render(stub, container);\n+ await act(() => {\n+ root.render(stub);\n+ });\n const node = container.firstChild;\n \n \/\/ Note: it shouldn't be an empty string\n \/\/ because that would erase the \"submit\" label.\n expect(node.getAttribute('value')).toBe(null);\n \n- ReactDOM.render(stub, container);\n+ await act(() => {\n+ root.render(stub);\n+ });\n expect(node.getAttribute('value')).toBe(null);\n });\n \n- it('should not set an undefined value on a reset input', () => {\n+ it('should not set an undefined value on a reset input', async () => {\n const stub = ;\n- ReactDOM.render(stub, container);\n+ await act(() => {\n+ root.render(stub);\n+ });\n const node = container.firstChild;\n \n \/\/ Note: it shouldn't be an empty string\n \/\/ because that would erase the \"reset\" label.\n expect(node.getAttribute('value')).toBe(null);\n \n- ReactDOM.render(stub, container);\n+ await act(() => {\n+ root.render(stub);\n+ });\n expect(node.getAttribute('value')).toBe(null);\n });\n \n- it('should not set a null value on a submit input', () => {\n+ it('should not set a null value on a submit input', async () => {\n const stub = ;\n- expect(() => {\n- ReactDOM.render(stub, container);\n+ await expect(async () => {\n+ await act(() => {\n+ root.render(stub);\n+ });\n }).toErrorDev('`value` prop on `input` should not be null');\n const node = container.firstChild;\n \n@@ -1115,14 +1267,18 @@ describe('ReactDOMInput', () => {\n \/\/ because that would erase the \"submit\" label.\n expect(node.getAttribute('value')).toBe(null);\n \n- ReactDOM.render(stub, container);\n+ await act(() => {\n+ root.render(stub);\n+ });\n expect(node.getAttribute('value')).toBe(null);\n });\n \n- it('should not set a null value on a reset input', () => {\n+ it('should not set a null value on a reset input', async () => {\n const stub = ;\n- expect(() => {\n- ReactDOM.render(stub, container);\n+ await expect(async () => {\n+ await act(() => {\n+ root.render(stub);\n+ });\n }).toErrorDev('`value` prop on `input` should not be null');\n const node = container.firstChild;\n \n@@ -1130,35 +1286,43 @@ describe('ReactDOMInput', () => {\n \/\/ because that would erase the \"reset\" label.\n expect(node.getAttribute('value')).toBe(null);\n \n- ReactDOM.render(stub, container);\n+ await act(() => {\n+ root.render(stub);\n+ });\n expect(node.getAttribute('value')).toBe(null);\n });\n \n- it('should set a value on a reset input', () => {\n+ it('should set a value on a reset input', async () => {\n const stub = ;\n- ReactDOM.render(stub, container);\n+ await act(() => {\n+ root.render(stub);\n+ });\n const node = container.firstChild;\n \n expect(node.getAttribute('value')).toBe('banana');\n });\n \n- it('should set an empty string value on a submit input', () => {\n+ it('should set an empty string value on a submit input', async () => {\n const stub = ;\n- ReactDOM.render(stub, container);\n+ await act(() => {\n+ root.render(stub);\n+ });\n const node = container.firstChild;\n \n expect(node.getAttribute('value')).toBe('');\n });\n \n- it('should set an empty string value on a reset input', () => {\n+ it('should set an empty string value on a reset input', async () => {\n const stub = ;\n- ReactDOM.render(stub, container);\n+ await act(() => {\n+ root.render(stub);\n+ });\n const node = container.firstChild;\n \n expect(node.getAttribute('value')).toBe('');\n });\n \n- it('should control radio buttons', () => {\n+ it('should control radio buttons', async () => {\n class RadioGroup extends React.Component {\n aRef = React.createRef();\n bRef = React.createRef();\n@@ -1199,7 +1363,11 @@ describe('ReactDOMInput', () => {\n }\n }\n \n- const stub = ReactDOM.render(, container);\n+ const ref = React.createRef();\n+ await act(() => {\n+ root.render();\n+ });\n+ const stub = ref.current;\n const aNode = stub.aRef.current;\n const bNode = stub.bRef.current;\n const cNode = stub.cRef.current;\n@@ -1240,7 +1408,9 @@ describe('ReactDOMInput', () => {\n }\n \n \/\/ Now let's run the actual ReactDOMInput change event handler\n- dispatchEventOnNode(bNode, 'click');\n+ await act(() => {\n+ dispatchEventOnNode(bNode, 'click');\n+ });\n \n \/\/ The original state should have been restored\n expect(aNode.checked).toBe(true);\n@@ -1288,6 +1458,10 @@ describe('ReactDOMInput', () => {\n );\n }\n const html = ReactDOMServer.renderToString();\n+ \/\/ Create a fresh container, not attached a root yet\n+ container.remove();\n+ container = document.createElement('div');\n+ document.body.appendChild(container);\n container.innerHTML = html;\n const [a, b, c] = container.querySelectorAll('input');\n expect(a.checked).toBe(true);\n@@ -1376,6 +1550,10 @@ describe('ReactDOMInput', () => {\n );\n }\n const html = ReactDOMServer.renderToString();\n+ \/\/ Create a fresh container, not attached a root yet\n+ container.remove();\n+ container = document.createElement('div');\n+ document.body.appendChild(container);\n container.innerHTML = html;\n const [a, b, c] = container.querySelectorAll('input');\n expect(a.checked).toBe(true);\n@@ -1421,7 +1599,7 @@ describe('ReactDOMInput', () => {\n assertInputTrackingIsCurrent(container);\n });\n \n- it('should check the correct radio when the selected name moves', () => {\n+ it('should check the correct radio when the selected name moves', async () => {\n class App extends React.Component {\n state = {\n updated: false,\n@@ -1452,40 +1630,48 @@ describe('ReactDOMInput', () => {\n }\n }\n \n- const stub = ReactDOM.render(, container);\n- const buttonNode = ReactDOM.findDOMNode(stub).childNodes[0];\n- const firstRadioNode = ReactDOM.findDOMNode(stub).childNodes[1];\n+ await act(() => {\n+ root.render();\n+ });\n+ const node = container.firstChild;\n+ const buttonNode = node.childNodes[0];\n+ const firstRadioNode = node.childNodes[1];\n expect(isCheckedDirty(firstRadioNode)).toBe(true);\n expect(firstRadioNode.checked).toBe(false);\n assertInputTrackingIsCurrent(container);\n- dispatchEventOnNode(buttonNode, 'click');\n+ await act(() => {\n+ dispatchEventOnNode(buttonNode, 'click');\n+ });\n expect(firstRadioNode.checked).toBe(true);\n assertInputTrackingIsCurrent(container);\n- dispatchEventOnNode(buttonNode, 'click');\n+ await act(() => {\n+ dispatchEventOnNode(buttonNode, 'click');\n+ });\n expect(firstRadioNode.checked).toBe(false);\n assertInputTrackingIsCurrent(container);\n });\n \n- it(\"shouldn't get tricked by changing radio names, part 2\", () => {\n- ReactDOM.render(\n-

\n- {}}\n- \/>\n- {}}\n- \/>\n- <\/div>,\n- container,\n- );\n+ it(\"shouldn't get tricked by changing radio names, part 2\", async () => {\n+ await act(() => {\n+ root.render(\n+

\n+ {}}\n+ \/>\n+ {}}\n+ \/>\n+ <\/div>,\n+ );\n+ });\n const one = container.querySelector('input[name=\"a\"][value=\"1\"]');\n const two = container.querySelector('input[name=\"a\"][value=\"2\"]');\n expect(one.checked).toBe(true);\n@@ -1494,25 +1680,26 @@ describe('ReactDOMInput', () => {\n expect(isCheckedDirty(two)).toBe(true);\n assertInputTrackingIsCurrent(container);\n \n- ReactDOM.render(\n-

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

\n+ {}}\n+ \/>\n+ {}}\n+ \/>\n+ <\/div>,\n+ );\n+ });\n expect(one.checked).toBe(true);\n expect(two.checked).toBe(true);\n expect(isCheckedDirty(one)).toBe(true);\n@@ -1521,6 +1708,9 @@ describe('ReactDOMInput', () => {\n });\n \n it('should control radio buttons if the tree updates during render', () => {\n+ container.remove();\n+ container = document.createElement('div');\n+ document.body.appendChild(container);\n const sharedParent = container;\n const container1 = document.createElement('div');\n const container2 = document.createElement('div');\n@@ -1600,7 +1790,7 @@ describe('ReactDOMInput', () => {\n assertInputTrackingIsCurrent(container);\n });\n \n- it('should control radio buttons if the tree updates during render (case 2; #26876)', () => {\n+ it('should control radio buttons if the tree updates during render (case 2; #26876)', async () => {\n let thunk = null;\n function App() {\n const [disabled, setDisabled] = React.useState(false);\n@@ -1634,7 +1824,9 @@ describe('ReactDOMInput', () => {\n <\/>\n );\n }\n- ReactDOM.render(, container);\n+ await act(() => {\n+ root.render();\n+ });\n const [one, two] = container.querySelectorAll('input');\n expect(one.checked).toBe(true);\n expect(two.checked).toBe(false);\n@@ -1644,7 +1836,9 @@ describe('ReactDOMInput', () => {\n \n \/\/ Click two\n setUntrackedChecked.call(two, true);\n- dispatchEventOnNode(two, 'click');\n+ await act(() => {\n+ dispatchEventOnNode(two, 'click');\n+ });\n expect(one.checked).toBe(true);\n expect(two.checked).toBe(false);\n expect(isCheckedDirty(one)).toBe(true);\n@@ -1652,7 +1846,7 @@ describe('ReactDOMInput', () => {\n assertInputTrackingIsCurrent(container);\n \n \/\/ After a delay...\n- ReactDOM.unstable_batchedUpdates(thunk);\n+ await act(thunk);\n expect(one.checked).toBe(false);\n expect(two.checked).toBe(true);\n expect(isCheckedDirty(one)).toBe(true);\n@@ -1661,7 +1855,9 @@ describe('ReactDOMInput', () => {\n \n \/\/ Click back to one\n setUntrackedChecked.call(one, true);\n- dispatchEventOnNode(one, 'click');\n+ await act(() => {\n+ dispatchEventOnNode(one, 'click');\n+ });\n expect(one.checked).toBe(false);\n expect(two.checked).toBe(true);\n expect(isCheckedDirty(one)).toBe(true);\n@@ -1669,7 +1865,7 @@ describe('ReactDOMInput', () => {\n assertInputTrackingIsCurrent(container);\n \n \/\/ After a delay...\n- ReactDOM.unstable_batchedUpdates(thunk);\n+ await act(thunk);\n expect(one.checked).toBe(true);\n expect(two.checked).toBe(false);\n expect(isCheckedDirty(one)).toBe(true);\n@@ -1677,19 +1873,18 @@ describe('ReactDOMInput', () => {\n assertInputTrackingIsCurrent(container);\n });\n \n- it('should warn with value and no onChange handler and readOnly specified', () => {\n- ReactDOM.render(\n- ,\n- container,\n- );\n- ReactDOM.unmountComponentAtNode(container);\n+ it('should warn with value and no onChange handler and readOnly specified', async () => {\n+ await act(() => {\n+ root.render();\n+ });\n+ root.unmount();\n+ root = ReactDOMClient.createRoot(container);\n \n- expect(() =>\n- ReactDOM.render(\n- ,\n- container,\n- ),\n- ).toErrorDev(\n+ await expect(async () => {\n+ await act(() => {\n+ root.render();\n+ });\n+ }).toErrorDev(\n 'Warning: You provided a `value` prop to a form ' +\n 'field without an `onChange` handler. This will render a read-only ' +\n 'field. If the field should be mutable use `defaultValue`. ' +\n@@ -1698,27 +1893,36 @@ describe('ReactDOMInput', () => {\n );\n });\n \n- it('should have a this value of undefined if bind is not used', () => {\n+ it('should have a this value of undefined if bind is not used', async () => {\n expect.assertions(1);\n const unboundInputOnChange = function () {\n expect(this).toBe(undefined);\n };\n \n const stub = ;\n- const node = ReactDOM.render(stub, container);\n+ await act(() => {\n+ root.render(stub);\n+ });\n+ const node = container.firstChild;\n \n setUntrackedValue.call(node, 'giraffe');\n- dispatchEventOnNode(node, 'input');\n+ await act(() => {\n+ dispatchEventOnNode(node, 'input');\n+ });\n });\n \n- it('should update defaultValue to empty string', () => {\n- ReactDOM.render(, container);\n+ it('should update defaultValue to empty string', async () => {\n+ await act(() => {\n+ root.render();\n+ });\n if (disableInputAttributeSyncing) {\n expect(isValueDirty(container.firstChild)).toBe(false);\n } else {\n expect(isValueDirty(container.firstChild)).toBe(true);\n }\n- ReactDOM.render(, container);\n+ await act(() => {\n+ root.render();\n+ });\n expect(container.firstChild.defaultValue).toBe('');\n if (disableInputAttributeSyncing) {\n expect(isValueDirty(container.firstChild)).toBe(false);\n@@ -1727,31 +1931,37 @@ describe('ReactDOMInput', () => {\n }\n });\n \n- it('should warn if value is null', () => {\n- expect(() =>\n- ReactDOM.render(, container),\n- ).toErrorDev(\n+ it('should warn if value is null', async () => {\n+ await expect(async () => {\n+ await act(() => {\n+ root.render();\n+ });\n+ }).toErrorDev(\n '`value` prop on `input` should not be null. ' +\n 'Consider using an empty string to clear the component or `undefined` ' +\n 'for uncontrolled components.',\n );\n- ReactDOM.unmountComponentAtNode(container);\n+ root.unmount();\n \n- ReactDOM.render(, container);\n+ root = ReactDOMClient.createRoot(container);\n+ await act(() => {\n+ root.render();\n+ });\n });\n \n- it('should warn if checked and defaultChecked props are specified', () => {\n- expect(() =>\n- ReactDOM.render(\n- ,\n- container,\n- ),\n- ).toErrorDev(\n+ it('should warn if checked and defaultChecked props are specified', async () => {\n+ await expect(async () => {\n+ await act(() => {\n+ root.render(\n+ ,\n+ );\n+ });\n+ }).toErrorDev(\n 'A component contains an input of type radio with both checked and defaultChecked props. ' +\n 'Input elements must be either controlled or uncontrolled ' +\n '(specify either the checked prop, or the defaultChecked prop, but not ' +\n@@ -1759,26 +1969,29 @@ describe('ReactDOMInput', () => {\n 'element and remove one of these props. More info: ' +\n 'https:\/\/reactjs.org\/link\/controlled-components',\n );\n- ReactDOM.unmountComponentAtNode(container);\n-\n- ReactDOM.render(\n- ,\n- container,\n- );\n+ root.unmount();\n+\n+ root = ReactDOMClient.createRoot(container);\n+ await act(() => {\n+ root.render(\n+ ,\n+ );\n+ });\n });\n \n- it('should warn if value and defaultValue props are specified', () => {\n- expect(() =>\n- ReactDOM.render(\n- ,\n- container,\n- ),\n- ).toErrorDev(\n+ it('should warn if value and defaultValue props are specified', async () => {\n+ await expect(async () => {\n+ await act(() => {\n+ root.render(\n+ ,\n+ );\n+ });\n+ }).toErrorDev(\n 'A component contains an input of type text with both value and defaultValue props. ' +\n 'Input elements must be either controlled or uncontrolled ' +\n '(specify either the value prop, or the defaultValue prop, but not ' +\n@@ -1786,20 +1999,29 @@ describe('ReactDOMInput', () => {\n 'element and remove one of these props. More info: ' +\n 'https:\/\/reactjs.org\/link\/controlled-components',\n );\n- ReactDOM.unmountComponentAtNode(container);\n+ await (() => {\n+ root.unmount();\n+ });\n \n- ReactDOM.render(\n- ,\n- container,\n- );\n+ await act(() => {\n+ root.render(\n+ ,\n+ );\n+ });\n });\n \n- it('should warn if controlled input switches to uncontrolled (value is undefined)', () => {\n+ it('should warn if controlled input switches to uncontrolled (value is undefined)', async () => {\n const stub = (\n \n );\n- ReactDOM.render(stub, container);\n- expect(() => ReactDOM.render(, container)).toErrorDev(\n+ await act(() => {\n+ root.render(stub);\n+ });\n+ await expect(async () => {\n+ await act(() => {\n+ root.render();\n+ });\n+ }).toErrorDev(\n 'Warning: A component is changing a controlled input to be uncontrolled. ' +\n 'This is likely caused by the value changing from a defined to ' +\n 'undefined, which should not happen. ' +\n@@ -1809,14 +2031,18 @@ describe('ReactDOMInput', () => {\n );\n });\n \n- it('should warn if controlled input switches to uncontrolled (value is null)', () => {\n+ it('should warn if controlled input switches to uncontrolled (value is null)', async () => {\n const stub = (\n \n );\n- ReactDOM.render(stub, container);\n- expect(() =>\n- ReactDOM.render(, container),\n- ).toErrorDev([\n+ await act(() => {\n+ root.render(stub);\n+ });\n+ await expect(async () => {\n+ await act(() => {\n+ root.render();\n+ });\n+ }).toErrorDev([\n '`value` prop on `input` should not be null. ' +\n 'Consider using an empty string to clear the component or `undefined` for uncontrolled components',\n 'Warning: A component is changing a controlled input to be uncontrolled. ' +\n@@ -1828,17 +2054,18 @@ describe('ReactDOMInput', () => {\n ]);\n });\n \n- it('should warn if controlled input switches to uncontrolled with defaultValue', () => {\n+ it('should warn if controlled input switches to uncontrolled with defaultValue', async () => {\n const stub = (\n \n );\n- ReactDOM.render(stub, container);\n- expect(() =>\n- ReactDOM.render(\n- ,\n- container,\n- ),\n- ).toErrorDev(\n+ await act(() => {\n+ root.render(stub);\n+ });\n+ await expect(async () => {\n+ await act(() => {\n+ root.render();\n+ });\n+ }).toErrorDev(\n 'Warning: A component is changing a controlled input to be uncontrolled. ' +\n 'This is likely caused by the value changing from a defined to ' +\n 'undefined, which should not happen. ' +\n@@ -1848,12 +2075,16 @@ describe('ReactDOMInput', () => {\n );\n });\n \n- it('should warn if uncontrolled input (value is undefined) switches to controlled', () => {\n+ it('should warn if uncontrolled input (value is undefined) switches to controlled', async () => {\n const stub = ;\n- ReactDOM.render(stub, container);\n- expect(() =>\n- ReactDOM.render(, container),\n- ).toErrorDev(\n+ await act(() => {\n+ root.render(stub);\n+ });\n+ await expect(async () => {\n+ await act(() => {\n+ root.render();\n+ });\n+ }).toErrorDev(\n 'Warning: A component is changing an uncontrolled input to be controlled. ' +\n 'This is likely caused by the value changing from undefined to ' +\n 'a defined value, which should not happen. ' +\n@@ -1863,15 +2094,21 @@ describe('ReactDOMInput', () => {\n );\n });\n \n- it('should warn if uncontrolled input (value is null) switches to controlled', () => {\n+ it('should warn if uncontrolled input (value is null) switches to controlled', async () => {\n const stub = ;\n- expect(() => ReactDOM.render(stub, container)).toErrorDev(\n+ await expect(async () => {\n+ await act(() => {\n+ root.render(stub);\n+ });\n+ }).toErrorDev(\n '`value` prop on `input` should not be null. ' +\n 'Consider using an empty string to clear the component or `undefined` for uncontrolled components.',\n );\n- expect(() =>\n- ReactDOM.render(, container),\n- ).toErrorDev(\n+ await expect(async () => {\n+ await act(() => {\n+ root.render();\n+ });\n+ }).toErrorDev(\n 'Warning: A component is changing an uncontrolled input to be controlled. ' +\n 'This is likely caused by the value changing from undefined to ' +\n 'a defined value, which should not happen. ' +\n@@ -1881,14 +2118,18 @@ describe('ReactDOMInput', () => {\n );\n });\n \n- it('should warn if controlled checkbox switches to uncontrolled (checked is undefined)', () => {\n+ it('should warn if controlled checkbox switches to uncontrolled (checked is undefined)', async () => {\n const stub = (\n \n );\n- ReactDOM.render(stub, container);\n- expect(() =>\n- ReactDOM.render(, container),\n- ).toErrorDev(\n+ await act(() => {\n+ root.render(stub);\n+ });\n+ await expect(async () => {\n+ await act(() => {\n+ root.render();\n+ });\n+ }).toErrorDev(\n 'Warning: A component is changing a controlled input to be uncontrolled. ' +\n 'This is likely caused by the value changing from a defined to ' +\n 'undefined, which should not happen. ' +\n@@ -1898,14 +2139,18 @@ describe('ReactDOMInput', () => {\n );\n });\n \n- it('should warn if controlled checkbox switches to uncontrolled (checked is null)', () => {\n+ it('should warn if controlled checkbox switches to uncontrolled (checked is null)', async () => {\n const stub = (\n \n );\n- ReactDOM.render(stub, container);\n- expect(() =>\n- ReactDOM.render(, container),\n- ).toErrorDev(\n+ await act(() => {\n+ root.render(stub);\n+ });\n+ await expect(async () => {\n+ await act(() => {\n+ root.render();\n+ });\n+ }).toErrorDev(\n 'Warning: A component is changing a controlled input to be uncontrolled. ' +\n 'This is likely caused by the value changing from a defined to ' +\n 'undefined, which should not happen. ' +\n@@ -1915,17 +2160,18 @@ describe('ReactDOMInput', () => {\n );\n });\n \n- it('should warn if controlled checkbox switches to uncontrolled with defaultChecked', () => {\n+ it('should warn if controlled checkbox switches to uncontrolled with defaultChecked', async () => {\n const stub = (\n \n );\n- ReactDOM.render(stub, container);\n- expect(() =>\n- ReactDOM.render(\n- ,\n- container,\n- ),\n- ).toErrorDev(\n+ await act(() => {\n+ root.render(stub);\n+ });\n+ await expect(async () => {\n+ await act(() => {\n+ root.render();\n+ });\n+ }).toErrorDev(\n 'Warning: A component is changing a controlled input to be uncontrolled. ' +\n 'This is likely caused by the value changing from a defined to ' +\n 'undefined, which should not happen. ' +\n@@ -1935,12 +2181,16 @@ describe('ReactDOMInput', () => {\n );\n });\n \n- it('should warn if uncontrolled checkbox (checked is undefined) switches to controlled', () => {\n+ it('should warn if uncontrolled checkbox (checked is undefined) switches to controlled', async () => {\n const stub = ;\n- ReactDOM.render(stub, container);\n- expect(() =>\n- ReactDOM.render(, container),\n- ).toErrorDev(\n+ await act(() => {\n+ root.render(stub);\n+ });\n+ await expect(async () => {\n+ await act(() => {\n+ root.render();\n+ });\n+ }).toErrorDev(\n 'Warning: A component is changing an uncontrolled input to be controlled. ' +\n 'This is likely caused by the value changing from undefined to ' +\n 'a defined value, which should not happen. ' +\n@@ -1950,12 +2200,16 @@ describe('ReactDOMInput', () => {\n );\n });\n \n- it('should warn if uncontrolled checkbox (checked is null) switches to controlled', () => {\n+ it('should warn if uncontrolled checkbox (checked is null) switches to controlled', async () => {\n const stub = ;\n- ReactDOM.render(stub, container);\n- expect(() =>\n- ReactDOM.render(, container),\n- ).toErrorDev(\n+ await act(() => {\n+ root.render(stub);\n+ });\n+ await expect(async () => {\n+ await act(() => {\n+ root.render();\n+ });\n+ }).toErrorDev(\n 'Warning: A component is changing an uncontrolled input to be controlled. ' +\n 'This is likely caused by the value changing from undefined to ' +\n 'a defined value, which should not happen. ' +\n@@ -1965,10 +2219,16 @@ describe('ReactDOMInput', () => {\n );\n });\n \n- it('should warn if controlled radio switches to uncontrolled (checked is undefined)', () => {\n+ it('should warn if controlled radio switches to uncontrolled (checked is undefined)', async () => {\n const stub = ;\n- ReactDOM.render(stub, container);\n- expect(() => ReactDOM.render(, container)).toErrorDev(\n+ await act(() => {\n+ root.render(stub);\n+ });\n+ await expect(async () => {\n+ await act(() => {\n+ root.render();\n+ });\n+ }).toErrorDev(\n 'Warning: A component is changing a controlled input to be uncontrolled. ' +\n 'This is likely caused by the value changing from a defined to ' +\n 'undefined, which should not happen. ' +\n@@ -1978,12 +2238,16 @@ describe('ReactDOMInput', () => {\n );\n });\n \n- it('should warn if controlled radio switches to uncontrolled (checked is null)', () => {\n+ it('should warn if controlled radio switches to uncontrolled (checked is null)', async () => {\n const stub = ;\n- ReactDOM.render(stub, container);\n- expect(() =>\n- ReactDOM.render(, container),\n- ).toErrorDev(\n+ await act(() => {\n+ root.render(stub);\n+ });\n+ await expect(async () => {\n+ await act(() => {\n+ root.render();\n+ });\n+ }).toErrorDev(\n 'Warning: A component is changing a controlled input to be uncontrolled. ' +\n 'This is likely caused by the value changing from a defined to ' +\n 'undefined, which should not happen. ' +\n@@ -1993,12 +2257,16 @@ describe('ReactDOMInput', () => {\n );\n });\n \n- it('should warn if controlled radio switches to uncontrolled with defaultChecked', () => {\n+ it('should warn if controlled radio switches to uncontrolled with defaultChecked', async () => {\n const stub = ;\n- ReactDOM.render(stub, container);\n- expect(() =>\n- ReactDOM.render(, container),\n- ).toErrorDev(\n+ await act(() => {\n+ root.render(stub);\n+ });\n+ await expect(async () => {\n+ await act(() => {\n+ root.render();\n+ });\n+ }).toErrorDev(\n 'Warning: A component is changing a controlled input to be uncontrolled. ' +\n 'This is likely caused by the value changing from a defined to ' +\n 'undefined, which should not happen. ' +\n@@ -2008,12 +2276,16 @@ describe('ReactDOMInput', () => {\n );\n });\n \n- it('should warn if uncontrolled radio (checked is undefined) switches to controlled', () => {\n+ it('should warn if uncontrolled radio (checked is undefined) switches to controlled', async () => {\n const stub = ;\n- ReactDOM.render(stub, container);\n- expect(() =>\n- ReactDOM.render(, container),\n- ).toErrorDev(\n+ await act(() => {\n+ root.render(stub);\n+ });\n+ await expect(async () => {\n+ await act(() => {\n+ root.render();\n+ });\n+ }).toErrorDev(\n 'Warning: A component is changing an uncontrolled input to be controlled. ' +\n 'This is likely caused by the value changing from undefined to ' +\n 'a defined value, which should not happen. ' +\n@@ -2023,12 +2295,16 @@ describe('ReactDOMInput', () => {\n );\n });\n \n- it('should warn if uncontrolled radio (checked is null) switches to controlled', () => {\n+ it('should warn if uncontrolled radio (checked is null) switches to controlled', async () => {\n const stub = ;\n- ReactDOM.render(stub, container);\n- expect(() =>\n- ReactDOM.render(, container),\n- ).toErrorDev(\n+ await act(() => {\n+ root.render(stub);\n+ });\n+ await expect(async () => {\n+ await act(() => {\n+ root.render();\n+ });\n+ }).toErrorDev(\n 'Warning: A component is changing an uncontrolled input to be controlled. ' +\n 'This is likely caused by the value changing from undefined to ' +\n 'a defined value, which should not happen. ' +\n@@ -2038,54 +2314,61 @@ describe('ReactDOMInput', () => {\n );\n });\n \n- it('should not warn if radio value changes but never becomes controlled', () => {\n- ReactDOM.render(, container);\n- ReactDOM.render(, container);\n- ReactDOM.render(\n- ,\n- container,\n- );\n- ReactDOM.render(\n- null} \/>,\n- container,\n- );\n- ReactDOM.render(, container);\n+ it('should not warn if radio value changes but never becomes controlled', async () => {\n+ await act(() => {\n+ root.render();\n+ });\n+ await act(() => {\n+ root.render();\n+ });\n+ await act(() => {\n+ root.render();\n+ });\n+ await act(() => {\n+ root.render( null} \/>);\n+ });\n+ await act(() => {\n+ root.render();\n+ });\n });\n \n- it('should not warn if radio value changes but never becomes uncontrolled', () => {\n- ReactDOM.render(\n- null} \/>,\n- container,\n- );\n+ it('should not warn if radio value changes but never becomes uncontrolled', async () => {\n+ await act(() => {\n+ root.render( null} \/>);\n+ });\n const input = container.querySelector('input');\n expect(isCheckedDirty(input)).toBe(true);\n- ReactDOM.render(\n- null}\n- \/>,\n- container,\n- );\n+ await act(() => {\n+ root.render(\n+ null}\n+ \/>,\n+ );\n+ });\n expect(isCheckedDirty(input)).toBe(true);\n assertInputTrackingIsCurrent(container);\n });\n \n- it('should warn if radio checked false changes to become uncontrolled', () => {\n- ReactDOM.render(\n- null}\n- \/>,\n- container,\n- );\n- expect(() =>\n- ReactDOM.render(, container),\n- ).toErrorDev(\n+ it('should warn if radio checked false changes to become uncontrolled', async () => {\n+ await act(() => {\n+ root.render(\n+ null}\n+ \/>,\n+ );\n+ });\n+ await expect(async () => {\n+ await act(() => {\n+ root.render();\n+ });\n+ }).toErrorDev(\n 'Warning: A component is changing a controlled input to be uncontrolled. ' +\n 'This is likely caused by the value changing from a defined to ' +\n 'undefined, which should not happen. ' +\n@@ -2095,7 +2378,7 @@ describe('ReactDOMInput', () => {\n );\n });\n \n- it('sets type, step, min, max before value always', () => {\n+ it('sets type, step, min, max before value always', async () => {\n const log = [];\n const originalCreateElement = document.createElement;\n spyOnDevAndProd(document, 'createElement').mockImplementation(\n@@ -2133,17 +2416,18 @@ describe('ReactDOMInput', () => {\n },\n );\n \n- ReactDOM.render(\n- {}}\n- type=\"range\"\n- min=\"0\"\n- max=\"100\"\n- step=\"1\"\n- \/>,\n- container,\n- );\n+ await act(() => {\n+ root.render(\n+ {}}\n+ type=\"range\"\n+ min=\"0\"\n+ max=\"100\"\n+ step=\"1\"\n+ \/>,\n+ );\n+ });\n \n expect(log).toEqual([\n 'set attribute min',\n@@ -2154,12 +2438,14 @@ describe('ReactDOMInput', () => {\n ]);\n });\n \n- it('sets value properly with type coming later in props', () => {\n- const input = ReactDOM.render(, container);\n- expect(input.value).toBe('hi');\n+ it('sets value properly with type coming later in props', async () => {\n+ await act(() => {\n+ root.render();\n+ });\n+ expect(container.firstChild.value).toBe('hi');\n });\n \n- it('does not raise a validation warning when it switches types', () => {\n+ it('does not raise a validation warning when it switches types', async () => {\n class Input extends React.Component {\n state = {type: 'number', value: 1000};\n \n@@ -2169,16 +2455,21 @@ describe('ReactDOMInput', () => {\n }\n }\n \n- const input = ReactDOM.render(, container);\n- const node = ReactDOM.findDOMNode(input);\n+ const ref = React.createRef();\n+ await act(() => {\n+ root.render();\n+ });\n+ const node = container.firstChild;\n \n \/\/ If the value is set before the type, a validation warning will raise and\n \/\/ the value will not be assigned.\n- input.setState({type: 'text', value: 'Test'});\n+ await act(() => {\n+ ref.current.setState({type: 'text', value: 'Test'});\n+ });\n expect(node.value).toEqual('Test');\n });\n \n- it('resets value of date\/time input to fix bugs in iOS Safari', () => {\n+ it('resets value of date\/time input to fix bugs in iOS Safari', async () => {\n function strify(x) {\n return JSON.stringify(x, null, 2);\n }\n@@ -2250,7 +2541,9 @@ describe('ReactDOMInput', () => {\n },\n );\n \n- ReactDOM.render(, container);\n+ await act(() => {\n+ root.render();\n+ });\n \n if (disableInputAttributeSyncing) {\n expect(log).toEqual([\n@@ -2289,14 +2582,18 @@ describe('ReactDOMInput', () => {\n };\n }\n \n- it('always sets the attribute when values change on text inputs', function () {\n+ it('always sets the attribute when values change on text inputs', async () => {\n const Input = getTestInput();\n- const stub = ReactDOM.render(, container);\n- const node = ReactDOM.findDOMNode(stub);\n+ await act(() => {\n+ root.render();\n+ });\n+ const node = container.firstChild;\n expect(isValueDirty(node)).toBe(false);\n \n setUntrackedValue.call(node, '2');\n- dispatchEventOnNode(node, 'input');\n+ await act(() => {\n+ dispatchEventOnNode(node, 'input');\n+ });\n \n expect(isValueDirty(node)).toBe(true);\n if (disableInputAttributeSyncing) {\n@@ -2306,13 +2603,12 @@ describe('ReactDOMInput', () => {\n }\n });\n \n- it('does not set the value attribute on number inputs if focused', () => {\n+ it('does not set the value attribute on number inputs if focused', async () => {\n const Input = getTestInput();\n- const stub = ReactDOM.render(\n- ,\n- container,\n- );\n- const node = ReactDOM.findDOMNode(stub);\n+ await act(() => {\n+ root.render();\n+ });\n+ const node = container.firstChild;\n expect(isValueDirty(node)).toBe(true);\n \n node.focus();\n@@ -2328,13 +2624,12 @@ describe('ReactDOMInput', () => {\n }\n });\n \n- it('sets the value attribute on number inputs on blur', () => {\n+ it('sets the value attribute on number inputs on blur', async () => {\n const Input = getTestInput();\n- const stub = ReactDOM.render(\n- ,\n- container,\n- );\n- const node = ReactDOM.findDOMNode(stub);\n+ await act(() => {\n+ root.render();\n+ });\n+ const node = container.firstChild;\n expect(isValueDirty(node)).toBe(true);\n \n node.focus();\n@@ -2352,11 +2647,11 @@ describe('ReactDOMInput', () => {\n }\n });\n \n- it('an uncontrolled number input will not update the value attribute on blur', () => {\n- const node = ReactDOM.render(\n- ,\n- container,\n- );\n+ it('an uncontrolled number input will not update the value attribute on blur', async () => {\n+ await act(() => {\n+ root.render();\n+ });\n+ const node = container.firstChild;\n if (disableInputAttributeSyncing) {\n expect(isValueDirty(node)).toBe(false);\n } else {\n@@ -2372,11 +2667,11 @@ describe('ReactDOMInput', () => {\n expect(node.getAttribute('value')).toBe('1');\n });\n \n- it('an uncontrolled text input will not update the value attribute on blur', () => {\n- const node = ReactDOM.render(\n- ,\n- container,\n- );\n+ it('an uncontrolled text input will not update the value attribute on blur', async () => {\n+ await act(() => {\n+ root.render();\n+ });\n+ const node = container.firstChild;\n if (disableInputAttributeSyncing) {\n expect(isValueDirty(node)).toBe(false);\n } else {\n@@ -2396,7 +2691,7 @@ describe('ReactDOMInput', () => {\n describe('setting a controlled input to undefined', () => {\n let input;\n \n- function renderInputWithStringThenWithUndefined() {\n+ async function renderInputWithStringThenWithUndefined() {\n let setValueToUndefined;\n class Input extends React.Component {\n constructor() {\n@@ -2414,15 +2709,19 @@ describe('ReactDOMInput', () => {\n }\n }\n \n- const stub = ReactDOM.render(, container);\n- input = ReactDOM.findDOMNode(stub);\n+ await act(() => {\n+ root.render();\n+ });\n+ input = container.firstChild;\n setUntrackedValue.call(input, 'latest');\n dispatchEventOnNode(input, 'input');\n- setValueToUndefined();\n+ await act(() => {\n+ setValueToUndefined();\n+ });\n }\n \n- it('reverts the value attribute to the initial value', () => {\n- expect(renderInputWithStringThenWithUndefined).toErrorDev(\n+ it('reverts the value attribute to the initial value', async () => {\n+ await expect(renderInputWithStringThenWithUndefined).toErrorDev(\n 'A component is changing a controlled input to be uncontrolled.',\n );\n if (disableInputAttributeSyncing) {\n@@ -2432,8 +2731,8 @@ describe('ReactDOMInput', () => {\n }\n });\n \n- it('preserves the value property', () => {\n- expect(renderInputWithStringThenWithUndefined).toErrorDev(\n+ it('preserves the value property', async () => {\n+ await expect(renderInputWithStringThenWithUndefined).toErrorDev(\n 'A component is changing a controlled input to be uncontrolled.',\n );\n expect(input.value).toBe('latest');\n@@ -2443,7 +2742,7 @@ describe('ReactDOMInput', () => {\n describe('setting a controlled input to null', () => {\n let input;\n \n- function renderInputWithStringThenWithNull() {\n+ async function renderInputWithStringThenWithNull() {\n let setValueToNull;\n class Input extends React.Component {\n constructor() {\n@@ -2461,15 +2760,19 @@ describe('ReactDOMInput', () => {\n }\n }\n \n- const stub = ReactDOM.render(, container);\n- input = ReactDOM.findDOMNode(stub);\n+ await act(() => {\n+ root.render();\n+ });\n+ input = container.firstChild;\n setUntrackedValue.call(input, 'latest');\n dispatchEventOnNode(input, 'input');\n- setValueToNull();\n+ await act(() => {\n+ setValueToNull();\n+ });\n }\n \n- it('reverts the value attribute to the initial value', () => {\n- expect(renderInputWithStringThenWithNull).toErrorDev([\n+ it('reverts the value attribute to the initial value', async () => {\n+ await expect(renderInputWithStringThenWithNull).toErrorDev([\n '`value` prop on `input` should not be null. ' +\n 'Consider using an empty string to clear the component ' +\n 'or `undefined` for uncontrolled components.',\n@@ -2482,8 +2785,8 @@ describe('ReactDOMInput', () => {\n }\n });\n \n- it('preserves the value property', () => {\n- expect(renderInputWithStringThenWithNull).toErrorDev([\n+ it('preserves the value property', async () => {\n+ await expect(renderInputWithStringThenWithNull).toErrorDev([\n '`value` prop on `input` should not be null. ' +\n 'Consider using an empty string to clear the component ' +\n 'or `undefined` for uncontrolled components.',\n@@ -2494,13 +2797,12 @@ describe('ReactDOMInput', () => {\n });\n \n describe('When given a Symbol value', function () {\n- it('treats initial Symbol value as an empty string', function () {\n- expect(() =>\n- ReactDOM.render(\n- {}} \/>,\n- container,\n- ),\n- ).toErrorDev('Invalid value for prop `value`');\n+ it('treats initial Symbol value as an empty string', async () => {\n+ await expect(async () => {\n+ await act(() => {\n+ root.render( {}} \/>);\n+ });\n+ }).toErrorDev('Invalid value for prop `value`');\n const node = container.firstChild;\n \n expect(node.value).toBe('');\n@@ -2511,14 +2813,15 @@ describe('ReactDOMInput', () => {\n }\n });\n \n- it('treats updated Symbol value as an empty string', function () {\n- ReactDOM.render( {}} \/>, container);\n- expect(() =>\n- ReactDOM.render(\n- {}} \/>,\n- container,\n- ),\n- ).toErrorDev('Invalid value for prop `value`');\n+ it('treats updated Symbol value as an empty string', async () => {\n+ await act(() => {\n+ root.render( {}} \/>);\n+ });\n+ await expect(async () => {\n+ await act(() => {\n+ root.render( {}} \/>);\n+ });\n+ }).toErrorDev('Invalid value for prop `value`');\n const node = container.firstChild;\n \n expect(node.value).toBe('');\n@@ -2529,8 +2832,10 @@ describe('ReactDOMInput', () => {\n }\n });\n \n- it('treats initial Symbol defaultValue as an empty string', function () {\n- ReactDOM.render(, container);\n+ it('treats initial Symbol defaultValue as an empty string', async () => {\n+ await act(() => {\n+ root.render();\n+ });\n const node = container.firstChild;\n \n expect(node.value).toBe('');\n@@ -2538,9 +2843,13 @@ describe('ReactDOMInput', () => {\n \/\/ TODO: we should warn here.\n });\n \n- it('treats updated Symbol defaultValue as an empty string', function () {\n- ReactDOM.render(, container);\n- ReactDOM.render(, container);\n+ it('treats updated Symbol defaultValue as an empty string', async () => {\n+ await act(() => {\n+ root.render();\n+ });\n+ await act(() => {\n+ root.render();\n+ });\n const node = container.firstChild;\n \n if (disableInputAttributeSyncing) {\n@@ -2554,13 +2863,12 @@ describe('ReactDOMInput', () => {\n });\n \n describe('When given a function value', function () {\n- it('treats initial function value as an empty string', function () {\n- expect(() =>\n- ReactDOM.render(\n- {}} onChange={() => {}} \/>,\n- container,\n- ),\n- ).toErrorDev('Invalid value for prop `value`');\n+ it('treats initial function value as an empty string', async () => {\n+ await expect(async () => {\n+ await act(() => {\n+ root.render( {}} onChange={() => {}} \/>);\n+ });\n+ }).toErrorDev('Invalid value for prop `value`');\n const node = container.firstChild;\n \n expect(node.value).toBe('');\n@@ -2571,14 +2879,15 @@ describe('ReactDOMInput', () => {\n }\n });\n \n- it('treats updated function value as an empty string', function () {\n- ReactDOM.render( {}} \/>, container);\n- expect(() =>\n- ReactDOM.render(\n- {}} onChange={() => {}} \/>,\n- container,\n- ),\n- ).toErrorDev('Invalid value for prop `value`');\n+ it('treats updated function value as an empty string', async () => {\n+ await act(() => {\n+ root.render( {}} \/>);\n+ });\n+ await expect(async () => {\n+ await act(() => {\n+ root.render( {}} onChange={() => {}} \/>);\n+ });\n+ }).toErrorDev('Invalid value for prop `value`');\n const node = container.firstChild;\n \n expect(node.value).toBe('');\n@@ -2589,8 +2898,10 @@ describe('ReactDOMInput', () => {\n }\n });\n \n- it('treats initial function defaultValue as an empty string', function () {\n- ReactDOM.render( {}} \/>, container);\n+ it('treats initial function defaultValue as an empty string', async () => {\n+ await act(() => {\n+ root.render( {}} \/>);\n+ });\n const node = container.firstChild;\n \n expect(node.value).toBe('');\n@@ -2598,9 +2909,13 @@ describe('ReactDOMInput', () => {\n \/\/ TODO: we should warn here.\n });\n \n- it('treats updated function defaultValue as an empty string', function () {\n- ReactDOM.render(, container);\n- ReactDOM.render( {}} \/>, container);\n+ it('treats updated function defaultValue as an empty string', async () => {\n+ await act(() => {\n+ root.render();\n+ });\n+ await act(() => {\n+ root.render( {}} \/>);\n+ });\n const node = container.firstChild;\n \n if (disableInputAttributeSyncing) {\n@@ -2619,19 +2934,20 @@ describe('ReactDOMInput', () => {\n \/\/ Between 16 and 16.2, we assigned a node's value to it's current\n \/\/ value in order to \"dettach\" it from defaultValue. This had the unfortunate\n \/\/ side-effect of assigning value=\"on\" to radio and checkboxes\n- it('does not add \"on\" in absence of value on a checkbox', function () {\n- ReactDOM.render(\n- ,\n- container,\n- );\n+ it('does not add \"on\" in absence of value on a checkbox', async () => {\n+ await act(() => {\n+ root.render();\n+ });\n const node = container.firstChild;\n \n expect(node.value).toBe('on');\n expect(node.hasAttribute('value')).toBe(false);\n });\n \n- it('does not add \"on\" in absence of value on a radio', function () {\n- ReactDOM.render(, container);\n+ it('does not add \"on\" in absence of value on a radio', async () => {\n+ await act(() => {\n+ root.render();\n+ });\n const node = container.firstChild;\n \n expect(node.value).toBe('on');\n@@ -2639,45 +2955,47 @@ describe('ReactDOMInput', () => {\n });\n });\n \n- it('should remove previous `defaultValue`', () => {\n- const node = ReactDOM.render(\n- ,\n- container,\n- );\n+ it('should remove previous `defaultValue`', async () => {\n+ await act(() => {\n+ root.render();\n+ });\n+ const node = container.firstChild;\n \n expect(node.value).toBe('0');\n expect(node.defaultValue).toBe('0');\n \n- ReactDOM.render(, container);\n+ await act(() => {\n+ root.render();\n+ });\n expect(node.defaultValue).toBe('');\n });\n \n- it('should treat `defaultValue={null}` as missing', () => {\n- const node = ReactDOM.render(\n- ,\n- container,\n- );\n+ it('should treat `defaultValue={null}` as missing', async () => {\n+ await act(() => {\n+ root.render();\n+ });\n+ const node = container.firstChild;\n \n expect(node.value).toBe('0');\n expect(node.defaultValue).toBe('0');\n \n- ReactDOM.render(, container);\n+ await act(() => {\n+ root.render();\n+ });\n expect(node.defaultValue).toBe('');\n });\n \n- it('should notice input changes when reverting back to original value', () => {\n+ it('should notice input changes when reverting back to original value', async () => {\n const log = [];\n function onChange(e) {\n log.push(e.target.value);\n }\n- ReactDOM.render(\n- ,\n- container,\n- );\n- ReactDOM.render(\n- ,\n- container,\n- );\n+ await act(() => {\n+ root.render();\n+ });\n+ await act(() => {\n+ root.render();\n+ });\n \n const node = container.firstChild;\n setUntrackedValue.call(node, '');\n","commit":{"subject":"Convert ReactDOMInput-test to createRoot (#28084)","revision":"a7fa58d8b6e8306f9c4f4135e702f1bc7a099a49","authorEmail":"jkassens@meta.com","shortRevision":"a7fa58d8b6","authorName":"Jan Kassens","authoredAt":"2024-01-25T14:22:12-05:00"},"files":[{"status":"M","path":"packages\/react-dom\/src\/__tests__\/ReactDOMInput-test.js"}],"body":"Convert ReactDOMInput-test to createRoot","parents":["0b32b3edd2c49b25fa25412fa6a6a31d43e15653"]}

dillon1000/react

Files changed