{"parents":["43a3653b1958164f2b6b4dd57bceb75a95344570"],"files":[{"status":"M","path":"packages\/react-dom\/src\/__tests__\/ReactCompositeComponentState-test.js"}],"patch":"diff --git a\/packages\/react-dom\/src\/__tests__\/ReactCompositeComponentState-test.js b\/packages\/react-dom\/src\/__tests__\/ReactCompositeComponentState-test.js\nindex a20f7d3ddd..a2894b2ca7 100644\n--- a\/packages\/react-dom\/src\/__tests__\/ReactCompositeComponentState-test.js\n+++ b\/packages\/react-dom\/src\/__tests__\/ReactCompositeComponentState-test.js\n@@ -11,23 +11,41 @@\n \n let React;\n let ReactDOM;\n-\n+let ReactDOMClient;\n+let act;\n+let Scheduler;\n+let assertLog;\n let TestComponent;\n+let testComponentInstance;\n \n describe('ReactCompositeComponent-state', () => {\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+ Scheduler = require('scheduler');\n+\n+ const InternalTestUtils = require('internal-test-utils');\n+ assertLog = InternalTestUtils.assertLog;\n+\n+ function LogAfterCommit({children, color}) {\n+ React.useEffect(() => {\n+ Scheduler.log(`commit ${color}`);\n+ });\n+ return children;\n+ }\n \n TestComponent = class extends React.Component {\n constructor(props) {\n super(props);\n this.peekAtState('getInitialState', undefined, props);\n this.state = {color: 'red'};\n+ testComponentInstance = this;\n }\n \n peekAtState = (from, state = this.state, props = this.props) => {\n- props.stateListener(from, state && state.color);\n+ Scheduler.log(`${from} ${state && state.color}`);\n };\n \n peekAtCallback = from => {\n@@ -43,7 +61,11 @@ describe('ReactCompositeComponent-state', () => {\n \n render() {\n this.peekAtState('render');\n- return

{this.state.color}<\/div>;\n+ return (\n+ \n+

{this.state.color}<\/div>\n+ <\/LogAfterCommit>\n+ );\n }\n \n UNSAFE_componentWillMount() {\n@@ -121,105 +143,106 @@ describe('ReactCompositeComponent-state', () => {\n };\n });\n \n- it('should support setting state', () => {\n+ it('should support setting state', async () => {\n const container = document.createElement('div');\n document.body.appendChild(container);\n+ const root = ReactDOMClient.createRoot(container);\n \n- const stateListener = jest.fn();\n- const instance = ReactDOM.render(\n- ,\n- container,\n- function peekAtInitialCallback() {\n- this.peekAtState('initial-callback');\n- },\n- );\n- ReactDOM.render(\n- ,\n- container,\n- instance.peekAtCallback('setProps'),\n- );\n- instance.setFavoriteColor('blue');\n- instance.forceUpdate(instance.peekAtCallback('forceUpdate'));\n+ await act(() => {\n+ root.render();\n+ });\n \n- ReactDOM.unmountComponentAtNode(container);\n+ await act(() => {\n+ root.render();\n+ });\n \n- const expected = [\n+ await act(() => {\n+ testComponentInstance.setFavoriteColor('blue');\n+ });\n+ await act(() => {\n+ testComponentInstance.forceUpdate(\n+ testComponentInstance.peekAtCallback('forceUpdate'),\n+ );\n+ });\n+\n+ root.unmount();\n+\n+ assertLog([\n \/\/ there is no state when getInitialState() is called\n- ['getInitialState', null],\n- ['componentWillMount-start', 'red'],\n+ 'getInitialState undefined',\n+ 'componentWillMount-start red',\n \/\/ setState()'s only enqueue pending states.\n- ['componentWillMount-after-sunrise', 'red'],\n- ['componentWillMount-end', 'red'],\n+ 'componentWillMount-after-sunrise red',\n+ 'componentWillMount-end red',\n \/\/ pending state queue is processed\n- ['before-setState-sunrise', 'red'],\n- ['after-setState-sunrise', 'sunrise'],\n- ['after-setState-orange', 'orange'],\n+ 'before-setState-sunrise red',\n+ 'after-setState-sunrise sunrise',\n+ 'after-setState-orange orange',\n \/\/ pending state has been applied\n- ['render', 'orange'],\n- ['componentDidMount-start', 'orange'],\n+ 'render orange',\n+ 'componentDidMount-start orange',\n \/\/ setState-sunrise and setState-orange should be called here,\n \/\/ after the bug in #1740\n \/\/ componentDidMount() called setState({color:'yellow'}), which is async.\n \/\/ The update doesn't happen until the next flush.\n- ['componentDidMount-end', 'orange'],\n- ['setState-sunrise', 'orange'],\n- ['setState-orange', 'orange'],\n- ['initial-callback', 'orange'],\n- ['shouldComponentUpdate-currentState', 'orange'],\n- ['shouldComponentUpdate-nextState', 'yellow'],\n- ['componentWillUpdate-currentState', 'orange'],\n- ['componentWillUpdate-nextState', 'yellow'],\n- ['render', 'yellow'],\n- ['componentDidUpdate-currentState', 'yellow'],\n- ['componentDidUpdate-prevState', 'orange'],\n- ['setState-yellow', 'yellow'],\n- ['componentWillReceiveProps-start', 'yellow'],\n+ 'componentDidMount-end orange',\n+ 'setState-sunrise orange',\n+ 'setState-orange orange',\n+ 'commit orange',\n+ 'shouldComponentUpdate-currentState orange',\n+ 'shouldComponentUpdate-nextState yellow',\n+ 'componentWillUpdate-currentState orange',\n+ 'componentWillUpdate-nextState yellow',\n+ 'render yellow',\n+ 'componentDidUpdate-currentState yellow',\n+ 'componentDidUpdate-prevState orange',\n+ 'setState-yellow yellow',\n+ 'commit yellow',\n+ 'componentWillReceiveProps-start yellow',\n \/\/ setState({color:'green'}) only enqueues a pending state.\n- ['componentWillReceiveProps-end', 'yellow'],\n+ 'componentWillReceiveProps-end yellow',\n \/\/ pending state queue is processed\n \/\/ We keep updates in the queue to support\n \/\/ replaceState(prevState => newState).\n- ['before-setState-receiveProps', 'yellow'],\n- ['before-setState-again-receiveProps', undefined],\n- ['after-setState-receiveProps', 'green'],\n- ['shouldComponentUpdate-currentState', 'yellow'],\n- ['shouldComponentUpdate-nextState', 'green'],\n- ['componentWillUpdate-currentState', 'yellow'],\n- ['componentWillUpdate-nextState', 'green'],\n- ['render', 'green'],\n- ['componentDidUpdate-currentState', 'green'],\n- ['componentDidUpdate-prevState', 'yellow'],\n- ['setState-receiveProps', 'green'],\n- ['setProps', 'green'],\n+ 'before-setState-receiveProps yellow',\n+ 'before-setState-again-receiveProps undefined',\n+ 'after-setState-receiveProps green',\n+ 'shouldComponentUpdate-currentState yellow',\n+ 'shouldComponentUpdate-nextState green',\n+ 'componentWillUpdate-currentState yellow',\n+ 'componentWillUpdate-nextState green',\n+ 'render green',\n+ 'componentDidUpdate-currentState green',\n+ 'componentDidUpdate-prevState yellow',\n+ 'setState-receiveProps green',\n+ 'commit green',\n \/\/ setFavoriteColor('blue')\n- ['shouldComponentUpdate-currentState', 'green'],\n- ['shouldComponentUpdate-nextState', 'blue'],\n- ['componentWillUpdate-currentState', 'green'],\n- ['componentWillUpdate-nextState', 'blue'],\n- ['render', 'blue'],\n- ['componentDidUpdate-currentState', 'blue'],\n- ['componentDidUpdate-prevState', 'green'],\n- ['setFavoriteColor', 'blue'],\n+ 'shouldComponentUpdate-currentState green',\n+ 'shouldComponentUpdate-nextState blue',\n+ 'componentWillUpdate-currentState green',\n+ 'componentWillUpdate-nextState blue',\n+ 'render blue',\n+ 'componentDidUpdate-currentState blue',\n+ 'componentDidUpdate-prevState green',\n+ 'setFavoriteColor blue',\n+ 'commit blue',\n \/\/ forceUpdate()\n- ['componentWillUpdate-currentState', 'blue'],\n- ['componentWillUpdate-nextState', 'blue'],\n- ['render', 'blue'],\n- ['componentDidUpdate-currentState', 'blue'],\n- ['componentDidUpdate-prevState', 'blue'],\n- ['forceUpdate', 'blue'],\n+ 'componentWillUpdate-currentState blue',\n+ 'componentWillUpdate-nextState blue',\n+ 'render blue',\n+ 'componentDidUpdate-currentState blue',\n+ 'componentDidUpdate-prevState blue',\n+ 'forceUpdate blue',\n+ 'commit blue',\n \/\/ unmountComponent()\n \/\/ state is available within `componentWillUnmount()`\n- ['componentWillUnmount', 'blue'],\n- ];\n-\n- expect(stateListener.mock.calls.join('\\n')).toEqual(expected.join('\\n'));\n+ 'componentWillUnmount blue',\n+ ]);\n });\n \n- it('should call componentDidUpdate of children first', () => {\n+ it('should call componentDidUpdate of children first', async () => {\n const container = document.createElement('div');\n \n- let ops = [];\n-\n let child = null;\n let parent = null;\n \n@@ -229,7 +252,7 @@ describe('ReactCompositeComponent-state', () => {\n child = this;\n }\n componentDidUpdate() {\n- ops.push('child did update');\n+ Scheduler.log('child did update');\n }\n render() {\n return

;\n@@ -253,36 +276,40 @@ describe('ReactCompositeComponent-state', () => {\n parent = this;\n }\n componentDidUpdate() {\n- ops.push('parent did update');\n+ Scheduler.log('parent did update');\n }\n render() {\n return ;\n }\n }\n \n- ReactDOM.render(, container);\n+ const root = ReactDOMClient.createRoot(container);\n+ await act(() => {\n+ root.render();\n+ });\n \n- ReactDOM.unstable_batchedUpdates(() => {\n+ await act(() => {\n parent.setState({foo: true});\n child.setState({bar: true});\n });\n+\n \/\/ When we render changes top-down in a batch, children's componentDidUpdate\n \/\/ happens before the parent.\n- expect(ops).toEqual(['child did update', 'parent did update']);\n+ assertLog(['child did update', 'parent did update']);\n \n shouldUpdate = false;\n \n- ops = [];\n-\n- ReactDOM.unstable_batchedUpdates(() => {\n+ await act(() => {\n parent.setState({foo: false});\n child.setState({bar: false});\n });\n+\n \/\/ We expect the same thing to happen if we bail out in the middle.\n- expect(ops).toEqual(['child did update', 'parent did update']);\n+ assertLog(['child did update', 'parent did update']);\n });\n \n- it('should batch unmounts', () => {\n+ it('should batch unmounts', async () => {\n+ let outer;\n class Inner extends React.Component {\n render() {\n return

;\n@@ -297,6 +324,9 @@ describe('ReactCompositeComponent-state', () => {\n \n class Outer extends React.Component {\n state = {showInner: true};\n+ componentDidMount() {\n+ outer = this;\n+ }\n \n render() {\n return

{this.state.showInner && }<\/div>;\n@@ -304,18 +334,21 @@ describe('ReactCompositeComponent-state', () => {\n }\n \n const container = document.createElement('div');\n- const outer = ReactDOM.render(, container);\n+ const root = ReactDOMClient.createRoot(container);\n+ await act(() => {\n+ root.render();\n+ });\n+\n expect(() => {\n- ReactDOM.unmountComponentAtNode(container);\n+ root.unmount();\n }).not.toThrow();\n });\n \n- it('should update state when called from child cWRP', function () {\n- const log = [];\n+ it('should update state when called from child cWRP', async () => {\n class Parent extends React.Component {\n state = {value: 'one'};\n render() {\n- log.push('parent render ' + this.state.value);\n+ Scheduler.log('parent render ' + this.state.value);\n return ;\n }\n }\n@@ -325,20 +358,28 @@ describe('ReactCompositeComponent-state', () => {\n if (updated) {\n return;\n }\n- log.push('child componentWillReceiveProps ' + this.props.value);\n+ Scheduler.log('child componentWillReceiveProps ' + this.props.value);\n this.props.parent.setState({value: 'two'});\n- log.push('child componentWillReceiveProps done ' + this.props.value);\n+ Scheduler.log(\n+ 'child componentWillReceiveProps done ' + this.props.value,\n+ );\n updated = true;\n }\n render() {\n- log.push('child render ' + this.props.value);\n+ Scheduler.log('child render ' + this.props.value);\n return

{this.props.value}<\/div>;\n }\n }\n const container = document.createElement('div');\n- ReactDOM.render(, container);\n- ReactDOM.render(, container);\n- expect(log).toEqual([\n+ const root = ReactDOMClient.createRoot(container);\n+ await act(() => {\n+ root.render();\n+ });\n+ await act(() => {\n+ root.render();\n+ });\n+\n+ assertLog([\n 'parent render one',\n 'child render one',\n 'parent render one',\n@@ -350,15 +391,19 @@ describe('ReactCompositeComponent-state', () => {\n ]);\n });\n \n- it('should merge state when sCU returns false', function () {\n- const log = [];\n+ it('should merge state when sCU returns false', async () => {\n+ let test;\n class Test extends React.Component {\n state = {a: 0};\n+ componentDidMount() {\n+ test = this;\n+ }\n+\n render() {\n return null;\n }\n shouldComponentUpdate(nextProps, nextState) {\n- log.push(\n+ Scheduler.log(\n 'scu from ' +\n Object.keys(this.state) +\n ' to ' +\n@@ -369,22 +414,28 @@ describe('ReactCompositeComponent-state', () => {\n }\n \n const container = document.createElement('div');\n- const test = ReactDOM.render(, container);\n- test.setState({b: 0});\n- expect(log.length).toBe(1);\n- test.setState({c: 0});\n- expect(log.length).toBe(2);\n- expect(log).toEqual(['scu from a to a,b', 'scu from a,b to a,b,c']);\n+ const root = ReactDOMClient.createRoot(container);\n+ await act(() => {\n+ root.render();\n+ });\n+ await act(() => {\n+ test.setState({b: 0});\n+ });\n+\n+ assertLog(['scu from a to a,b']);\n+ await act(() => {\n+ test.setState({c: 0});\n+ });\n+ assertLog(['scu from a,b to a,b,c']);\n });\n \n- it('should treat assigning to this.state inside cWRP as a replaceState, with a warning', () => {\n- const ops = [];\n+ it('should treat assigning to this.state inside cWRP as a replaceState, with a warning', async () => {\n class Test extends React.Component {\n state = {step: 1, extra: true};\n UNSAFE_componentWillReceiveProps() {\n this.setState({step: 2}, () => {\n \/\/ Tests that earlier setState callbacks are not dropped\n- ops.push(\n+ Scheduler.log(\n `callback -- step: ${this.state.step}, extra: ${!!this.state\n .extra}`,\n );\n@@ -393,7 +444,7 @@ describe('ReactCompositeComponent-state', () => {\n this.state = {step: 3};\n }\n render() {\n- ops.push(\n+ Scheduler.log(\n `render -- step: ${this.state.step}, extra: ${!!this.state.extra}`,\n );\n return null;\n@@ -402,32 +453,42 @@ describe('ReactCompositeComponent-state', () => {\n \n \/\/ Mount\n const container = document.createElement('div');\n- ReactDOM.render(, container);\n+ const root = ReactDOMClient.createRoot(container);\n+ await act(() => {\n+ root.render();\n+ });\n \/\/ Update\n- expect(() => ReactDOM.render(, container)).toErrorDev(\n+ expect(() => {\n+ ReactDOM.flushSync(() => {\n+ root.render();\n+ });\n+ }).toErrorDev(\n 'Warning: Test.componentWillReceiveProps(): Assigning directly to ' +\n \"this.state is deprecated (except inside a component's constructor). \" +\n 'Use setState instead.',\n );\n \n- expect(ops).toEqual([\n+ assertLog([\n 'render -- step: 1, extra: true',\n 'render -- step: 3, extra: false',\n 'callback -- step: 3, extra: false',\n ]);\n \n \/\/ Check deduplication; (no additional warnings are expected)\n- ReactDOM.render(, container);\n+ expect(() => {\n+ ReactDOM.flushSync(() => {\n+ root.render();\n+ });\n+ }).not.toThrow();\n });\n \n it('should treat assigning to this.state inside cWM as a replaceState, with a warning', () => {\n- const ops = [];\n class Test extends React.Component {\n state = {step: 1, extra: true};\n UNSAFE_componentWillMount() {\n this.setState({step: 2}, () => {\n \/\/ Tests that earlier setState callbacks are not dropped\n- ops.push(\n+ Scheduler.log(\n `callback -- step: ${this.state.step}, extra: ${!!this.state\n .extra}`,\n );\n@@ -436,7 +497,7 @@ describe('ReactCompositeComponent-state', () => {\n this.state = {step: 3};\n }\n render() {\n- ops.push(\n+ Scheduler.log(\n `render -- step: ${this.state.step}, extra: ${!!this.state.extra}`,\n );\n return null;\n@@ -445,20 +506,29 @@ describe('ReactCompositeComponent-state', () => {\n \n \/\/ Mount\n const container = document.createElement('div');\n- expect(() => ReactDOM.render(, container)).toErrorDev(\n+ const root = ReactDOMClient.createRoot(container);\n+ expect(() => {\n+ ReactDOM.flushSync(() => {\n+ root.render();\n+ });\n+ }).toErrorDev(\n 'Warning: Test.componentWillMount(): Assigning directly to ' +\n \"this.state is deprecated (except inside a component's constructor). \" +\n 'Use setState instead.',\n );\n \n- expect(ops).toEqual([\n+ assertLog([\n+ 'render -- step: 3, extra: false',\n+ 'callback -- step: 3, extra: false',\n+\n+ \/\/ A second time for the retry.\n 'render -- step: 3, extra: false',\n 'callback -- step: 3, extra: false',\n ]);\n });\n \n if (!require('shared\/ReactFeatureFlags').disableModulePatternComponents) {\n- it('should support stateful module pattern components', () => {\n+ it('should support stateful module pattern components', async () => {\n function Child() {\n return {\n state: {\n@@ -471,7 +541,12 @@ describe('ReactCompositeComponent-state', () => {\n }\n \n const el = document.createElement('div');\n- expect(() => ReactDOM.render(, el)).toErrorDev(\n+ const root = ReactDOMClient.createRoot(el);\n+ expect(() => {\n+ ReactDOM.flushSync(() => {\n+ root.render();\n+ });\n+ }).toErrorDev(\n 'Warning: The component appears to be a function component that returns a class instance. ' +\n 'Change Child to a class that extends React.Component instead. ' +\n \"If you can't use a class try assigning the prototype on the function as a workaround. \" +\n@@ -482,7 +557,7 @@ describe('ReactCompositeComponent-state', () => {\n expect(el.textContent).toBe('count:123');\n });\n \n- it('should support getDerivedStateFromProps for module pattern components', () => {\n+ it('should support getDerivedStateFromProps for module pattern components', async () => {\n function Child() {\n return {\n state: {\n@@ -500,18 +575,62 @@ describe('ReactCompositeComponent-state', () => {\n };\n \n const el = document.createElement('div');\n- ReactDOM.render(, el);\n- expect(el.textContent).toBe('count:1');\n+ const root = ReactDOMClient.createRoot(el);\n+ await act(() => {\n+ root.render();\n+ });\n \n- ReactDOM.render(, el);\n+ expect(el.textContent).toBe('count:1');\n+ await act(() => {\n+ root.render();\n+ });\n expect(el.textContent).toBe('count:3');\n \n- ReactDOM.render(, el);\n+ await act(() => {\n+ root.render();\n+ });\n expect(el.textContent).toBe('count:4');\n });\n }\n \n- it('should support setState in componentWillUnmount', () => {\n+ it('should not support setState in componentWillUnmount', async () => {\n+ let subscription;\n+ class A extends React.Component {\n+ componentWillUnmount() {\n+ subscription();\n+ }\n+ render() {\n+ return 'A';\n+ }\n+ }\n+\n+ class B extends React.Component {\n+ state = {siblingUnmounted: false};\n+ UNSAFE_componentWillMount() {\n+ subscription = () => this.setState({siblingUnmounted: true});\n+ }\n+ render() {\n+ return 'B' + (this.state.siblingUnmounted ? ' No Sibling' : '');\n+ }\n+ }\n+\n+ const el = document.createElement('div');\n+ const root = ReactDOMClient.createRoot(el);\n+ await act(() => {\n+ root.render();\n+ });\n+ expect(el.textContent).toBe('A');\n+\n+ expect(() => {\n+ ReactDOM.flushSync(() => {\n+ root.render();\n+ });\n+ }).toErrorDev(\n+ \"Warning: Can't perform a React state update on a component that hasn't mounted yet\",\n+ );\n+ });\n+\n+ it('Legacy mode should support setState in componentWillUnmount (#18851)', () => {\n let subscription;\n class A extends React.Component {\n componentWillUnmount() {\n","commit":{"subject":"Convert ReactCompositeComponentState to createRoot (#28063)","shortRevision":"0b32b3edd2","authorEmail":"rickhanlonii@gmail.com","revision":"0b32b3edd2c49b25fa25412fa6a6a31d43e15653","authorName":"Ricky","authoredAt":"2024-01-25T13:36:04-05:00"},"body":""}

dillon1000/react

Files changed