{"files":[{"status":"M","path":"packages\/react-dom\/src\/__tests__\/ReactDOMComponentTree-test.js"},{"status":"A","path":"packages\/react-dom\/src\/__tests__\/ReactDOMLegacyComponentTree-test.internal.js"}],"patch":"diff --git a\/packages\/react-dom\/src\/__tests__\/ReactDOMComponentTree-test.js b\/packages\/react-dom\/src\/__tests__\/ReactDOMComponentTree-test.js\nindex 12d34a34a4..ffaae4f699 100644\n--- a\/packages\/react-dom\/src\/__tests__\/ReactDOMComponentTree-test.js\n+++ b\/packages\/react-dom\/src\/__tests__\/ReactDOMComponentTree-test.js\n@@ -11,12 +11,15 @@\n \n describe('ReactDOMComponentTree', () => {\n let React;\n- let ReactDOM;\n+ let ReactDOMClient;\n+ let act;\n let container;\n \n beforeEach(() => {\n React = require('react');\n- ReactDOM = require('react-dom');\n+ ReactDOMClient = require('react-dom\/client');\n+ act = require('internal-test-utils').act;\n+\n container = document.createElement('div');\n document.body.appendChild(container);\n });\n@@ -26,7 +29,7 @@ describe('ReactDOMComponentTree', () => {\n container = null;\n });\n \n- it('finds nodes for instances on events', () => {\n+ it('finds nodes for instances on events', async () => {\n const mouseOverID = 'mouseOverID';\n const clickID = 'clickID';\n let currentTargetID = null;\n@@ -34,17 +37,16 @@ describe('ReactDOMComponentTree', () => {\n \/\/ when an event is dispatched so we can test behavior by invoking\n \/\/ events on elements in the tree and confirming the expected node is\n \/\/ set as the current target\n- class Component extends React.Component {\n- handler = e => {\n+ function Component() {\n+ const handler = e => {\n currentTargetID = e.currentTarget.id;\n };\n- render() {\n- return (\n-

\n-

\n- <\/div>\n- );\n- }\n+\n+ return (\n+

\n+

\n+ <\/div>\n+ );\n }\n \n function simulateMouseEvent(elem, type) {\n@@ -54,8 +56,10 @@ describe('ReactDOMComponentTree', () => {\n elem.dispatchEvent(event);\n }\n \n- const component = ;\n- ReactDOM.render(component, container);\n+ const root = ReactDOMClient.createRoot(container);\n+ await act(() => {\n+ root.render();\n+ });\n expect(currentTargetID).toBe(null);\n simulateMouseEvent(document.getElementById(mouseOverID), 'mouseover');\n expect(currentTargetID).toBe(mouseOverID);\n@@ -63,25 +67,24 @@ describe('ReactDOMComponentTree', () => {\n expect(currentTargetID).toBe(clickID);\n });\n \n- it('finds closest instance for node when an event happens', () => {\n+ it('finds closest instance for node when an event happens', async () => {\n const nonReactElemID = 'aID';\n const innerHTML = {__html: `

<\/div>`};\n const closestInstanceID = 'closestInstance';\n let currentTargetID = null;\n \n- class ClosestInstance extends React.Component {\n- _onClick = e => {\n+ function ClosestInstance() {\n+ const onClick = e => {\n currentTargetID = e.currentTarget.id;\n };\n- render() {\n- return (\n- \n- );\n- }\n+\n+ return (\n+ \n+ );\n }\n \n function simulateClick(elem) {\n@@ -91,16 +94,22 @@ describe('ReactDOMComponentTree', () => {\n elem.dispatchEvent(event);\n }\n \n- const component = ;\n- ReactDOM.render(

{component}<\/section>, container);\n+ const root = ReactDOMClient.createRoot(container);\n+ await act(() => {\n+ root.render(\n+

\n+ \n+ <\/section>,\n+ );\n+ });\n expect(currentTargetID).toBe(null);\n simulateClick(document.getElementById(nonReactElemID));\n expect(currentTargetID).toBe(closestInstanceID);\n });\n \n- it('updates event handlers from fiber props', () => {\n+ it('updates event handlers from fiber props', async () => {\n let action = '';\n- let instance;\n+ let flip;\n const handlerA = () => (action = 'A');\n const handlerB = () => (action = 'B');\n \n@@ -111,55 +120,56 @@ describe('ReactDOMComponentTree', () => {\n target.dispatchEvent(event);\n }\n \n- class HandlerFlipper extends React.Component {\n- state = {flip: false};\n- flip() {\n- this.setState({flip: true});\n- }\n- render() {\n- return (\n- \n- );\n- }\n+ function HandlerFlipper() {\n+ const [flipVal, setFlipVal] = React.useState(false);\n+ flip = () => setFlipVal(true);\n+\n+ return

;\n }\n \n- ReactDOM.render(\n- (instance = n)} \/>,\n- container,\n- );\n+ const root = ReactDOMClient.createRoot(container);\n+ await act(() => {\n+ root.render();\n+ });\n const node = container.firstChild;\n- simulateMouseOver(node);\n+\n+ await act(() => {\n+ simulateMouseOver(node);\n+ });\n expect(action).toEqual('A');\n action = '';\n+\n \/\/ Render with the other event handler.\n- instance.flip();\n- simulateMouseOver(node);\n+ await act(() => {\n+ flip();\n+ });\n+ await act(() => {\n+ simulateMouseOver(node);\n+ });\n expect(action).toEqual('B');\n });\n \n- it('finds a controlled instance from node and gets its current fiber props', () => {\n+ it('finds a controlled instance from node and gets its current fiber props', async () => {\n+ let inputRef;\n const inputID = 'inputID';\n const startValue = undefined;\n const finishValue = 'finish';\n \n- class Controlled extends React.Component {\n- state = {value: startValue};\n- a = null;\n- _onChange = e => this.setState({value: e.currentTarget.value});\n- render() {\n- return (\n- (this.a = n)}\n- value={this.state.value}\n- onChange={this._onChange}\n- \/>\n- );\n- }\n+ function Controlled() {\n+ const [state, setState] = React.useState(startValue);\n+ const ref = React.useRef();\n+ inputRef = ref;\n+ const onChange = e => setState(e.currentTarget.value);\n+\n+ return (\n+ \n+ );\n }\n \n const setUntrackedInputValue = Object.getOwnPropertyDescriptor(\n@@ -175,9 +185,17 @@ describe('ReactDOMComponentTree', () => {\n elem.dispatchEvent(inputEvent);\n }\n \n- const component = ;\n- const instance = ReactDOM.render(component, container);\n- expect(() => simulateInput(instance.a, finishValue)).toErrorDev(\n+ const root = ReactDOMClient.createRoot(container);\n+ await act(() => {\n+ root.render();\n+ });\n+\n+ await expect(\n+ async () =>\n+ await act(() => {\n+ simulateInput(inputRef.current, finishValue);\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@@ -186,33 +204,4 @@ describe('ReactDOMComponentTree', () => {\n 'https:\/\/reactjs.org\/link\/controlled-components',\n );\n });\n-\n- it('finds instance of node that is attempted to be unmounted', () => {\n- const component =

;\n- const node = ReactDOM.render(

{component}<\/div>, container);\n- expect(() => ReactDOM.unmountComponentAtNode(node)).toErrorDev(\n- \"unmountComponentAtNode(): The node you're attempting to unmount \" +\n- 'was rendered by React and is not a top-level container. You may ' +\n- 'have accidentally passed in a React root node instead of its ' +\n- 'container.',\n- {withoutStack: true},\n- );\n- });\n-\n- it('finds instance from node to stop rendering over other react rendered components', () => {\n- const component = (\n-

\n- Hello<\/span>\n- <\/div>\n- );\n- const anotherComponent =

;\n- const instance = ReactDOM.render(component, container);\n- expect(() => ReactDOM.render(anotherComponent, instance)).toErrorDev(\n- 'render(...): Replacing React-rendered children with a new root ' +\n- 'component. If you intended to update the children of this node, ' +\n- 'you should instead have the existing children update their state ' +\n- 'and render the new components instead of calling ReactDOM.render.',\n- {withoutStack: true},\n- );\n- });\n });\ndiff --git a\/packages\/react-dom\/src\/__tests__\/ReactDOMLegacyComponentTree-test.internal.js b\/packages\/react-dom\/src\/__tests__\/ReactDOMLegacyComponentTree-test.internal.js\nnew file mode 100644\nindex 0000000000..de9f79ff23\n--- \/dev\/null\n+++ b\/packages\/react-dom\/src\/__tests__\/ReactDOMLegacyComponentTree-test.internal.js\n@@ -0,0 +1,58 @@\n+\/**\n+ * Copyright (c) Meta Platforms, Inc. and affiliates.\n+ *\n+ * This source code is licensed under the MIT license found in the\n+ * LICENSE file in the root directory of this source tree.\n+ *\n+ * @emails react-core\n+ *\/\n+\n+'use strict';\n+\n+describe('ReactDOMComponentTree', () => {\n+ let React;\n+ let ReactDOM;\n+ let container;\n+\n+ beforeEach(() => {\n+ React = require('react');\n+ ReactDOM = require('react-dom');\n+\n+ container = document.createElement('div');\n+ document.body.appendChild(container);\n+ });\n+\n+ afterEach(() => {\n+ document.body.removeChild(container);\n+ container = null;\n+ });\n+\n+ it('finds instance of node that is attempted to be unmounted', () => {\n+ const component =

;\n+ const node = ReactDOM.render(

{component}<\/div>, container);\n+ expect(() => ReactDOM.unmountComponentAtNode(node)).toErrorDev(\n+ \"unmountComponentAtNode(): The node you're attempting to unmount \" +\n+ 'was rendered by React and is not a top-level container. You may ' +\n+ 'have accidentally passed in a React root node instead of its ' +\n+ 'container.',\n+ {withoutStack: true},\n+ );\n+ });\n+\n+ it('finds instance from node to stop rendering over other react rendered components', () => {\n+ const component = (\n+

\n+ Hello<\/span>\n+ <\/div>\n+ );\n+ const anotherComponent =

;\n+ const instance = ReactDOM.render(component, container);\n+ expect(() => ReactDOM.render(anotherComponent, instance)).toErrorDev(\n+ 'render(...): Replacing React-rendered children with a new root ' +\n+ 'component. If you intended to update the children of this node, ' +\n+ 'you should instead have the existing children update their state ' +\n+ 'and render the new components instead of calling ReactDOM.render.',\n+ {withoutStack: true},\n+ );\n+ });\n+});\n","commit":{"revision":"4c41c09ccc28e5cf85cbb706908b740c95ff5a97","shortRevision":"4c41c09ccc","authorName":"Jack Pope","authorEmail":"jackpope1@gmail.com","authoredAt":"2024-01-26T17:18:03-05:00","subject":"Use createRoot in ReactDOMComponentTree-test (#28112)"},"body":"","parents":["38997cf19ac5223a7c748ba975b40d649b9c4c52"]}

dillon1000/react

Files changed