@samitouri / QOS-React-2 / commits / fa8a34bfac

Convert ReactStrictMode to createRoot (#28162)

Sebastian Silbermann committed Feb 2, 2024 at 08:57 UTC fa8a34bfac9be820269b52f1e55afe9fe89bfcf1
1 file changed +245 -188
packages/react/src/__tests__/ReactStrictMode-test.js
+245 -188
@@ -34,19 +34,21 @@ describe('ReactStrictMode', () => {
34 useReducer = React.useReducer;
35 });
36
37 - it('should appear in the client component stack', () => {
37 + it('should appear in the client component stack', async () => {
38 function Foo() {
39 return <div ariaTypo="" />;
40 }
41
42 const container = document.createElement('div');
43 - expect(() => {
44 - ReactDOM.render(
45 - <React.StrictMode>
46 - <Foo />
47 - </React.StrictMode>,
48 - container,
49 - );
43 + const root = ReactDOMClient.createRoot(container);
44 + await expect(async () => {
45 + await act(() => {
46 + root.render(
47 + <React.StrictMode>
48 + <Foo />
49 + </React.StrictMode>,
50 + );
51 + });
52 }).toErrorDev(
53 'Invalid ARIA attribute `ariaTypo`. ' +
54 'ARIA attributes follow the pattern aria-* and must be lowercase.\n' +
@@ -75,7 +77,7 @@ describe('ReactStrictMode', () => {
77 });
78
79 // @gate __DEV__
78 - it('should invoke precommit lifecycle methods twice', () => {
80 + it('should invoke only precommit lifecycle methods twice in legacy roots', async () => {
81 let log = [];
82 let shouldComponentUpdate = false;
83 class ClassComponent extends React.Component {
@@ -162,7 +164,7 @@ describe('ReactStrictMode', () => {
164 ]);
165 });
166
165 - it('should invoke setState callbacks twice', () => {
167 + it('should invoke setState callbacks twice', async () => {
168 let instance;
169 class ClassComponent extends React.Component {
170 state = {
@@ -177,17 +179,21 @@ describe('ReactStrictMode', () => {
179 let setStateCount = 0;
180
181 const container = document.createElement('div');
180 - ReactDOM.render(
181 - <React.StrictMode>
182 - <ClassComponent />
183 - </React.StrictMode>,
184 - container,
185 - );
186 - instance.setState(state => {
187 - setStateCount++;
188 - return {
189 - count: state.count + 1,
190 - };
182 + const root = ReactDOMClient.createRoot(container);
183 + await act(() => {
184 + root.render(
185 + <React.StrictMode>
186 + <ClassComponent />
187 + </React.StrictMode>,
188 + );
189 + });
190 + await act(() => {
191 + instance.setState(state => {
192 + setStateCount++;
193 + return {
194 + count: state.count + 1,
195 + };
196 + });
197 });
198
199 // Callback should be invoked twice in DEV
@@ -196,7 +202,7 @@ describe('ReactStrictMode', () => {
202 expect(instance.state.count).toBe(2);
203 });
204
199 - it('should invoke precommit lifecycle methods twice in DEV', () => {
205 + it('should invoke only precommit lifecycle methods twice in DEV legacy roots', async () => {
206 const {StrictMode} = React;
207
208 let log = [];
@@ -303,7 +309,7 @@ describe('ReactStrictMode', () => {
309 }
310 });
311
306 - it('should invoke setState callbacks twice in DEV', () => {
312 + it('should invoke setState callbacks twice in DEV', async () => {
313 const {StrictMode} = React;
314
315 let instance;
@@ -320,17 +326,21 @@ describe('ReactStrictMode', () => {
326 let setStateCount = 0;
327
328 const container = document.createElement('div');
323 - ReactDOM.render(
324 - <StrictMode>
325 - <ClassComponent />
326 - </StrictMode>,
327 - container,
328 - );
329 - instance.setState(state => {
330 - setStateCount++;
331 - return {
332 - count: state.count + 1,
333 - };
329 + const root = ReactDOMClient.createRoot(container);
330 + await act(() => {
331 + root.render(
332 + <StrictMode>
333 + <ClassComponent />
334 + </StrictMode>,
335 + );
336 + });
337 + await act(() => {
338 + instance.setState(state => {
339 + setStateCount++;
340 + return {
341 + count: state.count + 1,
342 + };
343 + });
344 });
345
346 // Callback should be invoked twice (in DEV)
@@ -522,7 +532,6 @@ describe('Concurrent Mode', () => {
532 jest.resetModules();
533
534 React = require('react');
525 - ReactDOM = require('react-dom');
535 ReactDOMClient = require('react-dom/client');
536 act = require('internal-test-utils').act;
537 });
@@ -727,7 +736,7 @@ Please update the following components: Parent`,
736 await act(() => root.render(<StrictRoot foo={false} />));
737 });
738
730 - it('should also warn inside of "strict" mode trees', () => {
739 + it('should also warn inside of "strict" mode trees', async () => {
740 const {StrictMode} = React;
741
742 class SyncRoot extends React.Component {
@@ -765,13 +774,20 @@ Please update the following components: Parent`,
774
775 const container = document.createElement('div');
776
768 - expect(() => ReactDOM.render(<SyncRoot />, container)).toErrorDev(
777 + const root = ReactDOMClient.createRoot(container);
778 + await expect(async () => {
779 + await act(() => {
780 + root.render(<SyncRoot />);
781 + });
782 + }).toErrorDev(
783 'Using UNSAFE_componentWillReceiveProps in strict mode is not recommended',
784 {withoutStack: true},
785 );
786
787 // Dedupe
774 - ReactDOM.render(<SyncRoot />, container);
788 + await act(() => {
789 + root.render(<SyncRoot />);
790 + });
791 });
792 });
793
@@ -779,11 +795,11 @@ describe('symbol checks', () => {
795 beforeEach(() => {
796 jest.resetModules();
797 React = require('react');
782 - ReactDOM = require('react-dom');
798 ReactDOMClient = require('react-dom/client');
799 + act = require('internal-test-utils').act;
800 });
801
786 - it('should switch from StrictMode to a Fragment and reset state', () => {
802 + it('should switch from StrictMode to a Fragment and reset state', async () => {
803 const {Fragment, StrictMode} = React;
804
805 function ParentComponent({useFragment}) {
@@ -813,13 +829,18 @@ describe('symbol checks', () => {
829 }
830
831 const container = document.createElement('div');
816 - ReactDOM.render(<ParentComponent useFragment={false} />, container);
832 + const root = ReactDOMClient.createRoot(container);
833 + await act(() => {
834 + root.render(<ParentComponent useFragment={false} />);
835 + });
836 expect(container.textContent).toBe('count:1');
818 - ReactDOM.render(<ParentComponent useFragment={true} />, container);
837 + await act(() => {
838 + root.render(<ParentComponent useFragment={true} />);
839 + });
840 expect(container.textContent).toBe('count:1');
841 });
842
822 - it('should switch from a Fragment to StrictMode and reset state', () => {
843 + it('should switch from a Fragment to StrictMode and reset state', async () => {
844 const {Fragment, StrictMode} = React;
845
846 function ParentComponent({useFragment}) {
@@ -849,13 +870,18 @@ describe('symbol checks', () => {
870 }
871
872 const container = document.createElement('div');
852 - ReactDOM.render(<ParentComponent useFragment={true} />, container);
873 + const root = ReactDOMClient.createRoot(container);
874 + await act(() => {
875 + root.render(<ParentComponent useFragment={true} />);
876 + });
877 expect(container.textContent).toBe('count:1');
854 - ReactDOM.render(<ParentComponent useFragment={false} />, container);
878 + await act(() => {
879 + root.render(<ParentComponent useFragment={false} />);
880 + });
881 expect(container.textContent).toBe('count:1');
882 });
883
858 - it('should update with StrictMode without losing state', () => {
884 + it('should update with StrictMode without losing state', async () => {
885 const {StrictMode} = React;
886
887 function ParentComponent() {
@@ -881,9 +907,14 @@ describe('symbol checks', () => {
907 }
908
909 const container = document.createElement('div');
884 - ReactDOM.render(<ParentComponent />, container);
910 + const root = ReactDOMClient.createRoot(container);
911 + await act(() => {
912 + root.render(<ParentComponent />);
913 + });
914 expect(container.textContent).toBe('count:1');
886 - ReactDOM.render(<ParentComponent />, container);
915 + await act(() => {
916 + root.render(<ParentComponent />);
917 + });
918 expect(container.textContent).toBe('count:2');
919 });
920 });
@@ -894,9 +925,10 @@ describe('string refs', () => {
925 React = require('react');
926 ReactDOM = require('react-dom');
927 ReactDOMClient = require('react-dom/client');
928 + act = require('internal-test-utils').act;
929 });
930
899 - it('should warn within a strict tree', () => {
931 + it('should warn within a strict tree', async () => {
932 const {StrictMode} = React;
933
934 class OuterComponent extends React.Component {
@@ -916,8 +948,11 @@ describe('string refs', () => {
948 }
949
950 const container = document.createElement('div');
919 - expect(() => {
920 - ReactDOM.render(<OuterComponent />, container);
951 + const root = ReactDOMClient.createRoot(container);
952 + await expect(async () => {
953 + await act(() => {
954 + root.render(<OuterComponent />);
955 + });
956 }).toErrorDev(
957 'Warning: Component "StrictMode" contains the string ref "somestring". ' +
958 'Support for string refs will be removed in a future major release. ' +
@@ -926,49 +961,47 @@ describe('string refs', () => {
961 ' in OuterComponent (at **)',
962 );
963
929 - // Dedup
930 - ReactDOM.render(<OuterComponent />, container);
964 + await act(() => {
965 + root.render(<OuterComponent />);
966 + });
967 });
968
933 - it('should warn within a strict tree', () => {
969 + it('should warn within a strict tree', async () => {
970 const {StrictMode} = React;
971
972 class OuterComponent extends React.Component {
973 render() {
974 return (
975 <StrictMode>
940 - <InnerComponent />
976 + <InnerComponent ref="somestring" />
977 </StrictMode>
978 );
979 }
980 }
981
982 class InnerComponent extends React.Component {
947 - render() {
948 - return <MiddleComponent ref="somestring" />;
949 - }
950 - }
951 -
952 - class MiddleComponent extends React.Component {
983 render() {
984 return null;
985 }
986 }
987
988 const container = document.createElement('div');
959 - expect(() => {
960 - ReactDOM.render(<OuterComponent />, container);
989 + const root = ReactDOMClient.createRoot(container);
990 + await expect(async () => {
991 + await act(() => {
992 + root.render(<OuterComponent />);
993 + });
994 }).toErrorDev(
962 - 'Warning: Component "InnerComponent" contains the string ref "somestring". ' +
995 + 'Warning: Component "StrictMode" contains the string ref "somestring". ' +
996 'Support for string refs will be removed in a future major release. ' +
997 'We recommend using useRef() or createRef() instead. ' +
998 'Learn more about using refs safely here: https://reactjs.org/link/strict-mode-string-ref\n' +
966 - ' in InnerComponent (at **)\n' +
999 ' in OuterComponent (at **)',
1000 );
1001
970 - // Dedup
971 - ReactDOM.render(<OuterComponent />, container);
1002 + await act(() => {
1003 + root.render(<OuterComponent />);
1004 + });
1005 });
1006 });
1007
@@ -976,8 +1009,8 @@ describe('context legacy', () => {
1009 beforeEach(() => {
1010 jest.resetModules();
1011 React = require('react');
979 - ReactDOM = require('react-dom');
1012 ReactDOMClient = require('react-dom/client');
1013 + act = require('internal-test-utils').act;
1014 PropTypes = require('prop-types');
1015 });
1016
@@ -986,7 +1019,7 @@ describe('context legacy', () => {
1019 });
1020
1021 // @gate !disableLegacyContext || !__DEV__
989 - it('should warn if the legacy context API have been used in strict mode', () => {
1022 + it('should warn if the legacy context API have been used in strict mode', async () => {
1023 class LegacyContextProvider extends React.Component {
1024 getChildContext() {
1025 return {color: 'purple'};
@@ -1039,8 +1072,11 @@ describe('context legacy', () => {
1072 };
1073
1074 const container = document.createElement('div');
1042 - expect(() => {
1043 - ReactDOM.render(<Root />, container);
1075 + const root = ReactDOMClient.createRoot(container);
1076 + await expect(async () => {
1077 + await act(() => {
1078 + root.render(<Root />);
1079 + });
1080 }).toErrorDev(
1081 'Warning: Legacy context API has been detected within a strict-mode tree.' +
1082 '\n\nThe old API will be supported in all 16.x releases, but applications ' +
@@ -1055,19 +1091,21 @@ describe('context legacy', () => {
1091 );
1092
1093 // Dedupe
1058 - ReactDOM.render(<Root />, container);
1094 + await act(() => {
1095 + root.render(<Root />);
1096 + });
1097 });
1098
1099 describe('console logs logging', () => {
1100 beforeEach(() => {
1101 jest.resetModules();
1102 React = require('react');
1065 - ReactDOM = require('react-dom');
1103 ReactDOMClient = require('react-dom/client');
1104 + act = require('internal-test-utils').act;
1105 });
1106
1107 if (ReactFeatureFlags.consoleManagedByDevToolsDuringStrictMode) {
1070 - it('does not disable logs for class double render', () => {
1108 + it('does not disable logs for class double render', async () => {
1109 spyOnDevAndProd(console, 'log');
1110
1111 let count = 0;
@@ -1080,13 +1118,14 @@ describe('context legacy', () => {
1118 }
1119
1120 const container = document.createElement('div');
1083 - ReactDOM.render(
1084 - <React.StrictMode>
1085 - <Foo />
1086 - </React.StrictMode>,
1087 - container,
1088 - );
1089 -
1121 + const root = ReactDOMClient.createRoot(container);
1122 + await act(() => {
1123 + root.render(
1124 + <React.StrictMode>
1125 + <Foo />
1126 + </React.StrictMode>,
1127 + );
1128 + });
1129 expect(count).toBe(__DEV__ ? 2 : 1);
1130 expect(console.log).toBeCalledTimes(__DEV__ ? 2 : 1);
1131 // Note: we should display the first log because otherwise
@@ -1095,7 +1134,7 @@ describe('context legacy', () => {
1134 expect(console.log).toBeCalledWith('foo 1');
1135 });
1136
1098 - it('does not disable logs for class double ctor', () => {
1137 + it('does not disable logs for class double ctor', async () => {
1138 spyOnDevAndProd(console, 'log');
1139
1140 let count = 0;
@@ -1111,13 +1150,14 @@ describe('context legacy', () => {
1150 }
1151
1152 const container = document.createElement('div');
1114 - ReactDOM.render(
1115 - <React.StrictMode>
1116 - <Foo />
1117 - </React.StrictMode>,
1118 - container,
1119 - );
1120 -
1153 + const root = ReactDOMClient.createRoot(container);
1154 + await act(() => {
1155 + root.render(
1156 + <React.StrictMode>
1157 + <Foo />
1158 + </React.StrictMode>,
1159 + );
1160 + });
1161 expect(count).toBe(__DEV__ ? 2 : 1);
1162 expect(console.log).toBeCalledTimes(__DEV__ ? 2 : 1);
1163 // Note: we should display the first log because otherwise
@@ -1126,7 +1166,7 @@ describe('context legacy', () => {
1166 expect(console.log).toBeCalledWith('foo 1');
1167 });
1168
1129 - it('does not disable logs for class double getDerivedStateFromProps', () => {
1169 + it('does not disable logs for class double getDerivedStateFromProps', async () => {
1170 spyOnDevAndProd(console, 'log');
1171
1172 let count = 0;
@@ -1143,13 +1183,14 @@ describe('context legacy', () => {
1183 }
1184
1185 const container = document.createElement('div');
1146 - ReactDOM.render(
1147 - <React.StrictMode>
1148 - <Foo />
1149 - </React.StrictMode>,
1150 - container,
1151 - );
1152 -
1186 + const root = ReactDOMClient.createRoot(container);
1187 + await act(() => {
1188 + root.render(
1189 + <React.StrictMode>
1190 + <Foo />
1191 + </React.StrictMode>,
1192 + );
1193 + });
1194 expect(count).toBe(__DEV__ ? 2 : 1);
1195 expect(console.log).toBeCalledTimes(__DEV__ ? 2 : 1);
1196 // Note: we should display the first log because otherwise
@@ -1158,7 +1199,7 @@ describe('context legacy', () => {
1199 expect(console.log).toBeCalledWith('foo 1');
1200 });
1201
1161 - it('does not disable logs for class double shouldComponentUpdate', () => {
1202 + it('does not disable logs for class double shouldComponentUpdate', async () => {
1203 spyOnDevAndProd(console, 'log');
1204
1205 let count = 0;
@@ -1175,19 +1216,21 @@ describe('context legacy', () => {
1216 }
1217
1218 const container = document.createElement('div');
1178 - ReactDOM.render(
1179 - <React.StrictMode>
1180 - <Foo />
1181 - </React.StrictMode>,
1182 - container,
1183 - );
1184 - // Trigger sCU:
1185 - ReactDOM.render(
1186 - <React.StrictMode>
1187 - <Foo />
1188 - </React.StrictMode>,
1189 - container,
1190 - );
1219 + const root = ReactDOMClient.createRoot(container);
1220 + await act(() => {
1221 + root.render(
1222 + <React.StrictMode>
1223 + <Foo />
1224 + </React.StrictMode>,
1225 + );
1226 + });
1227 + await act(() => {
1228 + root.render(
1229 + <React.StrictMode>
1230 + <Foo />
1231 + </React.StrictMode>,
1232 + );
1233 + });
1234
1235 expect(count).toBe(__DEV__ ? 2 : 1);
1236 expect(console.log).toBeCalledTimes(__DEV__ ? 2 : 1);
@@ -1197,7 +1240,7 @@ describe('context legacy', () => {
1240 expect(console.log).toBeCalledWith('foo 1');
1241 });
1242
1200 - it('does not disable logs for class state updaters', () => {
1243 + it('does not disable logs for class state updaters', async () => {
1244 spyOnDevAndProd(console, 'log');
1245
1246 let inst;
@@ -1211,16 +1254,20 @@ describe('context legacy', () => {
1254 }
1255
1256 const container = document.createElement('div');
1214 - ReactDOM.render(
1215 - <React.StrictMode>
1216 - <Foo />
1217 - </React.StrictMode>,
1218 - container,
1219 - );
1220 - inst.setState(() => {
1221 - count++;
1222 - console.log('foo ' + count);
1223 - return {};
1257 + const root = ReactDOMClient.createRoot(container);
1258 + await act(() => {
1259 + root.render(
1260 + <React.StrictMode>
1261 + <Foo />
1262 + </React.StrictMode>,
1263 + );
1264 + });
1265 + await act(() => {
1266 + inst.setState(() => {
1267 + count++;
1268 + console.log('foo ' + count);
1269 + return {};
1270 + });
1271 });
1272
1273 expect(count).toBe(__DEV__ ? 2 : 1);
@@ -1231,7 +1278,7 @@ describe('context legacy', () => {
1278 expect(console.log).toBeCalledWith('foo 1');
1279 });
1280
1234 - it('does not disable logs for function double render', () => {
1281 + it('does not disable logs for function double render', async () => {
1282 spyOnDevAndProd(console, 'log');
1283
1284 let count = 0;
@@ -1242,13 +1289,14 @@ describe('context legacy', () => {
1289 }
1290
1291 const container = document.createElement('div');
1245 - ReactDOM.render(
1246 - <React.StrictMode>
1247 - <Foo />
1248 - </React.StrictMode>,
1249 - container,
1250 - );
1251 -
1292 + const root = ReactDOMClient.createRoot(container);
1293 + await act(() => {
1294 + root.render(
1295 + <React.StrictMode>
1296 + <Foo />
1297 + </React.StrictMode>,
1298 + );
1299 + });
1300 expect(count).toBe(__DEV__ ? 2 : 1);
1301 expect(console.log).toBeCalledTimes(__DEV__ ? 2 : 1);
1302 // Note: we should display the first log because otherwise
@@ -1257,7 +1305,7 @@ describe('context legacy', () => {
1305 expect(console.log).toBeCalledWith('foo 1');
1306 });
1307 } else {
1260 - it('disable logs for class double render', () => {
1308 + it('disable logs for class double render', async () => {
1309 spyOnDevAndProd(console, 'log');
1310
1311 let count = 0;
@@ -1270,13 +1318,14 @@ describe('context legacy', () => {
1318 }
1319
1320 const container = document.createElement('div');
1273 - ReactDOM.render(
1274 - <React.StrictMode>
1275 - <Foo />
1276 - </React.StrictMode>,
1277 - container,
1278 - );
1279 -
1321 + const root = ReactDOMClient.createRoot(container);
1322 + await act(() => {
1323 + root.render(
1324 + <React.StrictMode>
1325 + <Foo />
1326 + </React.StrictMode>,
1327 + );
1328 + });
1329 expect(count).toBe(__DEV__ ? 2 : 1);
1330 expect(console.log).toBeCalledTimes(1);
1331 // Note: we should display the first log because otherwise
@@ -1285,7 +1334,7 @@ describe('context legacy', () => {
1334 expect(console.log).toBeCalledWith('foo 1');
1335 });
1336
1288 - it('disables logs for class double ctor', () => {
1337 + it('disables logs for class double ctor', async () => {
1338 spyOnDevAndProd(console, 'log');
1339
1340 let count = 0;
@@ -1301,13 +1350,14 @@ describe('context legacy', () => {
1350 }
1351
1352 const container = document.createElement('div');
1304 - ReactDOM.render(
1305 - <React.StrictMode>
1306 - <Foo />
1307 - </React.StrictMode>,
1308 - container,
1309 - );
1310 -
1353 + const root = ReactDOMClient.createRoot(container);
1354 + await act(() => {
1355 + root.render(
1356 + <React.StrictMode>
1357 + <Foo />
1358 + </React.StrictMode>,
1359 + );
1360 + });
1361 expect(count).toBe(__DEV__ ? 2 : 1);
1362 expect(console.log).toBeCalledTimes(1);
1363 // Note: we should display the first log because otherwise
@@ -1316,7 +1366,7 @@ describe('context legacy', () => {
1366 expect(console.log).toBeCalledWith('foo 1');
1367 });
1368
1319 - it('disable logs for class double getDerivedStateFromProps', () => {
1369 + it('disable logs for class double getDerivedStateFromProps', async () => {
1370 spyOnDevAndProd(console, 'log');
1371
1372 let count = 0;
@@ -1333,13 +1383,14 @@ describe('context legacy', () => {
1383 }
1384
1385 const container = document.createElement('div');
1336 - ReactDOM.render(
1337 - <React.StrictMode>
1338 - <Foo />
1339 - </React.StrictMode>,
1340 - container,
1341 - );
1342 -
1386 + const root = ReactDOMClient.createRoot(container);
1387 + await act(() => {
1388 + root.render(
1389 + <React.StrictMode>
1390 + <Foo />
1391 + </React.StrictMode>,
1392 + );
1393 + });
1394 expect(count).toBe(__DEV__ ? 2 : 1);
1395 expect(console.log).toBeCalledTimes(1);
1396 // Note: we should display the first log because otherwise
@@ -1348,7 +1399,7 @@ describe('context legacy', () => {
1399 expect(console.log).toBeCalledWith('foo 1');
1400 });
1401
1351 - it('disable logs for class double shouldComponentUpdate', () => {
1402 + it('disable logs for class double shouldComponentUpdate', async () => {
1403 spyOnDevAndProd(console, 'log');
1404
1405 let count = 0;
@@ -1365,20 +1416,21 @@ describe('context legacy', () => {
1416 }
1417
1418 const container = document.createElement('div');
1368 - ReactDOM.render(
1369 - <React.StrictMode>
1370 - <Foo />
1371 - </React.StrictMode>,
1372 - container,
1373 - );
1374 - // Trigger sCU:
1375 - ReactDOM.render(
1376 - <React.StrictMode>
1377 - <Foo />
1378 - </React.StrictMode>,
1379 - container,
1380 - );
1381 -
1419 + const root = ReactDOMClient.createRoot(container);
1420 + await act(() => {
1421 + root.render(
1422 + <React.StrictMode>
1423 + <Foo />
1424 + </React.StrictMode>,
1425 + );
1426 + });
1427 + await act(() => {
1428 + root.render(
1429 + <React.StrictMode>
1430 + <Foo />
1431 + </React.StrictMode>,
1432 + );
1433 + });
1434 expect(count).toBe(__DEV__ ? 2 : 1);
1435 expect(console.log).toBeCalledTimes(1);
1436 // Note: we should display the first log because otherwise
@@ -1387,7 +1439,7 @@ describe('context legacy', () => {
1439 expect(console.log).toBeCalledWith('foo 1');
1440 });
1441
1390 - it('disable logs for class state updaters', () => {
1442 + it('disable logs for class state updaters', async () => {
1443 spyOnDevAndProd(console, 'log');
1444
1445 let inst;
@@ -1401,16 +1453,20 @@ describe('context legacy', () => {
1453 }
1454
1455 const container = document.createElement('div');
1404 - ReactDOM.render(
1405 - <React.StrictMode>
1406 - <Foo />
1407 - </React.StrictMode>,
1408 - container,
1409 - );
1410 - inst.setState(() => {
1411 - count++;
1412 - console.log('foo ' + count);
1413 - return {};
1456 + const root = ReactDOMClient.createRoot(container);
1457 + await act(() => {
1458 + root.render(
1459 + <React.StrictMode>
1460 + <Foo />
1461 + </React.StrictMode>,
1462 + );
1463 + });
1464 + await act(() => {
1465 + inst.setState(() => {
1466 + count++;
1467 + console.log('foo ' + count);
1468 + return {};
1469 + });
1470 });
1471
1472 expect(count).toBe(__DEV__ ? 2 : 1);
@@ -1421,7 +1477,7 @@ describe('context legacy', () => {
1477 expect(console.log).toBeCalledWith('foo 1');
1478 });
1479
1424 - it('disable logs for function double render', () => {
1480 + it('disable logs for function double render', async () => {
1481 spyOnDevAndProd(console, 'log');
1482
1483 let count = 0;
@@ -1432,13 +1488,14 @@ describe('context legacy', () => {
1488 }
1489
1490 const container = document.createElement('div');
1435 - ReactDOM.render(
1436 - <React.StrictMode>
1437 - <Foo />
1438 - </React.StrictMode>,
1439 - container,
1440 - );
1441 -
1491 + const root = ReactDOMClient.createRoot(container);
1492 + await act(() => {
1493 + root.render(
1494 + <React.StrictMode>
1495 + <Foo />
1496 + </React.StrictMode>,
1497 + );
1498 + });
1499 expect(count).toBe(__DEV__ ? 2 : 1);
1500 expect(console.log).toBeCalledTimes(1);
1501 // Note: we should display the first log because otherwise