{"commit":{"authoredAt":"2024-01-10T10:16:51-05:00","revision":"2594caa09e0aca49493cd62659c1e3d1d3488a7e","authorName":"Jan Kassens","subject":"Convert ReactComponentLifeCycle-test to createRoot (#27916)","authorEmail":"jkassens@meta.com","shortRevision":"2594caa09e"},"body":"Convert ReactComponentLifeCycle-test to createRoot","files":[{"status":"M","path":"packages\/react-dom\/src\/__tests__\/ReactComponentLifeCycle-test.js"}],"parents":["344a6675a9974d9e7b14542dd4e8bddb81a235e5"],"patch":"diff --git a\/packages\/react-dom\/src\/__tests__\/ReactComponentLifeCycle-test.js b\/packages\/react-dom\/src\/__tests__\/ReactComponentLifeCycle-test.js\nindex feb02c7299..ac13b35817 100644\n--- a\/packages\/react-dom\/src\/__tests__\/ReactComponentLifeCycle-test.js\n+++ b\/packages\/react-dom\/src\/__tests__\/ReactComponentLifeCycle-test.js\n@@ -9,8 +9,11 @@\n \n 'use strict';\n \n+let act;\n+\n let React;\n let ReactDOM;\n+let ReactDOMClient;\n let ReactTestUtils;\n let PropTypes;\n \n@@ -88,13 +91,17 @@ function getLifeCycleState(instance): ComponentLifeCycle {\n describe('ReactComponentLifeCycle', () => {\n beforeEach(() => {\n jest.resetModules();\n+\n+ act = require('internal-test-utils').act;\n+\n React = require('react');\n ReactDOM = require('react-dom');\n+ ReactDOMClient = require('react-dom\/client');\n ReactTestUtils = require('react-dom\/test-utils');\n PropTypes = require('prop-types');\n });\n \n- it('should not reuse an instance when it has been unmounted', () => {\n+ it('should not reuse an instance when it has been unmounted', async () => {\n const container = document.createElement('div');\n \n class StatefulComponent extends React.Component {\n@@ -299,21 +306,27 @@ describe('ReactComponentLifeCycle', () => {\n }).toErrorDev('Component is accessing isMounted inside its render()');\n });\n \n- it('isMounted should return false when unmounted', () => {\n+ it('isMounted should return false when unmounted', async () => {\n class Component extends React.Component {\n render() {\n return

;\n }\n }\n \n- const container = document.createElement('div');\n- const instance = ReactDOM.render(, container);\n+ const root = ReactDOMClient.createRoot(document.createElement('div'));\n+ const instanceRef = React.createRef();\n+ await act(() => {\n+ root.render();\n+ });\n+ const instance = instanceRef.current;\n \n \/\/ No longer a public API, but we can test that it works internally by\n \/\/ reaching into the updater.\n expect(instance.updater.isMounted(instance)).toBe(true);\n \n- ReactDOM.unmountComponentAtNode(container);\n+ await act(() => {\n+ root.unmount();\n+ });\n \n expect(instance.updater.isMounted(instance)).toBe(false);\n });\n@@ -337,7 +350,7 @@ describe('ReactComponentLifeCycle', () => {\n }).toErrorDev('Component is accessing findDOMNode inside its render()');\n });\n \n- it('should carry through each of the phases of setup', () => {\n+ it('should carry through each of the phases of setup', async () => {\n class LifeCycleComponent extends React.Component {\n constructor(props, context) {\n super(props, context);\n@@ -390,15 +403,17 @@ describe('ReactComponentLifeCycle', () => {\n \n \/\/ A component that is merely \"constructed\" (as in \"constructor\") but not\n \/\/ yet initialized, or rendered.\n- \/\/\n- const container = document.createElement('div');\n+ const root = ReactDOMClient.createRoot(document.createElement('div'));\n \n- let instance;\n- expect(() => {\n- instance = ReactDOM.render(, container);\n+ const instanceRef = React.createRef();\n+ await expect(async () => {\n+ await act(() => {\n+ root.render();\n+ });\n }).toErrorDev(\n 'LifeCycleComponent is accessing isMounted inside its render() function',\n );\n+ const instance = instanceRef.current;\n \n \/\/ getInitialState\n expect(instance._testJournal.returnedFromGetInitialState).toEqual(\n@@ -437,7 +452,9 @@ describe('ReactComponentLifeCycle', () => {\n \n expect(getLifeCycleState(instance)).toBe('MOUNTED');\n \n- ReactDOM.unmountComponentAtNode(container);\n+ await act(() => {\n+ root.unmount();\n+ });\n \n expect(instance._testJournal.stateAtStartOfWillUnmount).toEqual(\n WILL_UNMOUNT_STATE,\n@@ -450,14 +467,15 @@ describe('ReactComponentLifeCycle', () => {\n expect(instance.state).toEqual(POST_WILL_UNMOUNT_STATE);\n });\n \n- it('should not throw when updating an auxiliary component', () => {\n+ it('should not throw when updating an auxiliary component', async () => {\n class Tooltip extends React.Component {\n render() {\n return

{this.props.children}<\/div>;\n }\n \n componentDidMount() {\n- this.container = document.createElement('div');\n+ const container = document.createElement('div');\n+ this.root = ReactDOMClient.createRoot(container);\n this.updateTooltip();\n }\n \n@@ -468,7 +486,7 @@ describe('ReactComponentLifeCycle', () => {\n updateTooltip = () => {\n \/\/ Even though this.props.tooltip has an owner, updating it shouldn't\n \/\/ throw here because it's mounted as a root component\n- ReactDOM.render(this.props.tooltip, this.container);\n+ this.root.render(this.props.tooltip, this.container);\n };\n }\n \n@@ -484,12 +502,16 @@ describe('ReactComponentLifeCycle', () => {\n }\n }\n \n- const container = document.createElement('div');\n- ReactDOM.render(, container);\n+ const root = ReactDOMClient.createRoot(document.createElement('div'));\n+ await act(() => {\n+ root.render();\n+ });\n \n \/\/ Since `instance` is a root component, we can set its props. This also\n \/\/ makes Tooltip rerender the tooltip component, which shouldn't throw.\n- ReactDOM.render(, container);\n+ await act(() => {\n+ root.render();\n+ });\n });\n \n it('should allow state updates in componentDidMount', () => {\n@@ -520,7 +542,7 @@ describe('ReactComponentLifeCycle', () => {\n expect(instance.state.stateField).toBe('goodbye');\n });\n \n- it('should call nested legacy lifecycle methods in the right order', () => {\n+ it('should call nested legacy lifecycle methods in the right order', async () => {\n let log;\n const logger = function (msg) {\n return function () {\n@@ -563,9 +585,11 @@ describe('ReactComponentLifeCycle', () => {\n }\n }\n \n- const container = document.createElement('div');\n+ const root = ReactDOMClient.createRoot(document.createElement('div'));\n log = [];\n- ReactDOM.render(, container);\n+ await act(() => {\n+ root.render();\n+ });\n expect(log).toEqual([\n 'outer componentWillMount',\n 'inner componentWillMount',\n@@ -575,7 +599,9 @@ describe('ReactComponentLifeCycle', () => {\n \n \/\/ Dedup warnings\n log = [];\n- ReactDOM.render(, container);\n+ await act(() => {\n+ root.render();\n+ });\n expect(log).toEqual([\n 'outer componentWillReceiveProps',\n 'outer shouldComponentUpdate',\n@@ -588,14 +614,16 @@ describe('ReactComponentLifeCycle', () => {\n ]);\n \n log = [];\n- ReactDOM.unmountComponentAtNode(container);\n+ await act(() => {\n+ root.unmount();\n+ });\n expect(log).toEqual([\n 'outer componentWillUnmount',\n 'inner componentWillUnmount',\n ]);\n });\n \n- it('should call nested new lifecycle methods in the right order', () => {\n+ it('should call nested new lifecycle methods in the right order', async () => {\n let log;\n const logger = function (msg) {\n return function () {\n@@ -640,9 +668,12 @@ describe('ReactComponentLifeCycle', () => {\n }\n }\n \n- const container = document.createElement('div');\n+ const root = ReactDOMClient.createRoot(document.createElement('div'));\n+\n log = [];\n- ReactDOM.render(, container);\n+ await act(() => {\n+ root.render();\n+ });\n expect(log).toEqual([\n 'outer getDerivedStateFromProps',\n 'inner getDerivedStateFromProps',\n@@ -652,7 +683,9 @@ describe('ReactComponentLifeCycle', () => {\n \n \/\/ Dedup warnings\n log = [];\n- ReactDOM.render(, container);\n+ await act(() => {\n+ root.render();\n+ });\n expect(log).toEqual([\n 'outer getDerivedStateFromProps',\n 'outer shouldComponentUpdate',\n@@ -665,14 +698,16 @@ describe('ReactComponentLifeCycle', () => {\n ]);\n \n log = [];\n- ReactDOM.unmountComponentAtNode(container);\n+ await act(() => {\n+ root.unmount();\n+ });\n expect(log).toEqual([\n 'outer componentWillUnmount',\n 'inner componentWillUnmount',\n ]);\n });\n \n- it('should not invoke deprecated lifecycles (cWM\/cWRP\/cWU) if new static gDSFP is present', () => {\n+ it('should not invoke deprecated lifecycles (cWM\/cWRP\/cWU) if new static gDSFP is present', async () => {\n class Component extends React.Component {\n state = {};\n static getDerivedStateFromProps() {\n@@ -692,9 +727,13 @@ describe('ReactComponentLifeCycle', () => {\n }\n }\n \n- const container = document.createElement('div');\n- expect(() => {\n- expect(() => ReactDOM.render(, container)).toErrorDev(\n+ const root = ReactDOMClient.createRoot(document.createElement('div'));\n+ await expect(async () => {\n+ await expect(async () => {\n+ await act(() => {\n+ root.render();\n+ });\n+ }).toErrorDev(\n 'Unsafe legacy lifecycles will not be called for components using new component APIs.',\n );\n }).toWarnDev(\n@@ -707,7 +746,7 @@ describe('ReactComponentLifeCycle', () => {\n );\n });\n \n- it('should not invoke deprecated lifecycles (cWM\/cWRP\/cWU) if new getSnapshotBeforeUpdate is present', () => {\n+ it('should not invoke deprecated lifecycles (cWM\/cWRP\/cWU) if new getSnapshotBeforeUpdate is present', async () => {\n class Component extends React.Component {\n state = {};\n getSnapshotBeforeUpdate() {\n@@ -728,10 +767,13 @@ describe('ReactComponentLifeCycle', () => {\n }\n }\n \n- const container = document.createElement('div');\n- expect(() => {\n- expect(() =>\n- ReactDOM.render(, container),\n+ const root = ReactDOMClient.createRoot(document.createElement('div'));\n+ await expect(async () => {\n+ await expect(\n+ async () =>\n+ await act(() => {\n+ root.render();\n+ }),\n ).toErrorDev(\n 'Unsafe legacy lifecycles will not be called for components using new component APIs.',\n );\n@@ -743,10 +785,13 @@ describe('ReactComponentLifeCycle', () => {\n ],\n {withoutStack: true},\n );\n- ReactDOM.render(, container);\n+\n+ await act(() => {\n+ root.render();\n+ });\n });\n \n- it('should not invoke new unsafe lifecycles (cWM\/cWRP\/cWU) if static gDSFP is present', () => {\n+ it('should not invoke new unsafe lifecycles (cWM\/cWRP\/cWU) if static gDSFP is present', async () => {\n class Component extends React.Component {\n state = {};\n static getDerivedStateFromProps() {\n@@ -766,18 +811,21 @@ describe('ReactComponentLifeCycle', () => {\n }\n }\n \n- const container = document.createElement('div');\n- expect(() =>\n- ReactDOM.render(, container),\n+ const root = ReactDOMClient.createRoot(document.createElement('div'));\n+ await expect(\n+ async () =>\n+ await act(() => {\n+ root.render();\n+ }),\n ).toErrorDev(\n 'Unsafe legacy lifecycles will not be called for components using new component APIs.',\n );\n- ReactDOM.render(, container);\n+ await act(() => {\n+ root.render();\n+ });\n });\n \n- it('should warn about deprecated lifecycles (cWM\/cWRP\/cWU) if new static gDSFP is present', () => {\n- const container = document.createElement('div');\n-\n+ it('should warn about deprecated lifecycles (cWM\/cWRP\/cWU) if new static gDSFP is present', async () => {\n class AllLegacyLifecycles extends React.Component {\n state = {};\n static getDerivedStateFromProps() {\n@@ -791,10 +839,13 @@ describe('ReactComponentLifeCycle', () => {\n }\n }\n \n- expect(() => {\n- expect(() =>\n- ReactDOM.render(, container),\n- ).toErrorDev(\n+ const root = ReactDOMClient.createRoot(document.createElement('div'));\n+ await expect(async () => {\n+ await expect(async () => {\n+ await act(() => {\n+ root.render();\n+ });\n+ }).toErrorDev(\n 'Unsafe legacy lifecycles will not be called for components using new component APIs.\\n\\n' +\n 'AllLegacyLifecycles uses getDerivedStateFromProps() but also contains the following legacy lifecycles:\\n' +\n ' componentWillMount\\n' +\n@@ -822,7 +873,11 @@ describe('ReactComponentLifeCycle', () => {\n }\n }\n \n- expect(() => ReactDOM.render(, container)).toErrorDev(\n+ await expect(async () => {\n+ await act(() => {\n+ root.render();\n+ });\n+ }).toErrorDev(\n 'Unsafe legacy lifecycles will not be called for components using new component APIs.\\n\\n' +\n 'WillMount uses getDerivedStateFromProps() but also contains the following legacy lifecycles:\\n' +\n ' UNSAFE_componentWillMount\\n\\n' +\n@@ -842,9 +897,12 @@ describe('ReactComponentLifeCycle', () => {\n }\n }\n \n- expect(() => {\n- expect(() =>\n- ReactDOM.render(, container),\n+ await expect(async () => {\n+ await expect(\n+ async () =>\n+ await act(() => {\n+ root.render();\n+ }),\n ).toErrorDev(\n 'Unsafe legacy lifecycles will not be called for components using new component APIs.\\n\\n' +\n 'WillMountAndUpdate uses getDerivedStateFromProps() but also contains the following legacy lifecycles:\\n' +\n@@ -868,8 +926,12 @@ describe('ReactComponentLifeCycle', () => {\n }\n }\n \n- expect(() => {\n- expect(() => ReactDOM.render(, container)).toErrorDev(\n+ await expect(async () => {\n+ await expect(async () => {\n+ await act(() => {\n+ root.render();\n+ });\n+ }).toErrorDev(\n 'Unsafe legacy lifecycles will not be called for components using new component APIs.\\n\\n' +\n 'WillReceiveProps uses getDerivedStateFromProps() but also contains the following legacy lifecycles:\\n' +\n ' componentWillReceiveProps\\n\\n' +\n@@ -881,9 +943,7 @@ describe('ReactComponentLifeCycle', () => {\n });\n });\n \n- it('should warn about deprecated lifecycles (cWM\/cWRP\/cWU) if new getSnapshotBeforeUpdate is present', () => {\n- const container = document.createElement('div');\n-\n+ it('should warn about deprecated lifecycles (cWM\/cWRP\/cWU) if new getSnapshotBeforeUpdate is present', async () => {\n class AllLegacyLifecycles extends React.Component {\n state = {};\n getSnapshotBeforeUpdate() {}\n@@ -896,10 +956,13 @@ describe('ReactComponentLifeCycle', () => {\n }\n }\n \n- expect(() => {\n- expect(() =>\n- ReactDOM.render(, container),\n- ).toErrorDev(\n+ const root = ReactDOMClient.createRoot(document.createElement('div'));\n+ await expect(async () => {\n+ await expect(async () => {\n+ await act(() => {\n+ root.render();\n+ });\n+ }).toErrorDev(\n 'Unsafe legacy lifecycles will not be called for components using new component APIs.\\n\\n' +\n 'AllLegacyLifecycles uses getSnapshotBeforeUpdate() but also contains the following legacy lifecycles:\\n' +\n ' componentWillMount\\n' +\n@@ -926,7 +989,11 @@ describe('ReactComponentLifeCycle', () => {\n }\n }\n \n- expect(() => ReactDOM.render(, container)).toErrorDev(\n+ await expect(async () => {\n+ await act(() => {\n+ root.render();\n+ });\n+ }).toErrorDev(\n 'Unsafe legacy lifecycles will not be called for components using new component APIs.\\n\\n' +\n 'WillMount uses getSnapshotBeforeUpdate() but also contains the following legacy lifecycles:\\n' +\n ' UNSAFE_componentWillMount\\n\\n' +\n@@ -945,10 +1012,12 @@ describe('ReactComponentLifeCycle', () => {\n }\n }\n \n- expect(() => {\n- expect(() =>\n- ReactDOM.render(, container),\n- ).toErrorDev(\n+ await expect(async () => {\n+ await expect(async () => {\n+ await act(() => {\n+ root.render();\n+ });\n+ }).toErrorDev(\n 'Unsafe legacy lifecycles will not be called for components using new component APIs.\\n\\n' +\n 'WillMountAndUpdate uses getSnapshotBeforeUpdate() but also contains the following legacy lifecycles:\\n' +\n ' componentWillMount\\n' +\n@@ -970,8 +1039,13 @@ describe('ReactComponentLifeCycle', () => {\n }\n }\n \n- expect(() => {\n- expect(() => ReactDOM.render(, container)).toErrorDev(\n+ await expect(async () => {\n+ await expect(\n+ async () =>\n+ await act(() => {\n+ root.render();\n+ }),\n+ ).toErrorDev(\n 'Unsafe legacy lifecycles will not be called for components using new component APIs.\\n\\n' +\n 'WillReceiveProps uses getSnapshotBeforeUpdate() but also contains the following legacy lifecycles:\\n' +\n ' componentWillReceiveProps\\n\\n' +\n@@ -984,7 +1058,7 @@ describe('ReactComponentLifeCycle', () => {\n });\n \n if (!require('shared\/ReactFeatureFlags').disableModulePatternComponents) {\n- it('calls effects on module-pattern component', function () {\n+ it('calls effects on module-pattern component', async () => {\n const log = [];\n \n function Parent() {\n@@ -1019,17 +1093,21 @@ describe('ReactComponentLifeCycle', () => {\n x: PropTypes.number,\n };\n \n- const div = document.createElement('div');\n- expect(() =>\n- ReactDOM.render( c && log.push('ref')} \/>, div),\n- ).toErrorDev(\n+ const root = ReactDOMClient.createRoot(document.createElement('div'));\n+ await expect(async () => {\n+ await act(() => {\n+ root.render( c && log.push('ref')} \/>);\n+ });\n+ }).toErrorDev(\n 'Warning: The component appears to be a function component that returns a class instance. ' +\n 'Change Parent 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 '`Parent.prototype = React.Component.prototype`. ' +\n \"Don't use an arrow function since it cannot be called with `new` by React.\",\n );\n- ReactDOM.render( c && log.push('ref')} \/>, div);\n+ await act(() => {\n+ root.render( c && log.push('ref')} \/>);\n+ });\n \n expect(log).toEqual([\n 'will mount',\n@@ -1044,7 +1122,7 @@ describe('ReactComponentLifeCycle', () => {\n });\n }\n \n- it('should warn if getDerivedStateFromProps returns undefined', () => {\n+ it('should warn if getDerivedStateFromProps returns undefined', async () => {\n class MyComponent extends React.Component {\n state = {};\n static getDerivedStateFromProps() {}\n@@ -1053,17 +1131,23 @@ describe('ReactComponentLifeCycle', () => {\n }\n }\n \n- const div = document.createElement('div');\n- expect(() => ReactDOM.render(, div)).toErrorDev(\n+ const root = ReactDOMClient.createRoot(document.createElement('div'));\n+ await expect(async () => {\n+ await act(() => {\n+ root.render();\n+ });\n+ }).toErrorDev(\n 'MyComponent.getDerivedStateFromProps(): A valid state object (or null) must ' +\n 'be returned. You have returned undefined.',\n );\n \n \/\/ De-duped\n- ReactDOM.render(, div);\n+ await act(() => {\n+ root.render();\n+ });\n });\n \n- it('should warn if state is not initialized before getDerivedStateFromProps', () => {\n+ it('should warn if state is not initialized before getDerivedStateFromProps', async () => {\n class MyComponent extends React.Component {\n static getDerivedStateFromProps() {\n return null;\n@@ -1073,8 +1157,12 @@ describe('ReactComponentLifeCycle', () => {\n }\n }\n \n- const div = document.createElement('div');\n- expect(() => ReactDOM.render(, div)).toErrorDev(\n+ const root = ReactDOMClient.createRoot(document.createElement('div'));\n+ await expect(async () => {\n+ await act(() => {\n+ root.render();\n+ });\n+ }).toErrorDev(\n '`MyComponent` uses `getDerivedStateFromProps` but its initial state is ' +\n 'undefined. This is not recommended. Instead, define the initial state by ' +\n 'assigning an object to `this.state` in the constructor of `MyComponent`. ' +\n@@ -1082,10 +1170,12 @@ describe('ReactComponentLifeCycle', () => {\n );\n \n \/\/ De-duped\n- ReactDOM.render(, div);\n+ await act(() => {\n+ root.render();\n+ });\n });\n \n- it('should invoke both deprecated and new lifecycles if both are present', () => {\n+ it('should invoke both deprecated and new lifecycles if both are present', async () => {\n const log = [];\n \n class MyComponent extends React.Component {\n@@ -1112,8 +1202,12 @@ describe('ReactComponentLifeCycle', () => {\n }\n }\n \n- const div = document.createElement('div');\n- expect(() => ReactDOM.render(, div)).toWarnDev(\n+ const root = ReactDOMClient.createRoot(document.createElement('div'));\n+ await expect(async () => {\n+ await act(() => {\n+ root.render();\n+ });\n+ }).toWarnDev(\n [\n 'componentWillMount has been renamed',\n 'componentWillReceiveProps has been renamed',\n@@ -1125,7 +1219,9 @@ describe('ReactComponentLifeCycle', () => {\n \n log.length = 0;\n \n- ReactDOM.render(, div);\n+ await act(() => {\n+ root.render();\n+ });\n expect(log).toEqual([\n 'componentWillReceiveProps',\n 'UNSAFE_componentWillReceiveProps',\n@@ -1134,7 +1230,7 @@ describe('ReactComponentLifeCycle', () => {\n ]);\n });\n \n- it('should not override state with stale values if prevState is spread within getDerivedStateFromProps', () => {\n+ it('should not override state with stale values if prevState is spread within getDerivedStateFromProps', async () => {\n const divRef = React.createRef();\n let childInstance;\n \n@@ -1171,23 +1267,28 @@ describe('ReactComponentLifeCycle', () => {\n \n const container = document.createElement('div');\n document.body.appendChild(container);\n- try {\n- ReactDOM.render(, container);\n- expect(divRef.current.textContent).toBe('remote:0, local:0');\n+ const root = ReactDOMClient.createRoot(container);\n+\n+ await act(() => {\n+ root.render();\n+ });\n+ expect(divRef.current.textContent).toBe('remote:0, local:0');\n \n- \/\/ Trigger setState() calls\n+ \/\/ Trigger setState() calls\n+ await act(() => {\n childInstance.updateState();\n- expect(divRef.current.textContent).toBe('remote:1, local:1');\n+ });\n+ expect(divRef.current.textContent).toBe('remote:1, local:1');\n \n- \/\/ Trigger batched setState() calls\n+ \/\/ Trigger batched setState() calls\n+ await act(() => {\n divRef.current.click();\n- expect(divRef.current.textContent).toBe('remote:2, local:2');\n- } finally {\n- document.body.removeChild(container);\n- }\n+ });\n+ expect(divRef.current.textContent).toBe('remote:2, local:2');\n+ document.body.removeChild(container);\n });\n \n- it('should pass the return value from getSnapshotBeforeUpdate to componentDidUpdate', () => {\n+ it('should pass the return value from getSnapshotBeforeUpdate to componentDidUpdate', async () => {\n const log = [];\n \n class MyComponent extends React.Component {\n@@ -1216,22 +1317,24 @@ describe('ReactComponentLifeCycle', () => {\n }\n }\n \n- const div = document.createElement('div');\n- ReactDOM.render(\n-

\n- \n- <\/div>,\n- div,\n- );\n+ const root = ReactDOMClient.createRoot(document.createElement('div'));\n+ await act(() => {\n+ root.render(\n+

\n+ \n+ <\/div>,\n+ );\n+ });\n expect(log).toEqual(['render']);\n log.length = 0;\n \n- ReactDOM.render(\n-

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

\n+ \n+ <\/div>,\n+ );\n+ });\n expect(log).toEqual([\n 'render',\n 'getSnapshotBeforeUpdate() prevProps:foo prevState:1',\n@@ -1239,12 +1342,13 @@ describe('ReactComponentLifeCycle', () => {\n ]);\n log.length = 0;\n \n- ReactDOM.render(\n-

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

\n+ \n+ <\/div>,\n+ );\n+ });\n expect(log).toEqual([\n 'render',\n 'getSnapshotBeforeUpdate() prevProps:bar prevState:2',\n@@ -1252,11 +1356,13 @@ describe('ReactComponentLifeCycle', () => {\n ]);\n log.length = 0;\n \n- ReactDOM.render(

, div);\n+ await act(() => {\n+ root.render(

);\n+ });\n expect(log).toEqual([]);\n });\n \n- it('should pass previous state to shouldComponentUpdate even with getDerivedStateFromProps', () => {\n+ it('should pass previous state to shouldComponentUpdate even with getDerivedStateFromProps', async () => {\n const divRef = React.createRef();\n class SimpleComponent extends React.Component {\n constructor(props) {\n@@ -1282,15 +1388,18 @@ describe('ReactComponentLifeCycle', () => {\n }\n }\n \n- const div = document.createElement('div');\n-\n- ReactDOM.render(, div);\n+ const root = ReactDOMClient.createRoot(document.createElement('div'));\n+ await act(() => {\n+ root.render();\n+ });\n expect(divRef.current.textContent).toBe('value: initial');\n- ReactDOM.render(, div);\n+ await act(() => {\n+ root.render();\n+ });\n expect(divRef.current.textContent).toBe('value: updated');\n });\n \n- it('should call getSnapshotBeforeUpdate before mutations are committed', () => {\n+ it('should call getSnapshotBeforeUpdate before mutations are committed', async () => {\n const log = [];\n \n class MyComponent extends React.Component {\n@@ -1315,12 +1424,16 @@ describe('ReactComponentLifeCycle', () => {\n }\n }\n \n- const div = document.createElement('div');\n- ReactDOM.render(, div);\n+ const root = ReactDOMClient.createRoot(document.createElement('div'));\n+ await act(() => {\n+ root.render();\n+ });\n expect(log).toEqual(['render']);\n log.length = 0;\n \n- ReactDOM.render(, div);\n+ await act(() => {\n+ root.render();\n+ });\n expect(log).toEqual([\n 'render',\n 'getSnapshotBeforeUpdate',\n@@ -1329,7 +1442,7 @@ describe('ReactComponentLifeCycle', () => {\n log.length = 0;\n });\n \n- it('should warn if getSnapshotBeforeUpdate returns undefined', () => {\n+ it('should warn if getSnapshotBeforeUpdate returns undefined', async () => {\n class MyComponent extends React.Component {\n getSnapshotBeforeUpdate() {}\n componentDidUpdate() {}\n@@ -1338,18 +1451,27 @@ describe('ReactComponentLifeCycle', () => {\n }\n }\n \n- const div = document.createElement('div');\n- ReactDOM.render(, div);\n- expect(() => ReactDOM.render(, div)).toErrorDev(\n+ const root = ReactDOMClient.createRoot(document.createElement('div'));\n+ await act(() => {\n+ root.render();\n+ });\n+\n+ await expect(async () => {\n+ await act(() => {\n+ root.render();\n+ });\n+ }).toErrorDev(\n 'MyComponent.getSnapshotBeforeUpdate(): A snapshot value (or null) must ' +\n 'be returned. You have returned undefined.',\n );\n \n \/\/ De-duped\n- ReactDOM.render(, div);\n+ await act(() => {\n+ root.render();\n+ });\n });\n \n- it('should warn if getSnapshotBeforeUpdate is defined with no componentDidUpdate', () => {\n+ it('should warn if getSnapshotBeforeUpdate is defined with no componentDidUpdate', async () => {\n class MyComponent extends React.Component {\n getSnapshotBeforeUpdate() {\n return null;\n@@ -1359,17 +1481,23 @@ describe('ReactComponentLifeCycle', () => {\n }\n }\n \n- const div = document.createElement('div');\n- expect(() => ReactDOM.render(, div)).toErrorDev(\n+ const root = ReactDOMClient.createRoot(document.createElement('div'));\n+ await expect(async () => {\n+ await act(() => {\n+ root.render();\n+ });\n+ }).toErrorDev(\n 'MyComponent: getSnapshotBeforeUpdate() should be used with componentDidUpdate(). ' +\n 'This component defines getSnapshotBeforeUpdate() only.',\n );\n \n \/\/ De-duped\n- ReactDOM.render(, div);\n+ await act(() => {\n+ root.render();\n+ });\n });\n \n- it('warns about deprecated unsafe lifecycles', function () {\n+ it('warns about deprecated unsafe lifecycles', async () => {\n class MyComponent extends React.Component {\n componentWillMount() {}\n componentWillReceiveProps() {}\n@@ -1379,8 +1507,13 @@ describe('ReactComponentLifeCycle', () => {\n }\n }\n \n- const container = document.createElement('div');\n- expect(() => ReactDOM.render(, container)).toWarnDev(\n+ const root = ReactDOMClient.createRoot(document.createElement('div'));\n+\n+ await expect(async () => {\n+ await act(() => {\n+ root.render();\n+ });\n+ }).toWarnDev(\n [\n \/* eslint-disable max-len *\/\n `Warning: componentWillMount has been renamed, and is not recommended for use. See https:\/\/reactjs.org\/link\/unsafe-component-lifecycles for details.\n@@ -1408,14 +1541,18 @@ Please update the following components: MyComponent`,\n );\n \n \/\/ Dedupe check (update and instantiate new)\n- ReactDOM.render(, container);\n- ReactDOM.render(, container);\n+ await act(() => {\n+ root.render();\n+ });\n+ await act(() => {\n+ root.render();\n+ });\n });\n \n describe('react-lifecycles-compat', () => {\n const {polyfill} = require('react-lifecycles-compat');\n \n- it('should not warn for components with polyfilled getDerivedStateFromProps', () => {\n+ it('should not warn for components with polyfilled getDerivedStateFromProps', async () => {\n class PolyfilledComponent extends React.Component {\n state = {};\n static getDerivedStateFromProps() {\n@@ -1428,16 +1565,17 @@ Please update the following components: MyComponent`,\n \n polyfill(PolyfilledComponent);\n \n- const container = document.createElement('div');\n- ReactDOM.render(\n- \n- \n- <\/React.StrictMode>,\n- container,\n- );\n+ const root = ReactDOMClient.createRoot(document.createElement('div'));\n+ await act(() => {\n+ root.render(\n+ \n+ \n+ <\/React.StrictMode>,\n+ );\n+ });\n });\n \n- it('should not warn for components with polyfilled getSnapshotBeforeUpdate', () => {\n+ it('should not warn for components with polyfilled getSnapshotBeforeUpdate', async () => {\n class PolyfilledComponent extends React.Component {\n getSnapshotBeforeUpdate() {\n return null;\n@@ -1450,13 +1588,14 @@ Please update the following components: MyComponent`,\n \n polyfill(PolyfilledComponent);\n \n- const container = document.createElement('div');\n- ReactDOM.render(\n- \n- \n- <\/React.StrictMode>,\n- container,\n- );\n+ const root = ReactDOMClient.createRoot(document.createElement('div'));\n+ await act(() => {\n+ root.render(\n+ \n+ \n+ <\/React.StrictMode>,\n+ );\n+ });\n });\n });\n });\n"}

dillon1000/react

Files changed