{"files":[{"path":"packages\/react-dom\/src\/__tests__\/ReactComponentLifeCycle-test.js","status":"M"}],"patch":"diff --git a\/packages\/react-dom\/src\/__tests__\/ReactComponentLifeCycle-test.js b\/packages\/react-dom\/src\/__tests__\/ReactComponentLifeCycle-test.js\nindex ac13b35817..4567ee62a0 100644\n--- a\/packages\/react-dom\/src\/__tests__\/ReactComponentLifeCycle-test.js\n+++ b\/packages\/react-dom\/src\/__tests__\/ReactComponentLifeCycle-test.js\n@@ -113,9 +113,21 @@ describe('ReactComponentLifeCycle', () => {\n }\n \n const element = ;\n- const firstInstance = ReactDOM.render(element, container);\n- ReactDOM.unmountComponentAtNode(container);\n- const secondInstance = ReactDOM.render(element, container);\n+ let root = ReactDOMClient.createRoot(container);\n+ await act(() => {\n+ root.render(element);\n+ });\n+\n+ const firstInstance = container.firstChild;\n+ await act(() => {\n+ root.unmount();\n+ });\n+ root = ReactDOMClient.createRoot(container);\n+ await act(() => {\n+ root.render(element);\n+ });\n+\n+ const secondInstance = container.firstChild;\n expect(firstInstance).not.toBe(secondInstance);\n });\n \n@@ -123,7 +135,7 @@ describe('ReactComponentLifeCycle', () => {\n * If a state update triggers rerendering that in turn fires an onDOMReady,\n * that second onDOMReady should not fail.\n *\/\n- it('it should fire onDOMReady when already in onDOMReady', () => {\n+ it('it should fire onDOMReady when already in onDOMReady', async () => {\n const _testJournal = [];\n \n class Child extends React.Component {\n@@ -161,7 +173,13 @@ describe('ReactComponentLifeCycle', () => {\n }\n }\n \n- ReactTestUtils.renderIntoDocument();\n+ const container = document.createElement('div');\n+ const root = ReactDOMClient.createRoot(container);\n+\n+ await act(() => {\n+ root.render();\n+ });\n+\n expect(_testJournal).toEqual([\n 'SwitcherParent:getInitialState',\n 'SwitcherParent:onDOMReady',\n@@ -205,7 +223,7 @@ describe('ReactComponentLifeCycle', () => {\n }).not.toThrow();\n });\n \n- it(\"warns if setting 'this.state = props'\", () => {\n+ it(\"warns if setting 'this.state = props'\", async () => {\n class StatefulComponent extends React.Component {\n constructor(props, context) {\n super(props, context);\n@@ -216,8 +234,12 @@ describe('ReactComponentLifeCycle', () => {\n }\n }\n \n- expect(() => {\n- ReactTestUtils.renderIntoDocument();\n+ const container = document.createElement('div');\n+ const root = ReactDOMClient.createRoot(container);\n+ await expect(async () => {\n+ await act(() => {\n+ root.render();\n+ });\n }).toErrorDev(\n 'StatefulComponent: It is not recommended to assign props directly to state ' +\n \"because updates to props won't be reflected in state. \" +\n@@ -225,7 +247,7 @@ describe('ReactComponentLifeCycle', () => {\n );\n });\n \n- it('should not allow update state inside of getInitialState', () => {\n+ it('should not allow update state inside of getInitialState', async () => {\n class StatefulComponent extends React.Component {\n constructor(props, context) {\n super(props, context);\n@@ -239,8 +261,12 @@ describe('ReactComponentLifeCycle', () => {\n }\n }\n \n- expect(() => {\n- ReactTestUtils.renderIntoDocument();\n+ let container = document.createElement('div');\n+ let root = ReactDOMClient.createRoot(container);\n+ await expect(async () => {\n+ await act(() => {\n+ root.render();\n+ });\n }).toErrorDev(\n \"Warning: Can't call setState on a component that is not yet mounted. \" +\n 'This is a no-op, but it might indicate a bug in your application. ' +\n@@ -248,11 +274,14 @@ describe('ReactComponentLifeCycle', () => {\n 'class property with the desired state in the StatefulComponent component.',\n );\n \n- \/\/ Check deduplication; (no extra warnings should be logged).\n- ReactTestUtils.renderIntoDocument();\n+ container = document.createElement('div');\n+ root = ReactDOMClient.createRoot(container);\n+ await act(() => {\n+ root.render();\n+ });\n });\n \n- it('should correctly determine if a component is mounted', () => {\n+ it('should correctly determine if a component is mounted', async () => {\n class Component extends React.Component {\n _isMounted() {\n \/\/ No longer a public API, but we can test that it works internally by\n@@ -271,15 +300,20 @@ describe('ReactComponentLifeCycle', () => {\n }\n }\n \n- const element = ;\n+ let instance;\n+ const element = (instance = current)} \/>;\n \n- expect(() => {\n- const instance = ReactTestUtils.renderIntoDocument(element);\n- expect(instance._isMounted()).toBeTruthy();\n+ const container = document.createElement('div');\n+ const root = ReactDOMClient.createRoot(container);\n+ await expect(async () => {\n+ await act(() => {\n+ root.render(element);\n+ });\n }).toErrorDev('Component is accessing isMounted inside its render()');\n+ expect(instance._isMounted()).toBeTruthy();\n });\n \n- it('should correctly determine if a null component is mounted', () => {\n+ it('should correctly determine if a null component is mounted', async () => {\n class Component extends React.Component {\n _isMounted() {\n \/\/ No longer a public API, but we can test that it works internally by\n@@ -298,12 +332,17 @@ describe('ReactComponentLifeCycle', () => {\n }\n }\n \n- const element = ;\n+ let instance;\n+ const element = (instance = current)} \/>;\n \n- expect(() => {\n- const instance = ReactTestUtils.renderIntoDocument(element);\n- expect(instance._isMounted()).toBeTruthy();\n+ const container = document.createElement('div');\n+ const root = ReactDOMClient.createRoot(container);\n+ await expect(async () => {\n+ await act(() => {\n+ root.render(element);\n+ });\n }).toErrorDev('Component is accessing isMounted inside its render()');\n+ expect(instance._isMounted()).toBeTruthy();\n });\n \n it('isMounted should return false when unmounted', async () => {\n@@ -331,7 +370,7 @@ describe('ReactComponentLifeCycle', () => {\n expect(instance.updater.isMounted(instance)).toBe(false);\n });\n \n- it('warns if findDOMNode is used inside render', () => {\n+ it('warns if legacy findDOMNode is used inside render', async () => {\n class Component extends React.Component {\n state = {isMounted: false};\n componentDidMount() {\n@@ -345,8 +384,12 @@ describe('ReactComponentLifeCycle', () => {\n }\n }\n \n- expect(() => {\n- ReactTestUtils.renderIntoDocument();\n+ const container = document.createElement('div');\n+ const root = ReactDOMClient.createRoot(container);\n+ await expect(async () => {\n+ await act(() => {\n+ root.render();\n+ });\n }).toErrorDev('Component is accessing findDOMNode inside its render()');\n });\n \n","commit":{"authorName":"Sebastian Silbermann","authorEmail":"silbermann.sebastian@gmail.com","shortRevision":"e9c13cde64","subject":"Convert ReactComponentLifeycle to createRoot (#28178)","revision":"e9c13cde644753e554c060bc71fd57077288ae35","authoredAt":"2024-02-02T09:14:25+01:00"},"parents":["11aa263844cc90b3677782c9b8bafa3fe22fd389"],"body":""}

dillon1000/react

Files changed