{"commit":{"authoredAt":"2024-01-29T17:02:20+01:00","subject":"Convert ReactDOMTextarea to createRoot (#28126)","revision":"cdfaae73c4768ddcce724872b1aa45130b39c85f","shortRevision":"cdfaae73c4","authorEmail":"silbermann.sebastian@gmail.com","authorName":"Sebastian Silbermann"},"patch":"diff --git a\/packages\/react-dom\/src\/__tests__\/ReactDOMTextarea-test.js b\/packages\/react-dom\/src\/__tests__\/ReactDOMTextarea-test.js\nindex 810452c64a..3d21ca64e3 100644\n--- a\/packages\/react-dom\/src\/__tests__\/ReactDOMTextarea-test.js\n+++ b\/packages\/react-dom\/src\/__tests__\/ReactDOMTextarea-test.js\n@@ -13,9 +13,9 @@ function emptyFunction() {}\n \n describe('ReactDOMTextarea', () => {\n let React;\n- let ReactDOM;\n+ let ReactDOMClient;\n let ReactDOMServer;\n- let ReactTestUtils;\n+ let act;\n \n let renderTextarea;\n \n@@ -25,15 +25,16 @@ describe('ReactDOMTextarea', () => {\n jest.resetModules();\n \n React = require('react');\n- ReactDOM = require('react-dom');\n+ ReactDOMClient = require('react-dom\/client');\n ReactDOMServer = require('react-dom\/server');\n- ReactTestUtils = require('react-dom\/test-utils');\n+ act = require('internal-test-utils').act;\n \n- renderTextarea = function (component, container) {\n- if (!container) {\n- container = document.createElement('div');\n- }\n- const node = ReactDOM.render(component, container);\n+ renderTextarea = async function (component, container, root) {\n+ await act(() => {\n+ root.render(component);\n+ });\n+\n+ const node = container.firstChild;\n \n \/\/ Fixing jsdom's quirky behavior -- in reality, the parser should strip\n \/\/ off the leading newline but we need to do it by hand here.\n@@ -46,93 +47,141 @@ describe('ReactDOMTextarea', () => {\n jest.restoreAllMocks();\n });\n \n- it('should allow setting `defaultValue`', () => {\n+ it('should allow setting `defaultValue`', async () => {\n const container = document.createElement('div');\n- const node = renderTextarea(

, container);\n+    const root = ReactDOMClient.createRoot(container);\n+    const node = await renderTextarea(\n+      <textarea defaultValue=\"giraffe\" \/>,\n+      container,\n+      root,\n+    );\n \n     expect(node.value).toBe('giraffe');\n \n     \/\/ Changing `defaultValue` should do nothing.\n-    renderTextarea(<textarea defaultValue=\"gorilla\" \/>, container);\n+    await renderTextarea(<textarea defaultValue=\"gorilla\" \/>, container, root);\n     expect(node.value).toEqual('giraffe');\n \n     node.value = 'cat';\n \n-    renderTextarea(<textarea defaultValue=\"monkey\" \/>, container);\n+    await renderTextarea(<textarea defaultValue=\"monkey\" \/>, container, root);\n     expect(node.value).toEqual('cat');\n   });\n \n-  it('should display `defaultValue` of number 0', () => {\n-    const stub = <textarea defaultValue={0} \/>;\n-    const node = renderTextarea(stub);\n+  it('should display `defaultValue` of number 0', async () => {\n+    const container = document.createElement('div');\n+    const root = ReactDOMClient.createRoot(container);\n+    const node = await renderTextarea(\n+      <textarea defaultValue={0} \/>,\n+      container,\n+      root,\n+    );\n \n     expect(node.value).toBe('0');\n   });\n \n-  it('should display \"false\" for `defaultValue` of `false`', () => {\n-    const stub = <textarea defaultValue={false} \/>;\n-    const node = renderTextarea(stub);\n+  it('should display \"false\" for `defaultValue` of `false`', async () => {\n+    const container = document.createElement('div');\n+    const root = ReactDOMClient.createRoot(container);\n+    const node = await renderTextarea(\n+      <textarea defaultValue={false} \/>,\n+      container,\n+      root,\n+    );\n \n     expect(node.value).toBe('false');\n   });\n \n-  it('should display \"foobar\" for `defaultValue` of `objToString`', () => {\n+  it('should display \"foobar\" for `defaultValue` of `objToString`', async () => {\n+    const container = document.createElement('div');\n+    const root = ReactDOMClient.createRoot(container);\n     const objToString = {\n       toString: function () {\n         return 'foobar';\n       },\n     };\n-\n-    const stub = <textarea defaultValue={objToString} \/>;\n-    const node = renderTextarea(stub);\n+    const node = await renderTextarea(\n+      <textarea defaultValue={objToString} \/>,\n+      container,\n+      root,\n+    );\n \n     expect(node.value).toBe('foobar');\n   });\n \n-  it('should set defaultValue', () => {\n+  it('should set defaultValue', async () => {\n     const container = document.createElement('div');\n-    ReactDOM.render(<textarea defaultValue=\"foo\" \/>, container);\n-    ReactDOM.render(<textarea defaultValue=\"bar\" \/>, container);\n-    ReactDOM.render(<textarea defaultValue=\"noise\" \/>, container);\n+    const root = ReactDOMClient.createRoot(container);\n+    await act(() => {\n+      root.render(<textarea defaultValue=\"foo\" \/>);\n+    });\n+    await act(() => {\n+      root.render(<textarea defaultValue=\"bar\" \/>);\n+    });\n+    await act(() => {\n+      root.render(<textarea defaultValue=\"noise\" \/>);\n+    });\n+\n     expect(container.firstChild.defaultValue).toBe('noise');\n   });\n \n-  it('should not render value as an attribute', () => {\n-    const stub = <textarea value=\"giraffe\" onChange={emptyFunction} \/>;\n-    const node = renderTextarea(stub);\n+  it('should not render value as an attribute', async () => {\n+    const container = document.createElement('div');\n+    const root = ReactDOMClient.createRoot(container);\n+    const node = await renderTextarea(\n+      <textarea value=\"giraffe\" onChange={emptyFunction} \/>,\n+      container,\n+      root,\n+    );\n \n     expect(node.getAttribute('value')).toBe(null);\n   });\n \n-  it('should display `value` of number 0', () => {\n-    const stub = <textarea value={0} onChange={emptyFunction} \/>;\n-    const node = renderTextarea(stub);\n+  it('should display `value` of number 0', async () => {\n+    const container = document.createElement('div');\n+    const root = ReactDOMClient.createRoot(container);\n+    const node = await renderTextarea(\n+      <textarea value={0} onChange={emptyFunction} \/>,\n+      container,\n+      root,\n+    );\n \n     expect(node.value).toBe('0');\n   });\n \n-  it('should update defaultValue to empty string', () => {\n+  it('should update defaultValue to empty string', async () => {\n     const container = document.createElement('div');\n-    ReactDOM.render(<textarea defaultValue={'foo'} \/>, container);\n-    ReactDOM.render(<textarea defaultValue={''} \/>, container);\n+    const root = ReactDOMClient.createRoot(container);\n+    await act(() => {\n+      root.render(<textarea defaultValue={'foo'} \/>);\n+    });\n+\n+    await act(() => {\n+      root.render(<textarea defaultValue={''} \/>);\n+    });\n+\n     expect(container.firstChild.defaultValue).toBe('');\n   });\n \n-  it('should allow setting `value` to `giraffe`', () => {\n+  it('should allow setting `value` to `giraffe`', async () => {\n     const container = document.createElement('div');\n-    let stub = <textarea value=\"giraffe\" onChange={emptyFunction} \/>;\n-    const node = renderTextarea(stub, container);\n+    const root = ReactDOMClient.createRoot(container);\n+    const node = await renderTextarea(\n+      <textarea value=\"giraffe\" onChange={emptyFunction} \/>,\n+      container,\n+      root,\n+    );\n \n     expect(node.value).toBe('giraffe');\n \n-    stub = ReactDOM.render(\n-      <textarea value=\"gorilla\" onChange={emptyFunction} \/>,\n-      container,\n-    );\n+    await act(() => {\n+      root.render(<textarea value=\"gorilla\" onChange={emptyFunction} \/>);\n+    });\n+\n     expect(node.value).toEqual('gorilla');\n   });\n \n-  it('will not initially assign an empty value (covers case where firefox throws a validation error when required attribute is set)', () => {\n+  it('will not initially assign an empty value (covers case where firefox throws a validation error when required attribute is set)', async () => {\n     const container = document.createElement('div');\n \n     let counter = 0;\n@@ -156,7 +205,10 @@ describe('ReactDOMTextarea', () => {\n       },\n     );\n \n-    ReactDOM.render(<textarea value=\"\" readOnly={true} \/>, container);\n+    const root = ReactDOMClient.createRoot(container);\n+    await act(() => {\n+      root.render(<textarea value=\"\" readOnly={true} \/>);\n+    });\n \n     expect(counter).toEqual(0);\n   });\n@@ -178,38 +230,50 @@ describe('ReactDOMTextarea', () => {\n     expect(div.firstChild.getAttribute('defaultValue')).toBe(null);\n   });\n \n-  it('should allow setting `value` to `true`', () => {\n+  it('should allow setting `value` to `true`', async () => {\n     const container = document.createElement('div');\n-    let stub = <textarea value=\"giraffe\" onChange={emptyFunction} \/>;\n-    const node = renderTextarea(stub, container);\n+    const root = ReactDOMClient.createRoot(container);\n+    const node = await renderTextarea(\n+      <textarea value=\"giraffe\" onChange={emptyFunction} \/>,\n+      container,\n+      root,\n+    );\n \n     expect(node.value).toBe('giraffe');\n \n-    stub = ReactDOM.render(\n-      <textarea value={true} onChange={emptyFunction} \/>,\n-      container,\n-    );\n+    await act(() => {\n+      root.render(<textarea value={true} onChange={emptyFunction} \/>);\n+    });\n+\n     expect(node.value).toEqual('true');\n   });\n \n-  it('should allow setting `value` to `false`', () => {\n+  it('should allow setting `value` to `false`', async () => {\n     const container = document.createElement('div');\n-    let stub = <textarea value=\"giraffe\" onChange={emptyFunction} \/>;\n-    const node = renderTextarea(stub, container);\n+    const root = ReactDOMClient.createRoot(container);\n+    const node = await renderTextarea(\n+      <textarea value=\"giraffe\" onChange={emptyFunction} \/>,\n+      container,\n+      root,\n+    );\n \n     expect(node.value).toBe('giraffe');\n \n-    stub = ReactDOM.render(\n-      <textarea value={false} onChange={emptyFunction} \/>,\n-      container,\n-    );\n+    await act(() => {\n+      root.render(<textarea value={false} onChange={emptyFunction} \/>);\n+    });\n+\n     expect(node.value).toEqual('false');\n   });\n \n-  it('should allow setting `value` to `objToString`', () => {\n+  it('should allow setting `value` to `objToString`', async () => {\n     const container = document.createElement('div');\n-    let stub = <textarea value=\"giraffe\" onChange={emptyFunction} \/>;\n-    const node = renderTextarea(stub, container);\n+    const root = ReactDOMClient.createRoot(container);\n+    const node = await renderTextarea(\n+      <textarea value=\"giraffe\" onChange={emptyFunction} \/>,\n+      container,\n+      root,\n+    );\n \n     expect(node.value).toBe('giraffe');\n \n@@ -218,14 +282,15 @@ describe('ReactDOMTextarea', () => {\n         return 'foo';\n       },\n     };\n-    stub = ReactDOM.render(\n-      <textarea value={objToString} onChange={emptyFunction} \/>,\n-      container,\n-    );\n+\n+    await act(() => {\n+      root.render(<textarea value={objToString} onChange={emptyFunction} \/>);\n+    });\n+\n     expect(node.value).toEqual('foo');\n   });\n \n-  it('should throw when value is set to a Temporal-like object', () => {\n+  it('should throw when value is set to a Temporal-like object', async () => {\n     class TemporalLike {\n       valueOf() {\n         \/\/ Throwing here is the behavior of ECMAScript \"Temporal\" date\/time API.\n@@ -237,51 +302,72 @@ describe('ReactDOMTextarea', () => {\n       }\n     }\n     const container = document.createElement('div');\n-    const stub = <textarea value=\"giraffe\" onChange={emptyFunction} \/>;\n-    const node = renderTextarea(stub, container);\n+    const root = ReactDOMClient.createRoot(container);\n+    const node = await renderTextarea(\n+      <textarea value=\"giraffe\" onChange={emptyFunction} \/>,\n+      container,\n+      root,\n+    );\n \n     expect(node.value).toBe('giraffe');\n \n-    const test = () =>\n-      ReactDOM.render(\n-        <textarea value={new TemporalLike()} onChange={emptyFunction} \/>,\n-        container,\n-      );\n-    expect(() =>\n-      expect(test).toThrowError(new TypeError('prod message')),\n+    const test = async () => {\n+      await act(() => {\n+        root.render(\n+          <textarea value={new TemporalLike()} onChange={emptyFunction} \/>,\n+        );\n+      });\n+    };\n+    await expect(() =>\n+      expect(test).rejects.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   });\n \n-  it('should take updates to `defaultValue` for uncontrolled textarea', () => {\n+  it('should take updates to `defaultValue` for uncontrolled textarea', async () => {\n     const container = document.createElement('div');\n+    const root = ReactDOMClient.createRoot(container);\n+    await act(() => {\n+      root.render(<textarea defaultValue=\"0\" \/>);\n+    });\n \n-    const node = ReactDOM.render(<textarea defaultValue=\"0\" \/>, container);\n+    const node = container.firstChild;\n \n     expect(node.value).toBe('0');\n \n-    ReactDOM.render(<textarea defaultValue=\"1\" \/>, container);\n+    await act(() => {\n+      root.render(<textarea defaultValue=\"1\" \/>);\n+    });\n \n     expect(node.value).toBe('0');\n   });\n \n-  it('should take updates to children in lieu of `defaultValue` for uncontrolled textarea', () => {\n+  it('should take updates to children in lieu of `defaultValue` for uncontrolled textarea', async () => {\n     const container = document.createElement('div');\n+    const root = ReactDOMClient.createRoot(container);\n+    await act(() => {\n+      root.render(<textarea defaultValue=\"0\" \/>);\n+    });\n \n-    const node = ReactDOM.render(<textarea defaultValue=\"0\" \/>, container);\n+    const node = container.firstChild;\n \n     expect(node.value).toBe('0');\n \n-    ReactDOM.render(<textarea>1<\/textarea>, container);\n+    await act(() => {\n+      root.render(<textarea>1<\/textarea>);\n+    });\n \n     expect(node.value).toBe('0');\n   });\n \n-  it('should not incur unnecessary DOM mutations', () => {\n+  it('should not incur unnecessary DOM mutations', async () => {\n     const container = document.createElement('div');\n-    ReactDOM.render(<textarea value=\"a\" onChange={emptyFunction} \/>, container);\n+    const root = ReactDOMClient.createRoot(container);\n+    await act(() => {\n+      root.render(<textarea value=\"a\" onChange={emptyFunction} \/>);\n+    });\n \n     const node = container.firstChild;\n     let nodeValue = 'a';\n@@ -295,25 +381,35 @@ describe('ReactDOMTextarea', () => {\n       }),\n     });\n \n-    ReactDOM.render(<textarea value=\"a\" onChange={emptyFunction} \/>, container);\n+    await act(() => {\n+      root.render(<textarea value=\"a\" onChange={emptyFunction} \/>);\n+    });\n+\n     expect(nodeValueSetter).toHaveBeenCalledTimes(0);\n \n-    ReactDOM.render(<textarea value=\"b\" onChange={emptyFunction} \/>, container);\n+    await act(() => {\n+      root.render(<textarea value=\"b\" onChange={emptyFunction} \/>);\n+    });\n+\n     expect(nodeValueSetter).toHaveBeenCalledTimes(1);\n   });\n \n-  it('should properly control a value of number `0`', () => {\n-    const stub = <textarea value={0} onChange={emptyFunction} \/>;\n+  it('should properly control a value of number `0`', async () => {\n     const setUntrackedValue = Object.getOwnPropertyDescriptor(\n       HTMLTextAreaElement.prototype,\n       'value',\n     ).set;\n \n     const container = document.createElement('div');\n+    const root = ReactDOMClient.createRoot(container);\n     document.body.appendChild(container);\n \n     try {\n-      const node = renderTextarea(stub, container);\n+      const node = await renderTextarea(\n+        <textarea value={0} onChange={emptyFunction} \/>,\n+        container,\n+        root,\n+      );\n \n       setUntrackedValue.call(node, 'giraffe');\n       node.dispatchEvent(\n@@ -326,30 +422,41 @@ describe('ReactDOMTextarea', () => {\n   });\n \n   if (ReactFeatureFlags.disableTextareaChildren) {\n-    it('should ignore children content', () => {\n+    it('should ignore children content', async () => {\n       const container = document.createElement('div');\n-      let stub = <textarea>giraffe<\/textarea>;\n+      const root = ReactDOMClient.createRoot(container);\n       let node;\n \n-      expect(() => {\n-        node = renderTextarea(stub, container);\n+      await expect(async () => {\n+        node = await renderTextarea(\n+          <textarea>giraffe<\/textarea>,\n+          container,\n+          root,\n+        );\n       }).toErrorDev(\n         'Use the `defaultValue` or `value` props instead of setting children on <textarea>.',\n       );\n       expect(node.value).toBe('');\n-      \/\/ Changing children should do nothing, it functions like `defaultValue`.\n-      stub = ReactDOM.render(<textarea>gorilla<\/textarea>, container);\n+\n+      await act(() => {\n+        root.render(<textarea>gorilla<\/textarea>);\n+      });\n+\n       expect(node.value).toEqual('');\n     });\n   }\n \n   if (ReactFeatureFlags.disableTextareaChildren) {\n-    it('should receive defaultValue and still ignore children content', () => {\n+    it('should receive defaultValue and still ignore children content', async () => {\n+      const container = document.createElement('div');\n+      const root = ReactDOMClient.createRoot(container);\n       let node;\n \n-      expect(() => {\n-        node = renderTextarea(\n+      await expect(async () => {\n+        node = await renderTextarea(\n           <textarea defaultValue=\"dragon\">monkey<\/textarea>,\n+          container,\n+          root,\n         );\n       }).toErrorDev(\n         'Use the `defaultValue` or `value` props instead of setting children on <textarea>.',\n@@ -359,67 +466,80 @@ describe('ReactDOMTextarea', () => {\n   }\n \n   if (!ReactFeatureFlags.disableTextareaChildren) {\n-    it('should treat children like `defaultValue`', () => {\n+    it('should treat children like `defaultValue`', async () => {\n       const container = document.createElement('div');\n-      let stub = <textarea>giraffe<\/textarea>;\n+      const root = ReactDOMClient.createRoot(container);\n       let node;\n \n-      expect(() => {\n-        node = renderTextarea(stub, container);\n+      await expect(async () => {\n+        node = await renderTextarea(\n+          <textarea>giraffe<\/textarea>,\n+          container,\n+          root,\n+        );\n       }).toErrorDev(\n         'Use the `defaultValue` or `value` props instead of setting children on <textarea>.',\n       );\n \n       expect(node.value).toBe('giraffe');\n \n-      \/\/ Changing children should do nothing, it functions like `defaultValue`.\n-      stub = ReactDOM.render(<textarea>gorilla<\/textarea>, container);\n+      await act(() => {\n+        root.render(<textarea>gorilla<\/textarea>);\n+      });\n+\n       expect(node.value).toEqual('giraffe');\n     });\n   }\n \n-  it('should keep value when switching to uncontrolled element if not changed', () => {\n+  it('should keep value when switching to uncontrolled element if not changed', async () => {\n     const container = document.createElement('div');\n-\n-    const node = renderTextarea(\n+    const root = ReactDOMClient.createRoot(container);\n+    const node = await renderTextarea(\n       <textarea value=\"kitten\" onChange={emptyFunction} \/>,\n       container,\n+      root,\n     );\n \n     expect(node.value).toBe('kitten');\n \n-    ReactDOM.render(<textarea defaultValue=\"gorilla\" \/>, container);\n+    await act(() => {\n+      root.render(<textarea defaultValue=\"gorilla\" \/>);\n+    });\n \n     expect(node.value).toEqual('kitten');\n   });\n \n-  it('should keep value when switching to uncontrolled element if changed', () => {\n+  it('should keep value when switching to uncontrolled element if changed', async () => {\n     const container = document.createElement('div');\n-\n-    const node = renderTextarea(\n+    const root = ReactDOMClient.createRoot(container);\n+    const node = await renderTextarea(\n       <textarea value=\"kitten\" onChange={emptyFunction} \/>,\n       container,\n+      root,\n     );\n \n     expect(node.value).toBe('kitten');\n \n-    ReactDOM.render(\n-      <textarea value=\"puppies\" onChange={emptyFunction} \/>,\n-      container,\n-    );\n+    await act(() => {\n+      root.render(<textarea value=\"puppies\" onChange={emptyFunction} \/>);\n+    });\n \n     expect(node.value).toBe('puppies');\n \n-    ReactDOM.render(<textarea defaultValue=\"gorilla\" \/>, container);\n+    await act(() => {\n+      root.render(<textarea defaultValue=\"gorilla\" \/>);\n+    });\n \n     expect(node.value).toEqual('puppies');\n   });\n \n   if (ReactFeatureFlags.disableTextareaChildren) {\n-    it('should ignore numbers as children', () => {\n+    it('should ignore numbers as children', async () => {\n+      const container = document.createElement('div');\n+      const root = ReactDOMClient.createRoot(container);\n       let node;\n-      expect(() => {\n-        node = renderTextarea(<textarea>{17}<\/textarea>);\n+      await expect(async () => {\n+        node = await renderTextarea(<textarea>{17}<\/textarea>, container, root);\n       }).toErrorDev(\n         'Use the `defaultValue` or `value` props instead of setting children on <textarea>.',\n       );\n@@ -428,10 +548,12 @@ describe('ReactDOMTextarea', () => {\n   }\n \n   if (!ReactFeatureFlags.disableTextareaChildren) {\n-    it('should allow numbers as children', () => {\n+    it('should allow numbers as children', async () => {\n+      const container = document.createElement('div');\n+      const root = ReactDOMClient.createRoot(container);\n       let node;\n-      expect(() => {\n-        node = renderTextarea(<textarea>{17}<\/textarea>);\n+      await expect(async () => {\n+        node = await renderTextarea(<textarea>{17}<\/textarea>, container, root);\n       }).toErrorDev(\n         'Use the `defaultValue` or `value` props instead of setting children on <textarea>.',\n       );\n@@ -440,10 +562,16 @@ describe('ReactDOMTextarea', () => {\n   }\n \n   if (ReactFeatureFlags.disableTextareaChildren) {\n-    it('should ignore booleans as children', () => {\n+    it('should ignore booleans as children', async () => {\n+      const container = document.createElement('div');\n+      const root = ReactDOMClient.createRoot(container);\n       let node;\n-      expect(() => {\n-        node = renderTextarea(<textarea>{false}<\/textarea>);\n+      await expect(async () => {\n+        node = await renderTextarea(\n+          <textarea>{false}<\/textarea>,\n+          container,\n+          root,\n+        );\n       }).toErrorDev(\n         'Use the `defaultValue` or `value` props instead of setting children on <textarea>.',\n       );\n@@ -452,10 +580,16 @@ describe('ReactDOMTextarea', () => {\n   }\n \n   if (!ReactFeatureFlags.disableTextareaChildren) {\n-    it('should allow booleans as children', () => {\n+    it('should allow booleans as children', async () => {\n+      const container = document.createElement('div');\n+      const root = ReactDOMClient.createRoot(container);\n       let node;\n-      expect(() => {\n-        node = renderTextarea(<textarea>{false}<\/textarea>);\n+      await expect(async () => {\n+        node = await renderTextarea(\n+          <textarea>{false}<\/textarea>,\n+          container,\n+          root,\n+        );\n       }).toErrorDev(\n         'Use the `defaultValue` or `value` props instead of setting children on <textarea>.',\n       );\n@@ -464,15 +598,21 @@ describe('ReactDOMTextarea', () => {\n   }\n \n   if (ReactFeatureFlags.disableTextareaChildren) {\n-    it('should ignore objects as children', () => {\n+    it('should ignore objects as children', async () => {\n+      const container = document.createElement('div');\n+      const root = ReactDOMClient.createRoot(container);\n       const obj = {\n         toString: function () {\n           return 'sharkswithlasers';\n         },\n       };\n       let node;\n-      expect(() => {\n-        node = renderTextarea(<textarea>{obj}<\/textarea>);\n+      await expect(async () => {\n+        node = await renderTextarea(\n+          <textarea>{obj}<\/textarea>,\n+          container,\n+          root,\n+        );\n       }).toErrorDev(\n         'Use the `defaultValue` or `value` props instead of setting children on <textarea>.',\n       );\n@@ -481,15 +621,21 @@ describe('ReactDOMTextarea', () => {\n   }\n \n   if (!ReactFeatureFlags.disableTextareaChildren) {\n-    it('should allow objects as children', () => {\n+    it('should allow objects as children', async () => {\n+      const container = document.createElement('div');\n+      const root = ReactDOMClient.createRoot(container);\n       const obj = {\n         toString: function () {\n           return 'sharkswithlasers';\n         },\n       };\n       let node;\n-      expect(() => {\n-        node = renderTextarea(<textarea>{obj}<\/textarea>);\n+      await expect(async () => {\n+        node = await renderTextarea(\n+          <textarea>{obj}<\/textarea>,\n+          container,\n+          root,\n+        );\n       }).toErrorDev(\n         'Use the `defaultValue` or `value` props instead of setting children on <textarea>.',\n       );\n@@ -498,64 +644,86 @@ describe('ReactDOMTextarea', () => {\n   }\n \n   if (!ReactFeatureFlags.disableTextareaChildren) {\n-    it('should throw with multiple or invalid children', () => {\n-      expect(() => {\n-        expect(() =>\n-          ReactTestUtils.renderIntoDocument(\n-            <textarea>\n-              {'hello'}\n-              {'there'}\n-            <\/textarea>,\n-          ),\n-        ).toThrow('<textarea> can only have at most one child');\n-      }).toErrorDev(\n+    it('should throw with multiple or invalid children', async () => {\n+      const container = document.createElement('div');\n+      const root = ReactDOMClient.createRoot(container);\n+      await expect(async () => {\n+        await expect(async () => {\n+          await act(() => {\n+            root.render(\n+              <textarea>\n+                {'hello'}\n+                {'there'}\n+              <\/textarea>,\n+            );\n+          });\n+        }).rejects.toThrow('<textarea> can only have at most one child');\n+      }).toErrorDev([\n         'Use the `defaultValue` or `value` props instead of setting children on <textarea>.',\n-      );\n+        'Use the `defaultValue` or `value` props instead of setting children on <textarea>.',\n+      ]);\n \n       let node;\n-      expect(() => {\n-        expect(\n-          () =>\n-            (node = renderTextarea(\n+      await expect(async () => {\n+        await expect(\n+          (async () =>\n+            (node = await renderTextarea(\n               <textarea>\n                 <strong \/>\n               <\/textarea>,\n-            )),\n-        ).not.toThrow();\n-      }).toErrorDev(\n+              container,\n+              root,\n+            )))(),\n+        ).resolves.not.toThrow();\n+      }).toErrorDev([\n         'Use the `defaultValue` or `value` props instead of setting children on <textarea>.',\n-      );\n+      ]);\n \n       expect(node.value).toBe('[object Object]');\n     });\n   }\n \n-  it('should unmount', () => {\n+  it('should unmount', async () => {\n     const container = document.createElement('div');\n-    renderTextarea(<textarea \/>, container);\n-    ReactDOM.unmountComponentAtNode(container);\n+    const root = ReactDOMClient.createRoot(container);\n+    await act(() => {\n+      root.render(<textarea \/>);\n+    });\n+\n+    await act(() => {\n+      root.unmount();\n+    });\n   });\n \n-  it('should warn if value is null', () => {\n-    expect(() =>\n-      ReactTestUtils.renderIntoDocument(<textarea value={null} \/>),\n-    ).toErrorDev(\n+  it('should warn if value is null', async () => {\n+    const container = document.createElement('div');\n+    const root = ReactDOMClient.createRoot(container);\n+    await expect(async () => {\n+      await act(() => {\n+        root.render(<textarea value={null} \/>);\n+      });\n+    }).toErrorDev(\n       '`value` prop on `textarea` should not be null. ' +\n         'Consider using an empty string to clear the component or `undefined` ' +\n         'for uncontrolled components.',\n     );\n \n-    \/\/ No additional warnings are expected\n-    ReactTestUtils.renderIntoDocument(<textarea value={null} \/>);\n+    await act(() => {\n+      root.render(<textarea value={null} \/>);\n+    });\n   });\n \n-  it('should warn if value and defaultValue are specified', () => {\n+  it('should warn if value and defaultValue are specified', async () => {\n     const InvalidComponent = () => (\n       <textarea value=\"foo\" defaultValue=\"bar\" readOnly={true} \/>\n     );\n-    expect(() =>\n-      ReactTestUtils.renderIntoDocument(<InvalidComponent \/>),\n-    ).toErrorDev(\n+    let container = document.createElement('div');\n+    let root = ReactDOMClient.createRoot(container);\n+    await expect(async () => {\n+      await act(() => {\n+        root.render(<InvalidComponent \/>);\n+      });\n+    }).toErrorDev(\n       'InvalidComponent contains a textarea with both value and defaultValue props. ' +\n         'Textarea elements must be either controlled or uncontrolled ' +\n         '(specify either the value prop, or the defaultValue prop, but not ' +\n@@ -564,18 +732,33 @@ describe('ReactDOMTextarea', () => {\n         'https:\/\/reactjs.org\/link\/controlled-components',\n     );\n \n-    \/\/ No additional warnings are expected\n-    ReactTestUtils.renderIntoDocument(<InvalidComponent \/>);\n+    container = document.createElement('div');\n+    root = ReactDOMClient.createRoot(container);\n+\n+    await act(() => {\n+      root.render(<InvalidComponent \/>);\n+    });\n   });\n \n-  it('should not warn about missing onChange in uncontrolled textareas', () => {\n+  it('should not warn about missing onChange in uncontrolled textareas', async () => {\n     const container = document.createElement('div');\n-    ReactDOM.render(<textarea \/>, container);\n-    ReactDOM.unmountComponentAtNode(container);\n-    ReactDOM.render(<textarea value={undefined} \/>, container);\n+    let root = ReactDOMClient.createRoot(container);\n+\n+    await act(() => {\n+      root.render(<textarea \/>);\n+    });\n+\n+    await act(() => {\n+      root.unmount();\n+    });\n+    root = ReactDOMClient.createRoot(container);\n+\n+    await act(() => {\n+      root.render(<textarea value={undefined} \/>);\n+    });\n   });\n \n-  it('does not set textContent if value is unchanged', () => {\n+  it('does not set textContent if value is unchanged', async () => {\n     const container = document.createElement('div');\n     let node;\n     let instance;\n@@ -609,7 +792,11 @@ describe('ReactDOMTextarea', () => {\n         );\n       }\n     }\n-    ReactDOM.render(<App \/>, container);\n+    const root = ReactDOMClient.createRoot(container);\n+    await act(() => {\n+      root.render(<App \/>);\n+    });\n+\n     defaultValue = node.defaultValue;\n     Object.defineProperty(node, 'defaultValue', {get, set});\n     instance.setState({count: 1});\n@@ -617,59 +804,77 @@ describe('ReactDOMTextarea', () => {\n   });\n \n   describe('When given a Symbol value', () => {\n-    it('treats initial Symbol value as an empty string', () => {\n+    it('treats initial Symbol value as an empty string', async () => {\n       const container = document.createElement('div');\n-      expect(() =>\n-        ReactDOM.render(\n-          <textarea value={Symbol('foobar')} onChange={() => {}} \/>,\n-          container,\n-        ),\n-      ).toErrorDev('Invalid value for prop `value`');\n+      const root = ReactDOMClient.createRoot(container);\n+      await expect(async () => {\n+        await act(() => {\n+          root.render(\n+            <textarea value={Symbol('foobar')} onChange={() => {}} \/>,\n+          );\n+        });\n+      }).toErrorDev('Invalid value for prop `value`');\n       const node = container.firstChild;\n \n       expect(node.value).toBe('');\n     });\n \n-    it('treats initial Symbol children as an empty string', () => {\n+    it('treats initial Symbol children as an empty string', async () => {\n       const container = document.createElement('div');\n-      expect(() =>\n-        ReactDOM.render(\n-          <textarea onChange={() => {}}>{Symbol('foo')}<\/textarea>,\n-          container,\n-        ),\n-      ).toErrorDev('Use the `defaultValue` or `value` props');\n+      const root = ReactDOMClient.createRoot(container);\n+      await expect(async () => {\n+        await act(() => {\n+          root.render(<textarea onChange={() => {}}>{Symbol('foo')}<\/textarea>);\n+        });\n+      }).toErrorDev('Use the `defaultValue` or `value` props');\n       const node = container.firstChild;\n \n       expect(node.value).toBe('');\n     });\n \n-    it('treats updated Symbol value as an empty string', () => {\n+    it('treats updated Symbol value as an empty string', async () => {\n       const container = document.createElement('div');\n-      ReactDOM.render(<textarea value=\"foo\" onChange={() => {}} \/>, container);\n-      expect(() =>\n-        ReactDOM.render(\n-          <textarea value={Symbol('foo')} onChange={() => {}} \/>,\n-          container,\n-        ),\n-      ).toErrorDev('Invalid value for prop `value`');\n+      const root = ReactDOMClient.createRoot(container);\n+\n+      await act(() => {\n+        root.render(<textarea value=\"foo\" onChange={() => {}} \/>);\n+      });\n+\n+      await expect(async () => {\n+        await act(() => {\n+          root.render(<textarea value={Symbol('foo')} onChange={() => {}} \/>);\n+        });\n+      }).toErrorDev('Invalid value for prop `value`');\n       const node = container.firstChild;\n \n       expect(node.value).toBe('');\n     });\n \n-    it('treats initial Symbol defaultValue as an empty string', () => {\n+    it('treats initial Symbol defaultValue as an empty string', async () => {\n       const container = document.createElement('div');\n-      ReactDOM.render(<textarea defaultValue={Symbol('foobar')} \/>, container);\n+      const root = ReactDOMClient.createRoot(container);\n+\n+      await act(() => {\n+        root.render(<textarea defaultValue={Symbol('foobar')} \/>);\n+      });\n+\n       const node = container.firstChild;\n \n       \/\/ TODO: defaultValue is a reserved prop and is not validated. Check warnings when they are.\n       expect(node.value).toBe('');\n     });\n \n-    it('treats updated Symbol defaultValue as an empty string', () => {\n+    it('treats updated Symbol defaultValue as an empty string', async () => {\n       const container = document.createElement('div');\n-      ReactDOM.render(<textarea defaultValue=\"foo\" \/>, container);\n-      ReactDOM.render(<textarea defaultValue={Symbol('foobar')} \/>, container);\n+      const root = ReactDOMClient.createRoot(container);\n+      await act(() => {\n+        root.render(<textarea defaultValue=\"foo\" \/>);\n+      });\n+\n+      await act(() => {\n+        root.render(<textarea defaultValue={Symbol('foobar')} \/>);\n+      });\n+\n       const node = container.firstChild;\n \n       \/\/ TODO: defaultValue is a reserved prop and is not validated. Check warnings when they are.\n@@ -678,59 +883,76 @@ describe('ReactDOMTextarea', () => {\n   });\n \n   describe('When given a function value', () => {\n-    it('treats initial function value as an empty string', () => {\n+    it('treats initial function value as an empty string', async () => {\n       const container = document.createElement('div');\n-      expect(() =>\n-        ReactDOM.render(\n-          <textarea value={() => {}} onChange={() => {}} \/>,\n-          container,\n-        ),\n-      ).toErrorDev('Invalid value for prop `value`');\n+      await expect(async () => {\n+        const root = ReactDOMClient.createRoot(container);\n+\n+        await act(() => {\n+          root.render(<textarea value={() => {}} onChange={() => {}} \/>);\n+        });\n+      }).toErrorDev('Invalid value for prop `value`');\n       const node = container.firstChild;\n \n       expect(node.value).toBe('');\n     });\n \n-    it('treats initial function children as an empty string', () => {\n+    it('treats initial function children as an empty string', async () => {\n       const container = document.createElement('div');\n-      expect(() =>\n-        ReactDOM.render(\n-          <textarea onChange={() => {}}>{() => {}}<\/textarea>,\n-          container,\n-        ),\n-      ).toErrorDev('Use the `defaultValue` or `value` props');\n+      await expect(async () => {\n+        const root = ReactDOMClient.createRoot(container);\n+\n+        await act(() => {\n+          root.render(<textarea onChange={() => {}}>{() => {}}<\/textarea>);\n+        });\n+      }).toErrorDev('Use the `defaultValue` or `value` props');\n       const node = container.firstChild;\n \n       expect(node.value).toBe('');\n     });\n \n-    it('treats updated function value as an empty string', () => {\n+    it('treats updated function value as an empty string', async () => {\n       const container = document.createElement('div');\n-      ReactDOM.render(<textarea value=\"foo\" onChange={() => {}} \/>, container);\n-      expect(() =>\n-        ReactDOM.render(\n-          <textarea value={() => {}} onChange={() => {}} \/>,\n-          container,\n-        ),\n-      ).toErrorDev('Invalid value for prop `value`');\n+      const root = ReactDOMClient.createRoot(container);\n+\n+      await act(() => {\n+        root.render(<textarea value=\"foo\" onChange={() => {}} \/>);\n+      });\n+\n+      await expect(async () => {\n+        await act(() => {\n+          root.render(<textarea value={() => {}} onChange={() => {}} \/>);\n+        });\n+      }).toErrorDev('Invalid value for prop `value`');\n       const node = container.firstChild;\n \n       expect(node.value).toBe('');\n     });\n \n-    it('treats initial function defaultValue as an empty string', () => {\n+    it('treats initial function defaultValue as an empty string', async () => {\n       const container = document.createElement('div');\n-      ReactDOM.render(<textarea defaultValue={() => {}} \/>, container);\n+      const root = ReactDOMClient.createRoot(container);\n+      await act(() => {\n+        root.render(<textarea defaultValue={() => {}} \/>);\n+      });\n+\n       const node = container.firstChild;\n \n       \/\/ TODO: defaultValue is a reserved prop and is not validated. Check warnings when they are.\n       expect(node.value).toBe('');\n     });\n \n-    it('treats updated function defaultValue as an empty string', () => {\n+    it('treats updated function defaultValue as an empty string', async () => {\n       const container = document.createElement('div');\n-      ReactDOM.render(<textarea defaultValue=\"foo\" \/>, container);\n-      ReactDOM.render(<textarea defaultValue={() => {}} \/>, container);\n+      const root = ReactDOMClient.createRoot(container);\n+      await act(() => {\n+        root.render(<textarea defaultValue=\"foo\" \/>);\n+      });\n+\n+      await act(() => {\n+        root.render(<textarea defaultValue={() => {}} \/>);\n+      });\n+\n       const node = container.firstChild;\n \n       \/\/ TODO: defaultValue is a reserved prop and is not validated. Check warnings when they are.\n@@ -738,69 +960,103 @@ describe('ReactDOMTextarea', () => {\n     });\n   });\n \n-  it('should remove previous `defaultValue`', () => {\n+  it('should remove previous `defaultValue`', async () => {\n     const container = document.createElement('div');\n-    const node = ReactDOM.render(<textarea defaultValue=\"0\" \/>, container);\n+    const root = ReactDOMClient.createRoot(container);\n+    await act(() => {\n+      root.render(<textarea defaultValue=\"0\" \/>);\n+    });\n+\n+    const node = container.firstChild;\n \n     expect(node.value).toBe('0');\n     expect(node.defaultValue).toBe('0');\n \n-    ReactDOM.render(<textarea \/>, container);\n+    await act(() => {\n+      root.render(<textarea \/>);\n+    });\n+\n     expect(node.defaultValue).toBe('');\n   });\n \n-  it('should treat `defaultValue={null}` as missing', () => {\n+  it('should treat `defaultValue={null}` as missing', async () => {\n     const container = document.createElement('div');\n-    const node = ReactDOM.render(<textarea defaultValue=\"0\" \/>, container);\n+    const root = ReactDOMClient.createRoot(container);\n+    await act(() => {\n+      root.render(<textarea defaultValue=\"0\" \/>);\n+    });\n+\n+    const node = container.firstChild;\n \n     expect(node.value).toBe('0');\n     expect(node.defaultValue).toBe('0');\n \n-    ReactDOM.render(<textarea defaultValue={null} \/>, container);\n+    await act(() => {\n+      root.render(<textarea defaultValue={null} \/>);\n+    });\n+\n     expect(node.defaultValue).toBe('');\n   });\n \n-  it('should not warn about missing onChange if value is not set', () => {\n-    expect(() => {\n-      ReactTestUtils.renderIntoDocument(<textarea \/>);\n-    }).not.toThrow();\n+  it('should not warn about missing onChange if value is not set', async () => {\n+    const container = document.createElement('div');\n+    const root = ReactDOMClient.createRoot(container);\n+    await expect(\n+      act(() => {\n+        root.render(<textarea \/>);\n+      }),\n+    ).resolves.not.toThrow();\n   });\n \n-  it('should not warn about missing onChange if value is undefined', () => {\n-    expect(() => {\n-      ReactTestUtils.renderIntoDocument(<textarea value={undefined} \/>);\n-    }).not.toThrow();\n+  it('should not warn about missing onChange if value is undefined', async () => {\n+    const container = document.createElement('div');\n+    const root = ReactDOMClient.createRoot(container);\n+    await expect(\n+      act(() => {\n+        root.render(<textarea value={undefined} \/>);\n+      }),\n+    ).resolves.not.toThrow();\n   });\n \n-  it('should not warn about missing onChange if onChange is set', () => {\n-    expect(() => {\n-      const change = jest.fn();\n-      ReactTestUtils.renderIntoDocument(\n-        <textarea value=\"something\" onChange={change} \/>,\n-      );\n-    }).not.toThrow();\n+  it('should not warn about missing onChange if onChange is set', async () => {\n+    const change = jest.fn();\n+    const container = document.createElement('div');\n+    const root = ReactDOMClient.createRoot(container);\n+    await expect(\n+      act(() => {\n+        root.render(<textarea value=\"something\" onChange={change} \/>);\n+      }),\n+    ).resolves.not.toThrow();\n   });\n \n-  it('should not warn about missing onChange if disabled is true', () => {\n-    expect(() => {\n-      ReactTestUtils.renderIntoDocument(\n-        <textarea value=\"something\" disabled={true} \/>,\n-      );\n-    }).not.toThrow();\n+  it('should not warn about missing onChange if disabled is true', async () => {\n+    const container = document.createElement('div');\n+    const root = ReactDOMClient.createRoot(container);\n+    await expect(\n+      act(() => {\n+        root.render(<textarea value=\"something\" disabled={true} \/>);\n+      }),\n+    ).resolves.not.toThrow();\n   });\n \n-  it('should not warn about missing onChange if value is not set', () => {\n-    expect(() => {\n-      ReactTestUtils.renderIntoDocument(\n-        <textarea value=\"something\" readOnly={true} \/>,\n-      );\n-    }).not.toThrow();\n+  it('should not warn about missing onChange if value is not set', async () => {\n+    const container = document.createElement('div');\n+    const root = ReactDOMClient.createRoot(container);\n+    await expect(\n+      act(() => {\n+        root.render(<textarea value=\"something\" readOnly={true} \/>);\n+      }),\n+    ).resolves.not.toThrow();\n   });\n \n-  it('should warn about missing onChange if value is false', () => {\n-    expect(() =>\n-      ReactTestUtils.renderIntoDocument(<textarea value={false} \/>),\n-    ).toErrorDev(\n+  it('should warn about missing onChange if value is false', async () => {\n+    const container = document.createElement('div');\n+    const root = ReactDOMClient.createRoot(container);\n+    await expect(async () => {\n+      await act(() => {\n+        root.render(<textarea value={false} \/>);\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@@ -808,10 +1064,14 @@ describe('ReactDOMTextarea', () => {\n     );\n   });\n \n-  it('should warn about missing onChange if value is 0', () => {\n-    expect(() =>\n-      ReactTestUtils.renderIntoDocument(<textarea value={0} \/>),\n-    ).toErrorDev(\n+  it('should warn about missing onChange if value is 0', async () => {\n+    const container = document.createElement('div');\n+    const root = ReactDOMClient.createRoot(container);\n+    await expect(async () => {\n+      await act(() => {\n+        root.render(<textarea value={0} \/>);\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@@ -819,10 +1079,14 @@ describe('ReactDOMTextarea', () => {\n     );\n   });\n \n-  it('should warn about missing onChange if value is \"0\"', () => {\n-    expect(() =>\n-      ReactTestUtils.renderIntoDocument(<textarea value=\"0\" \/>),\n-    ).toErrorDev(\n+  it('should warn about missing onChange if value is \"0\"', async () => {\n+    const container = document.createElement('div');\n+    const root = ReactDOMClient.createRoot(container);\n+    await expect(async () => {\n+      await act(() => {\n+        root.render(<textarea value=\"0\" \/>);\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@@ -830,10 +1094,14 @@ describe('ReactDOMTextarea', () => {\n     );\n   });\n \n-  it('should warn about missing onChange if value is \"\"', () => {\n-    expect(() =>\n-      ReactTestUtils.renderIntoDocument(<textarea value=\"\" \/>),\n-    ).toErrorDev(\n+  it('should warn about missing onChange if value is \"\"', async () => {\n+    const container = document.createElement('div');\n+    const root = ReactDOMClient.createRoot(container);\n+    await expect(async () => {\n+      await act(() => {\n+        root.render(<textarea value=\"\" \/>);\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","files":[{"path":"packages\/react-dom\/src\/__tests__\/ReactDOMTextarea-test.js","status":"M"}],"body":"Also removes usage of `ReactTestUtils`","parents":["00d42ac3542179c55f936f395ede7abaeb5900a3"]}</article></body></html>

dillon1000/react

Files changed