{"files":[{"path":"packages\/react\/src\/__tests__\/ReactStrictMode-test.js","status":"M"}],"parents":["b25dcd3958872322cbeff797ba99c0856de1ebbc"],"body":"","patch":"diff --git a\/packages\/react\/src\/__tests__\/ReactStrictMode-test.js b\/packages\/react\/src\/__tests__\/ReactStrictMode-test.js\nindex c0d392a61f..c0a4d59f3d 100644\n--- a\/packages\/react\/src\/__tests__\/ReactStrictMode-test.js\n+++ b\/packages\/react\/src\/__tests__\/ReactStrictMode-test.js\n@@ -34,19 +34,21 @@ describe('ReactStrictMode', () => {\n useReducer = React.useReducer;\n });\n \n- it('should appear in the client component stack', () => {\n+ it('should appear in the client component stack', async () => {\n function Foo() {\n return

;\n }\n \n const container = document.createElement('div');\n- expect(() => {\n- ReactDOM.render(\n- \n- \n- <\/React.StrictMode>,\n- container,\n- );\n+ const root = ReactDOMClient.createRoot(container);\n+ await expect(async () => {\n+ await act(() => {\n+ root.render(\n+ \n+ \n+ <\/React.StrictMode>,\n+ );\n+ });\n }).toErrorDev(\n 'Invalid ARIA attribute `ariaTypo`. ' +\n 'ARIA attributes follow the pattern aria-* and must be lowercase.\\n' +\n@@ -75,7 +77,7 @@ describe('ReactStrictMode', () => {\n });\n \n \/\/ @gate __DEV__\n- it('should invoke precommit lifecycle methods twice', () => {\n+ it('should invoke only precommit lifecycle methods twice in legacy roots', async () => {\n let log = [];\n let shouldComponentUpdate = false;\n class ClassComponent extends React.Component {\n@@ -162,7 +164,7 @@ describe('ReactStrictMode', () => {\n ]);\n });\n \n- it('should invoke setState callbacks twice', () => {\n+ it('should invoke setState callbacks twice', async () => {\n let instance;\n class ClassComponent extends React.Component {\n state = {\n@@ -177,17 +179,21 @@ describe('ReactStrictMode', () => {\n let setStateCount = 0;\n \n const container = document.createElement('div');\n- ReactDOM.render(\n- \n- \n- <\/React.StrictMode>,\n- container,\n- );\n- instance.setState(state => {\n- setStateCount++;\n- return {\n- count: state.count + 1,\n- };\n+ const root = ReactDOMClient.createRoot(container);\n+ await act(() => {\n+ root.render(\n+ \n+ \n+ <\/React.StrictMode>,\n+ );\n+ });\n+ await act(() => {\n+ instance.setState(state => {\n+ setStateCount++;\n+ return {\n+ count: state.count + 1,\n+ };\n+ });\n });\n \n \/\/ Callback should be invoked twice in DEV\n@@ -196,7 +202,7 @@ describe('ReactStrictMode', () => {\n expect(instance.state.count).toBe(2);\n });\n \n- it('should invoke precommit lifecycle methods twice in DEV', () => {\n+ it('should invoke only precommit lifecycle methods twice in DEV legacy roots', async () => {\n const {StrictMode} = React;\n \n let log = [];\n@@ -303,7 +309,7 @@ describe('ReactStrictMode', () => {\n }\n });\n \n- it('should invoke setState callbacks twice in DEV', () => {\n+ it('should invoke setState callbacks twice in DEV', async () => {\n const {StrictMode} = React;\n \n let instance;\n@@ -320,17 +326,21 @@ describe('ReactStrictMode', () => {\n let setStateCount = 0;\n \n const container = document.createElement('div');\n- ReactDOM.render(\n- \n- \n- <\/StrictMode>,\n- container,\n- );\n- instance.setState(state => {\n- setStateCount++;\n- return {\n- count: state.count + 1,\n- };\n+ const root = ReactDOMClient.createRoot(container);\n+ await act(() => {\n+ root.render(\n+ \n+ \n+ <\/StrictMode>,\n+ );\n+ });\n+ await act(() => {\n+ instance.setState(state => {\n+ setStateCount++;\n+ return {\n+ count: state.count + 1,\n+ };\n+ });\n });\n \n \/\/ Callback should be invoked twice (in DEV)\n@@ -522,7 +532,6 @@ describe('Concurrent Mode', () => {\n jest.resetModules();\n \n React = require('react');\n- ReactDOM = require('react-dom');\n ReactDOMClient = require('react-dom\/client');\n act = require('internal-test-utils').act;\n });\n@@ -727,7 +736,7 @@ Please update the following components: Parent`,\n await act(() => root.render());\n });\n \n- it('should also warn inside of \"strict\" mode trees', () => {\n+ it('should also warn inside of \"strict\" mode trees', async () => {\n const {StrictMode} = React;\n \n class SyncRoot extends React.Component {\n@@ -765,13 +774,20 @@ Please update the following components: Parent`,\n \n const container = document.createElement('div');\n \n- expect(() => ReactDOM.render(, container)).toErrorDev(\n+ const root = ReactDOMClient.createRoot(container);\n+ await expect(async () => {\n+ await act(() => {\n+ root.render();\n+ });\n+ }).toErrorDev(\n 'Using UNSAFE_componentWillReceiveProps in strict mode is not recommended',\n {withoutStack: true},\n );\n \n \/\/ Dedupe\n- ReactDOM.render(, container);\n+ await act(() => {\n+ root.render();\n+ });\n });\n });\n \n@@ -779,11 +795,11 @@ describe('symbol checks', () => {\n beforeEach(() => {\n jest.resetModules();\n React = require('react');\n- ReactDOM = require('react-dom');\n ReactDOMClient = require('react-dom\/client');\n+ act = require('internal-test-utils').act;\n });\n \n- it('should switch from StrictMode to a Fragment and reset state', () => {\n+ it('should switch from StrictMode to a Fragment and reset state', async () => {\n const {Fragment, StrictMode} = React;\n \n function ParentComponent({useFragment}) {\n@@ -813,13 +829,18 @@ describe('symbol checks', () => {\n }\n \n const container = document.createElement('div');\n- ReactDOM.render(, container);\n+ const root = ReactDOMClient.createRoot(container);\n+ await act(() => {\n+ root.render();\n+ });\n expect(container.textContent).toBe('count:1');\n- ReactDOM.render(, container);\n+ await act(() => {\n+ root.render();\n+ });\n expect(container.textContent).toBe('count:1');\n });\n \n- it('should switch from a Fragment to StrictMode and reset state', () => {\n+ it('should switch from a Fragment to StrictMode and reset state', async () => {\n const {Fragment, StrictMode} = React;\n \n function ParentComponent({useFragment}) {\n@@ -849,13 +870,18 @@ describe('symbol checks', () => {\n }\n \n const container = document.createElement('div');\n- ReactDOM.render(, container);\n+ const root = ReactDOMClient.createRoot(container);\n+ await act(() => {\n+ root.render();\n+ });\n expect(container.textContent).toBe('count:1');\n- ReactDOM.render(, container);\n+ await act(() => {\n+ root.render();\n+ });\n expect(container.textContent).toBe('count:1');\n });\n \n- it('should update with StrictMode without losing state', () => {\n+ it('should update with StrictMode without losing state', async () => {\n const {StrictMode} = React;\n \n function ParentComponent() {\n@@ -881,9 +907,14 @@ describe('symbol checks', () => {\n }\n \n const container = document.createElement('div');\n- ReactDOM.render(, container);\n+ const root = ReactDOMClient.createRoot(container);\n+ await act(() => {\n+ root.render();\n+ });\n expect(container.textContent).toBe('count:1');\n- ReactDOM.render(, container);\n+ await act(() => {\n+ root.render();\n+ });\n expect(container.textContent).toBe('count:2');\n });\n });\n@@ -894,9 +925,10 @@ describe('string refs', () => {\n React = require('react');\n ReactDOM = require('react-dom');\n ReactDOMClient = require('react-dom\/client');\n+ act = require('internal-test-utils').act;\n });\n \n- it('should warn within a strict tree', () => {\n+ it('should warn within a strict tree', async () => {\n const {StrictMode} = React;\n \n class OuterComponent extends React.Component {\n@@ -916,8 +948,11 @@ describe('string refs', () => {\n }\n \n const container = document.createElement('div');\n- expect(() => {\n- ReactDOM.render(, container);\n+ const root = ReactDOMClient.createRoot(container);\n+ await expect(async () => {\n+ await act(() => {\n+ root.render();\n+ });\n }).toErrorDev(\n 'Warning: Component \"StrictMode\" contains the string ref \"somestring\". ' +\n 'Support for string refs will be removed in a future major release. ' +\n@@ -926,49 +961,47 @@ describe('string refs', () => {\n ' in OuterComponent (at **)',\n );\n \n- \/\/ Dedup\n- ReactDOM.render(, container);\n+ await act(() => {\n+ root.render();\n+ });\n });\n \n- it('should warn within a strict tree', () => {\n+ it('should warn within a strict tree', async () => {\n const {StrictMode} = React;\n \n class OuterComponent extends React.Component {\n render() {\n return (\n \n- \n+ \n <\/StrictMode>\n );\n }\n }\n \n class InnerComponent extends React.Component {\n- render() {\n- return ;\n- }\n- }\n-\n- class MiddleComponent extends React.Component {\n render() {\n return null;\n }\n }\n \n const container = document.createElement('div');\n- expect(() => {\n- ReactDOM.render(, container);\n+ const root = ReactDOMClient.createRoot(container);\n+ await expect(async () => {\n+ await act(() => {\n+ root.render();\n+ });\n }).toErrorDev(\n- 'Warning: Component \"InnerComponent\" contains the string ref \"somestring\". ' +\n+ 'Warning: Component \"StrictMode\" contains the string ref \"somestring\". ' +\n 'Support for string refs will be removed in a future major release. ' +\n 'We recommend using useRef() or createRef() instead. ' +\n 'Learn more about using refs safely here: https:\/\/reactjs.org\/link\/strict-mode-string-ref\\n' +\n- ' in InnerComponent (at **)\\n' +\n ' in OuterComponent (at **)',\n );\n \n- \/\/ Dedup\n- ReactDOM.render(, container);\n+ await act(() => {\n+ root.render();\n+ });\n });\n });\n \n@@ -976,8 +1009,8 @@ describe('context legacy', () => {\n beforeEach(() => {\n jest.resetModules();\n React = require('react');\n- ReactDOM = require('react-dom');\n ReactDOMClient = require('react-dom\/client');\n+ act = require('internal-test-utils').act;\n PropTypes = require('prop-types');\n });\n \n@@ -986,7 +1019,7 @@ describe('context legacy', () => {\n });\n \n \/\/ @gate !disableLegacyContext || !__DEV__\n- it('should warn if the legacy context API have been used in strict mode', () => {\n+ it('should warn if the legacy context API have been used in strict mode', async () => {\n class LegacyContextProvider extends React.Component {\n getChildContext() {\n return {color: 'purple'};\n@@ -1039,8 +1072,11 @@ describe('context legacy', () => {\n };\n \n const container = document.createElement('div');\n- expect(() => {\n- ReactDOM.render(, container);\n+ const root = ReactDOMClient.createRoot(container);\n+ await expect(async () => {\n+ await act(() => {\n+ root.render();\n+ });\n }).toErrorDev(\n 'Warning: Legacy context API has been detected within a strict-mode tree.' +\n '\\n\\nThe old API will be supported in all 16.x releases, but applications ' +\n@@ -1055,19 +1091,21 @@ describe('context legacy', () => {\n );\n \n \/\/ Dedupe\n- ReactDOM.render(, container);\n+ await act(() => {\n+ root.render();\n+ });\n });\n \n describe('console logs logging', () => {\n beforeEach(() => {\n jest.resetModules();\n React = require('react');\n- ReactDOM = require('react-dom');\n ReactDOMClient = require('react-dom\/client');\n+ act = require('internal-test-utils').act;\n });\n \n if (ReactFeatureFlags.consoleManagedByDevToolsDuringStrictMode) {\n- it('does not disable logs for class double render', () => {\n+ it('does not disable logs for class double render', async () => {\n spyOnDevAndProd(console, 'log');\n \n let count = 0;\n@@ -1080,13 +1118,14 @@ describe('context legacy', () => {\n }\n \n const container = document.createElement('div');\n- ReactDOM.render(\n- \n- \n- <\/React.StrictMode>,\n- container,\n- );\n-\n+ const root = ReactDOMClient.createRoot(container);\n+ await act(() => {\n+ root.render(\n+ \n+ \n+ <\/React.StrictMode>,\n+ );\n+ });\n expect(count).toBe(__DEV__ ? 2 : 1);\n expect(console.log).toBeCalledTimes(__DEV__ ? 2 : 1);\n \/\/ Note: we should display the first log because otherwise\n@@ -1095,7 +1134,7 @@ describe('context legacy', () => {\n expect(console.log).toBeCalledWith('foo 1');\n });\n \n- it('does not disable logs for class double ctor', () => {\n+ it('does not disable logs for class double ctor', async () => {\n spyOnDevAndProd(console, 'log');\n \n let count = 0;\n@@ -1111,13 +1150,14 @@ describe('context legacy', () => {\n }\n \n const container = document.createElement('div');\n- ReactDOM.render(\n- \n- \n- <\/React.StrictMode>,\n- container,\n- );\n-\n+ const root = ReactDOMClient.createRoot(container);\n+ await act(() => {\n+ root.render(\n+ \n+ \n+ <\/React.StrictMode>,\n+ );\n+ });\n expect(count).toBe(__DEV__ ? 2 : 1);\n expect(console.log).toBeCalledTimes(__DEV__ ? 2 : 1);\n \/\/ Note: we should display the first log because otherwise\n@@ -1126,7 +1166,7 @@ describe('context legacy', () => {\n expect(console.log).toBeCalledWith('foo 1');\n });\n \n- it('does not disable logs for class double getDerivedStateFromProps', () => {\n+ it('does not disable logs for class double getDerivedStateFromProps', async () => {\n spyOnDevAndProd(console, 'log');\n \n let count = 0;\n@@ -1143,13 +1183,14 @@ describe('context legacy', () => {\n }\n \n const container = document.createElement('div');\n- ReactDOM.render(\n- \n- \n- <\/React.StrictMode>,\n- container,\n- );\n-\n+ const root = ReactDOMClient.createRoot(container);\n+ await act(() => {\n+ root.render(\n+ \n+ \n+ <\/React.StrictMode>,\n+ );\n+ });\n expect(count).toBe(__DEV__ ? 2 : 1);\n expect(console.log).toBeCalledTimes(__DEV__ ? 2 : 1);\n \/\/ Note: we should display the first log because otherwise\n@@ -1158,7 +1199,7 @@ describe('context legacy', () => {\n expect(console.log).toBeCalledWith('foo 1');\n });\n \n- it('does not disable logs for class double shouldComponentUpdate', () => {\n+ it('does not disable logs for class double shouldComponentUpdate', async () => {\n spyOnDevAndProd(console, 'log');\n \n let count = 0;\n@@ -1175,19 +1216,21 @@ describe('context legacy', () => {\n }\n \n const container = document.createElement('div');\n- ReactDOM.render(\n- \n- \n- <\/React.StrictMode>,\n- container,\n- );\n- \/\/ Trigger sCU:\n- ReactDOM.render(\n- \n- \n- <\/React.StrictMode>,\n- container,\n- );\n+ const root = ReactDOMClient.createRoot(container);\n+ await act(() => {\n+ root.render(\n+ \n+ \n+ <\/React.StrictMode>,\n+ );\n+ });\n+ await act(() => {\n+ root.render(\n+ \n+ \n+ <\/React.StrictMode>,\n+ );\n+ });\n \n expect(count).toBe(__DEV__ ? 2 : 1);\n expect(console.log).toBeCalledTimes(__DEV__ ? 2 : 1);\n@@ -1197,7 +1240,7 @@ describe('context legacy', () => {\n expect(console.log).toBeCalledWith('foo 1');\n });\n \n- it('does not disable logs for class state updaters', () => {\n+ it('does not disable logs for class state updaters', async () => {\n spyOnDevAndProd(console, 'log');\n \n let inst;\n@@ -1211,16 +1254,20 @@ describe('context legacy', () => {\n }\n \n const container = document.createElement('div');\n- ReactDOM.render(\n- \n- \n- <\/React.StrictMode>,\n- container,\n- );\n- inst.setState(() => {\n- count++;\n- console.log('foo ' + count);\n- return {};\n+ const root = ReactDOMClient.createRoot(container);\n+ await act(() => {\n+ root.render(\n+ \n+ \n+ <\/React.StrictMode>,\n+ );\n+ });\n+ await act(() => {\n+ inst.setState(() => {\n+ count++;\n+ console.log('foo ' + count);\n+ return {};\n+ });\n });\n \n expect(count).toBe(__DEV__ ? 2 : 1);\n@@ -1231,7 +1278,7 @@ describe('context legacy', () => {\n expect(console.log).toBeCalledWith('foo 1');\n });\n \n- it('does not disable logs for function double render', () => {\n+ it('does not disable logs for function double render', async () => {\n spyOnDevAndProd(console, 'log');\n \n let count = 0;\n@@ -1242,13 +1289,14 @@ describe('context legacy', () => {\n }\n \n const container = document.createElement('div');\n- ReactDOM.render(\n- \n- \n- <\/React.StrictMode>,\n- container,\n- );\n-\n+ const root = ReactDOMClient.createRoot(container);\n+ await act(() => {\n+ root.render(\n+ \n+ \n+ <\/React.StrictMode>,\n+ );\n+ });\n expect(count).toBe(__DEV__ ? 2 : 1);\n expect(console.log).toBeCalledTimes(__DEV__ ? 2 : 1);\n \/\/ Note: we should display the first log because otherwise\n@@ -1257,7 +1305,7 @@ describe('context legacy', () => {\n expect(console.log).toBeCalledWith('foo 1');\n });\n } else {\n- it('disable logs for class double render', () => {\n+ it('disable logs for class double render', async () => {\n spyOnDevAndProd(console, 'log');\n \n let count = 0;\n@@ -1270,13 +1318,14 @@ describe('context legacy', () => {\n }\n \n const container = document.createElement('div');\n- ReactDOM.render(\n- \n- \n- <\/React.StrictMode>,\n- container,\n- );\n-\n+ const root = ReactDOMClient.createRoot(container);\n+ await act(() => {\n+ root.render(\n+ \n+ \n+ <\/React.StrictMode>,\n+ );\n+ });\n expect(count).toBe(__DEV__ ? 2 : 1);\n expect(console.log).toBeCalledTimes(1);\n \/\/ Note: we should display the first log because otherwise\n@@ -1285,7 +1334,7 @@ describe('context legacy', () => {\n expect(console.log).toBeCalledWith('foo 1');\n });\n \n- it('disables logs for class double ctor', () => {\n+ it('disables logs for class double ctor', async () => {\n spyOnDevAndProd(console, 'log');\n \n let count = 0;\n@@ -1301,13 +1350,14 @@ describe('context legacy', () => {\n }\n \n const container = document.createElement('div');\n- ReactDOM.render(\n- \n- \n- <\/React.StrictMode>,\n- container,\n- );\n-\n+ const root = ReactDOMClient.createRoot(container);\n+ await act(() => {\n+ root.render(\n+ \n+ \n+ <\/React.StrictMode>,\n+ );\n+ });\n expect(count).toBe(__DEV__ ? 2 : 1);\n expect(console.log).toBeCalledTimes(1);\n \/\/ Note: we should display the first log because otherwise\n@@ -1316,7 +1366,7 @@ describe('context legacy', () => {\n expect(console.log).toBeCalledWith('foo 1');\n });\n \n- it('disable logs for class double getDerivedStateFromProps', () => {\n+ it('disable logs for class double getDerivedStateFromProps', async () => {\n spyOnDevAndProd(console, 'log');\n \n let count = 0;\n@@ -1333,13 +1383,14 @@ describe('context legacy', () => {\n }\n \n const container = document.createElement('div');\n- ReactDOM.render(\n- \n- \n- <\/React.StrictMode>,\n- container,\n- );\n-\n+ const root = ReactDOMClient.createRoot(container);\n+ await act(() => {\n+ root.render(\n+ \n+ \n+ <\/React.StrictMode>,\n+ );\n+ });\n expect(count).toBe(__DEV__ ? 2 : 1);\n expect(console.log).toBeCalledTimes(1);\n \/\/ Note: we should display the first log because otherwise\n@@ -1348,7 +1399,7 @@ describe('context legacy', () => {\n expect(console.log).toBeCalledWith('foo 1');\n });\n \n- it('disable logs for class double shouldComponentUpdate', () => {\n+ it('disable logs for class double shouldComponentUpdate', async () => {\n spyOnDevAndProd(console, 'log');\n \n let count = 0;\n@@ -1365,20 +1416,21 @@ describe('context legacy', () => {\n }\n \n const container = document.createElement('div');\n- ReactDOM.render(\n- \n- \n- <\/React.StrictMode>,\n- container,\n- );\n- \/\/ Trigger sCU:\n- ReactDOM.render(\n- \n- \n- <\/React.StrictMode>,\n- container,\n- );\n-\n+ const root = ReactDOMClient.createRoot(container);\n+ await act(() => {\n+ root.render(\n+ \n+ \n+ <\/React.StrictMode>,\n+ );\n+ });\n+ await act(() => {\n+ root.render(\n+ \n+ \n+ <\/React.StrictMode>,\n+ );\n+ });\n expect(count).toBe(__DEV__ ? 2 : 1);\n expect(console.log).toBeCalledTimes(1);\n \/\/ Note: we should display the first log because otherwise\n@@ -1387,7 +1439,7 @@ describe('context legacy', () => {\n expect(console.log).toBeCalledWith('foo 1');\n });\n \n- it('disable logs for class state updaters', () => {\n+ it('disable logs for class state updaters', async () => {\n spyOnDevAndProd(console, 'log');\n \n let inst;\n@@ -1401,16 +1453,20 @@ describe('context legacy', () => {\n }\n \n const container = document.createElement('div');\n- ReactDOM.render(\n- \n- \n- <\/React.StrictMode>,\n- container,\n- );\n- inst.setState(() => {\n- count++;\n- console.log('foo ' + count);\n- return {};\n+ const root = ReactDOMClient.createRoot(container);\n+ await act(() => {\n+ root.render(\n+ \n+ \n+ <\/React.StrictMode>,\n+ );\n+ });\n+ await act(() => {\n+ inst.setState(() => {\n+ count++;\n+ console.log('foo ' + count);\n+ return {};\n+ });\n });\n \n expect(count).toBe(__DEV__ ? 2 : 1);\n@@ -1421,7 +1477,7 @@ describe('context legacy', () => {\n expect(console.log).toBeCalledWith('foo 1');\n });\n \n- it('disable logs for function double render', () => {\n+ it('disable logs for function double render', async () => {\n spyOnDevAndProd(console, 'log');\n \n let count = 0;\n@@ -1432,13 +1488,14 @@ describe('context legacy', () => {\n }\n \n const container = document.createElement('div');\n- ReactDOM.render(\n- \n- \n- <\/React.StrictMode>,\n- container,\n- );\n-\n+ const root = ReactDOMClient.createRoot(container);\n+ await act(() => {\n+ root.render(\n+ \n+ \n+ <\/React.StrictMode>,\n+ );\n+ });\n expect(count).toBe(__DEV__ ? 2 : 1);\n expect(console.log).toBeCalledTimes(1);\n \/\/ Note: we should display the first log because otherwise\n","commit":{"subject":"Convert ReactStrictMode to createRoot (#28162)","authorEmail":"silbermann.sebastian@gmail.com","authorName":"Sebastian Silbermann","authoredAt":"2024-02-02T08:57:56+01:00","shortRevision":"fa8a34bfac","revision":"fa8a34bfac9be820269b52f1e55afe9fe89bfcf1"}}

dillon1000/react

Files changed