00d42ac354 · samitouri/QOS-React-2

@@ -97,7 +97,7 @@ describe('DOMPluginEventSystem', () => {

97 endNativeEventListenerClearDown();

98 });

99

100 - it('does not pool events', () => {

100 + it('does not pool events', async () => {

101 const buttonRef = React.createRef();

102 const log = [];

103 const onClick = jest.fn(e => log.push(e));

@@ -106,7 +106,10 @@ describe('DOMPluginEventSystem', () => {

106 return <button ref={buttonRef} onClick={onClick} />;

107 }

108

109 - ReactDOM.render(<Test />, container);

109 + const root = ReactDOMClient.createRoot(container);

110 + await act(() => {

111 + root.render(<Test />);

112 + });

113

114 const buttonElement = buttonRef.current;

115 dispatchClickEvent(buttonElement);

@@ -118,7 +121,7 @@ describe('DOMPluginEventSystem', () => {

121 expect(log[1].type).toBe('click');

122 });

123

121 - it('handle propagation of click events', () => {

124 + it('handle propagation of click events', async () => {

125 const buttonRef = React.createRef();

126 const divRef = React.createRef();

127 const log = [];

@@ -143,7 +146,10 @@ describe('DOMPluginEventSystem', () => {

146 );

147 }

148

146 - ReactDOM.render(<Test />, container);

149 + const root = ReactDOMClient.createRoot(container);

150 + await act(() => {

151 + root.render(<Test />);

152 + });

153

154 const buttonElement = buttonRef.current;

155 dispatchClickEvent(buttonElement);

@@ -163,7 +169,7 @@ describe('DOMPluginEventSystem', () => {

169 expect(log[5]).toEqual(['bubble', buttonElement]);

170 });

171

166 - it('handle propagation of click events combined with sync clicks', () => {

172 + it('handle propagation of click events combined with sync clicks', async () => {

173 const buttonRef = React.createRef();

174 let clicks = 0;

175

@@ -188,7 +194,10 @@ describe('DOMPluginEventSystem', () => {

194 );

195 }

196

191 - ReactDOM.render(<Test />, container);

197 + const root = ReactDOMClient.createRoot(container);

198 + await act(() => {

199 + root.render(<Test />);

200 + });

201

202 const buttonElement = buttonRef.current;

203 dispatchClickEvent(buttonElement);

@@ -196,7 +205,7 @@ describe('DOMPluginEventSystem', () => {

205 expect(clicks).toBe(1);

206 });

207

199 - it('handle propagation of click events between roots', () => {

208 + it('handle propagation of click events between roots', async () => {

209 const buttonRef = React.createRef();

210 const divRef = React.createRef();

211 const childRef = React.createRef();

@@ -228,8 +237,14 @@ describe('DOMPluginEventSystem', () => {

237 );

238 }

239

231 - ReactDOM.render(<Parent />, container);

232 - ReactDOM.render(<Child />, childRef.current);

240 + const root = ReactDOMClient.createRoot(container);

241 + await act(() => {

242 + root.render(<Parent />);

243 + });

244 + const childRoot = ReactDOMClient.createRoot(childRef.current);

245 + await act(() => {

246 + childRoot.render(<Child />);

247 + });

248

249 const buttonElement = buttonRef.current;

250 dispatchClickEvent(buttonElement);

@@ -248,7 +263,7 @@ describe('DOMPluginEventSystem', () => {

263 expect(log[5]).toEqual(['bubble', buttonElement]);

264 });

265

251 - it('handle propagation of click events between disjointed roots', () => {

266 + it('handle propagation of click events between disjointed roots', async () => {

267 const buttonRef = React.createRef();

268 const divRef = React.createRef();

269 const log = [];

@@ -279,9 +294,16 @@ describe('DOMPluginEventSystem', () => {

294 }

295

296 const disjointedNode = document.createElement('div');

282 - ReactDOM.render(<Parent />, container);

297 + const root = ReactDOMClient.createRoot(container);

298 + await act(() => {

299 + root.render(<Parent />);

300 + });

301 +

302 buttonRef.current.appendChild(disjointedNode);

284 - ReactDOM.render(<Child />, disjointedNode);

303 + const disjointedNodeRoot = ReactDOMClient.createRoot(disjointedNode);

304 + await act(() => {

305 + disjointedNodeRoot.render(<Child />);

306 + });

307

308 const buttonElement = buttonRef.current;

309 dispatchClickEvent(buttonElement);

@@ -300,7 +322,7 @@ describe('DOMPluginEventSystem', () => {

322 expect(log[5]).toEqual(['bubble', buttonElement]);

323 });

324

303 - it('handle propagation of click events between disjointed roots #2', () => {

325 + it('handle propagation of click events between disjointed roots #2', async () => {

326 const buttonRef = React.createRef();

327 const button2Ref = React.createRef();

328 const divRef = React.createRef();

@@ -353,9 +375,18 @@ describe('DOMPluginEventSystem', () => {

375 const parentContainer = document.createElement('div');

376 const childContainer = document.createElement('div');

377

356 - ReactDOM.render(<GrandParent />, container);

357 - ReactDOM.render(<Parent />, parentContainer);

358 - ReactDOM.render(<Child />, childContainer);

378 + const root = ReactDOMClient.createRoot(container);

379 + await act(() => {

380 + root.render(<GrandParent />);

381 + });

382 + const parentRoot = ReactDOMClient.createRoot(parentContainer);

383 + await act(() => {

384 + parentRoot.render(<Parent />);

385 + });

386 + const childRoot = ReactDOMClient.createRoot(childContainer);

387 + await act(() => {

388 + childRoot.render(<Child />);

389 + });

390

391 parentContainer.appendChild(childContainer);

392 spanRef.current.appendChild(parentContainer);

@@ -389,7 +420,7 @@ describe('DOMPluginEventSystem', () => {

420 expect(log[9]).toEqual(['bubble', buttonElement]);

421 });

422

392 - it('handle propagation of click events between disjointed comment roots', () => {

423 + it('handle propagation of click events between disjointed legacy comment roots', () => {

424 const buttonRef = React.createRef();

425 const divRef = React.createRef();

426 const log = [];

@@ -444,7 +475,7 @@ describe('DOMPluginEventSystem', () => {

475 expect(log[5]).toEqual(['bubble', buttonElement]);

476 });

477

447 - it('handle propagation of click events between disjointed comment roots #2', () => {

478 + it('handle propagation of click events between disjointed legacy comment roots #2', () => {

479 const buttonRef = React.createRef();

480 const divRef = React.createRef();

481 const spanRef = React.createRef();

@@ -501,7 +532,7 @@ describe('DOMPluginEventSystem', () => {

532 expect(log[5]).toEqual(['bubble', buttonElement]);

533 });

534

504 - it('handle propagation of click events between portals', () => {

535 + it('handle propagation of click events between portals', async () => {

536 const buttonRef = React.createRef();

537 const divRef = React.createRef();

538 const log = [];

@@ -535,7 +566,10 @@ describe('DOMPluginEventSystem', () => {

566 );

567 }

568

538 - ReactDOM.render(<Parent />, container);

569 + const root = ReactDOMClient.createRoot(container);

570 + await act(() => {

571 + root.render(<Parent />);

572 + });

573

574 const buttonElement = buttonRef.current;

575 dispatchClickEvent(buttonElement);

@@ -556,7 +590,7 @@ describe('DOMPluginEventSystem', () => {

590 document.body.removeChild(portalElement);

591 });

592

559 - it('handle click events on document.body portals', () => {

593 + it('handle click events on document.body portals', async () => {

594 const log = [];

595

596 function Child({label}) {

@@ -578,7 +612,11 @@ describe('DOMPluginEventSystem', () => {

612 );

613 }

614

581 - ReactDOM.render(<Parent />, container);

615 + const root = ReactDOMClient.createRoot(container);

616 + await act(() => {

617 + root.render(<Parent />);

618 + });

619 +

620 const second = document.body.lastChild;

621 expect(second.textContent).toEqual('second');

622 dispatchClickEvent(second);

@@ -693,8 +731,9 @@ describe('DOMPluginEventSystem', () => {

731 );

732 }

733

734 + const root = ReactDOMClient.createRoot(container);

735 await act(() => {

697 - ReactDOM.render(<Parent />, container);

736 + root.render(<Parent />);

737 });

738

739 const parent = container.lastChild;

@@ -742,8 +781,9 @@ describe('DOMPluginEventSystem', () => {

781 );

782 }

783

784 + const root = ReactDOMClient.createRoot(container);

785 await act(() => {

746 - ReactDOM.render(<Parent />, container);

786 + root.render(<Parent />);

787 });

788

789 const parent = container.lastChild;

@@ -766,7 +806,7 @@ describe('DOMPluginEventSystem', () => {

806 expect(log).toEqual(['parent', 'child', 'parent']);

807 });

808

769 - it('native stopPropagation on click events between portals', () => {

809 + it('native stopPropagation on click events between portals', async () => {

810 const buttonRef = React.createRef();

811 const divRef = React.createRef();

812 const middleDivRef = React.createRef();

@@ -811,7 +851,10 @@ describe('DOMPluginEventSystem', () => {

851 );

852 }

853

814 - ReactDOM.render(<Parent />, container);

854 + const root = ReactDOMClient.createRoot(container);

855 + await act(() => {

856 + root.render(<Parent />);

857 + });

858

859 const buttonElement = buttonRef.current;

860 dispatchClickEvent(buttonElement);

@@ -828,7 +871,7 @@ describe('DOMPluginEventSystem', () => {

871 document.body.removeChild(portalElement);

872 });

873

831 - it('handle propagation of focus events', () => {

874 + it('handle propagation of focus events', async () => {

875 const buttonRef = React.createRef();

876 const divRef = React.createRef();

877 const log = [];

@@ -854,7 +897,10 @@ describe('DOMPluginEventSystem', () => {

897 );

898 }

899

857 - ReactDOM.render(<Test />, container);

900 + const root = ReactDOMClient.createRoot(container);

901 + await act(() => {

902 + root.render(<Test />);

903 + });

904

905 const buttonElement = buttonRef.current;

906 buttonElement.focus();

@@ -873,7 +919,7 @@ describe('DOMPluginEventSystem', () => {

919 expect(log[5]).toEqual(['bubble', buttonElement]);

920 });

921

876 - it('handle propagation of focus events between roots', () => {

922 + it('handle propagation of focus events between roots', async () => {

923 const buttonRef = React.createRef();

924 const divRef = React.createRef();

925 const childRef = React.createRef();

@@ -906,8 +952,14 @@ describe('DOMPluginEventSystem', () => {

952 );

953 }

954

909 - ReactDOM.render(<Parent />, container);

910 - ReactDOM.render(<Child />, childRef.current);

955 + const root = ReactDOMClient.createRoot(container);

956 + await act(() => {

957 + root.render(<Parent />);

958 + });

959 + const childRoot = ReactDOMClient.createRoot(childRef.current);

960 + await act(() => {

961 + childRoot.render(<Child />);

962 + });

963

964 const buttonElement = buttonRef.current;

965 buttonElement.focus();

@@ -926,7 +978,7 @@ describe('DOMPluginEventSystem', () => {

978 expect(log[5]).toEqual(['bubble', buttonElement]);

979 });

980

929 - it('handle propagation of focus events between portals', () => {

981 + it('handle propagation of focus events between portals', async () => {

982 const buttonRef = React.createRef();

983 const divRef = React.createRef();

984 const log = [];

@@ -961,7 +1013,10 @@ describe('DOMPluginEventSystem', () => {

1013 );

1014 }

1015

964 - ReactDOM.render(<Parent />, container);

1016 + const root = ReactDOMClient.createRoot(container);

1017 + await act(() => {

1018 + root.render(<Parent />);

1019 + });

1020

1021 const buttonElement = buttonRef.current;

1022 buttonElement.focus();

@@ -982,7 +1037,7 @@ describe('DOMPluginEventSystem', () => {

1037 document.body.removeChild(portalElement);

1038 });

1039

985 - it('native stopPropagation on focus events between portals', () => {

1040 + it('native stopPropagation on focus events between portals', async () => {

1041 const buttonRef = React.createRef();

1042 const divRef = React.createRef();

1043 const middleDivRef = React.createRef();

@@ -1028,7 +1083,10 @@ describe('DOMPluginEventSystem', () => {

1083 );

1084 }

1085

1031 - ReactDOM.render(<Parent />, container);

1086 + const root = ReactDOMClient.createRoot(container);

1087 + await act(() => {

1088 + root.render(<Parent />);

1089 + });

1090

1091 const buttonElement = buttonRef.current;

1092 buttonElement.focus();

@@ -1045,7 +1103,7 @@ describe('DOMPluginEventSystem', () => {

1103 document.body.removeChild(portalElement);

1104 });

1105

1048 - it('handle propagation of enter and leave events between portals', () => {

1106 + it('handle propagation of enter and leave events between portals', async () => {

1107 const buttonRef = React.createRef();

1108 const divRef = React.createRef();

1109 const log = [];

@@ -1076,7 +1134,10 @@ describe('DOMPluginEventSystem', () => {

1134 );

1135 }

1136

1079 - ReactDOM.render(<Parent />, container);

1137 + const root = ReactDOMClient.createRoot(container);

1138 + await act(() => {

1139 + root.render(<Parent />);

1140 + });

1141

1142 const buttonElement = buttonRef.current;

1143 buttonElement.dispatchEvent(

@@ -1112,7 +1173,7 @@ describe('DOMPluginEventSystem', () => {

1173 document.body.removeChild(portalElement);

1174 });

1175

1115 - it('handle propagation of enter and leave events between portals #2', () => {

1176 + it('handle propagation of enter and leave events between portals #2', async () => {

1177 const buttonRef = React.createRef();

1178 const divRef = React.createRef();

1179 const portalRef = React.createRef();

@@ -1147,7 +1208,10 @@ describe('DOMPluginEventSystem', () => {

1208 );

1209 }

1210

1150 - ReactDOM.render(<Parent />, container);

1211 + const root = ReactDOMClient.createRoot(container);

1212 + await act(() => {

1213 + root.render(<Parent />);

1214 + });

1215

1216 const buttonElement = buttonRef.current;

1217 buttonElement.dispatchEvent(

@@ -1181,7 +1245,7 @@ describe('DOMPluginEventSystem', () => {

1245 expect(log[1]).toEqual(divElement);

1246 });

1247

1184 - it('should preserve bubble/capture order between roots and nested portals', () => {

1248 + it('should preserve bubble/capture order between roots and nested portals', async () => {

1249 const targetRef = React.createRef();

1250 let log = [];

1251 const onClickRoot = jest.fn(e => log.push('bubble root'));

@@ -1226,7 +1290,10 @@ describe('DOMPluginEventSystem', () => {

1290 );

1291 }

1292

1229 - ReactDOM.render(<Root />, container);

1293 + const root = ReactDOMClient.createRoot(container);

1294 + await act(() => {

1295 + root.render(<Root />);

1296 + });

1297

1298 const divElement = targetRef.current;

1299 dispatchClickEvent(divElement);

@@ -1315,7 +1382,7 @@ describe('DOMPluginEventSystem', () => {

1382 expect(output).toBe(`<div><span>Hello world</span></div>`);

1383 container.innerHTML = output;

1384 await act(() => {

1318 - ReactDOM.hydrate(<Test />, container);

1385 + ReactDOMClient.hydrateRoot(container, <Test />);

1386 });

1387 dispatchClickEvent(spanRef.current);

1388 expect(clickEvent).toHaveBeenCalledTimes(1);

@@ -1348,8 +1415,9 @@ describe('DOMPluginEventSystem', () => {

1415 );

1416 }

1417

1418 + const root = ReactDOMClient.createRoot(container);

1419 await act(() => {

1352 - ReactDOM.render(<Test />, container);

1420 + root.render(<Test />);

1421 });

1422

1423 expect(container.innerHTML).toBe(

@@ -1371,7 +1439,7 @@ describe('DOMPluginEventSystem', () => {

1439

1440 // Unmounting the container and clicking should not work

1441 await act(() => {

1374 - ReactDOM.render(null, container);

1442 + root.render(null);

1443 });

1444

1445 dispatchClickEvent(divElement);

@@ -1379,7 +1447,7 @@ describe('DOMPluginEventSystem', () => {

1447

1448 // Re-rendering the container and clicking should work

1449 await act(() => {

1382 - ReactDOM.render(<Test />, container);

1450 + root.render(<Test />);

1451 });

1452

1453 divElement = divRef.current;

@@ -1416,7 +1484,7 @@ describe('DOMPluginEventSystem', () => {

1484

1485 let clickEvent2 = jest.fn();

1486 await act(() => {

1419 - ReactDOM.render(<Test2 clickEvent2={clickEvent2} />, container);

1487 + root.render(<Test2 clickEvent2={clickEvent2} />);

1488 });

1489

1490 divElement = divRef.current;

@@ -1426,7 +1494,7 @@ describe('DOMPluginEventSystem', () => {

1494 // Reset the function we pass in, so it's different

1495 clickEvent2 = jest.fn();

1496 await act(() => {

1429 - ReactDOM.render(<Test2 clickEvent2={clickEvent2} />, container);

1497 + root.render(<Test2 clickEvent2={clickEvent2} />);

1498 });

1499

1500 divElement = divRef.current;

@@ -1457,8 +1525,10 @@ describe('DOMPluginEventSystem', () => {

1525 );

1526 }

1527

1528 + const root = ReactDOMClient.createRoot(container);

1529 +

1530 await act(() => {

1461 - ReactDOM.render(<Test off={false} />, container);

1531 + root.render(<Test off={false} />);

1532 });

1533

1534 let divElement = divRef.current;

@@ -1467,7 +1537,7 @@ describe('DOMPluginEventSystem', () => {

1537

1538 // The listener should get unmounted

1539 await act(() => {

1470 - ReactDOM.render(<Test off={true} />, container);

1540 + root.render(<Test off={true} />);

1541 });

1542

1543 clickEvent.mockClear();

@@ -1491,8 +1561,9 @@ describe('DOMPluginEventSystem', () => {

1561 return <button ref={buttonRef}>Click me!</button>;

1562 }

1563

1564 + const root = ReactDOMClient.createRoot(container);

1565 await act(() => {

1495 - ReactDOM.render(<Test />, container);

1566 + root.render(<Test />);

1567 });

1568

1569 const textNode = buttonRef.current.firstChild;

@@ -1545,8 +1616,9 @@ describe('DOMPluginEventSystem', () => {

1616 );

1617 }

1618

1619 + const root = ReactDOMClient.createRoot(container);

1620 await act(() => {

1549 - ReactDOM.render(<Test />, container);

1621 + root.render(<Test />);

1622 });

1623

1624 const buttonElement = buttonRef.current;

@@ -1610,8 +1682,9 @@ describe('DOMPluginEventSystem', () => {

1682 );

1683 }

1684

1685 + const root = ReactDOMClient.createRoot(container);

1686 await act(() => {

1614 - ReactDOM.render(<Test />, container);

1687 + root.render(<Test />);

1688 });

1689

1690 const buttonElement = buttonRef.current;

@@ -1658,8 +1731,9 @@ describe('DOMPluginEventSystem', () => {

1731 );

1732 }

1733

1734 + const root = ReactDOMClient.createRoot(container);

1735 await act(() => {

1662 - ReactDOM.render(<Test />, container);

1736 + root.render(<Test />);

1737 });

1738

1739 expect(container.innerHTML).toBe(

@@ -1679,13 +1753,16 @@ describe('DOMPluginEventSystem', () => {

1753 ]);

1754

1755 // Unmounting the container and clicking should not work

1682 - ReactDOM.render(null, container);

1756 + await act(() => {

1757 + root.render(null);

1758 + });

1759 +

1760 dispatchClickEvent(divElement);

1761 expect(clickEvent).toBeCalledTimes(1);

1762

1763 // Re-rendering the container and clicking should work

1764 await act(() => {

1688 - ReactDOM.render(<Test />, container);

1765 + root.render(<Test />);

1766 });

1767

1768 divElement = divRef.current;

@@ -1744,8 +1821,9 @@ describe('DOMPluginEventSystem', () => {

1821 return <button ref={buttonRef}>Click me!</button>;

1822 }

1823

1824 + const root = ReactDOMClient.createRoot(container);

1825 await act(() => {

1748 - ReactDOM.render(<Test />, container);

1826 + root.render(<Test />);

1827 });

1828

1829 let buttonElement = buttonRef.current;

@@ -1792,7 +1870,7 @@ describe('DOMPluginEventSystem', () => {

1870 }

1871

1872 await act(() => {

1795 - ReactDOM.render(<Test2 />, container);

1873 + root.render(<Test2 />);

1874 });

1875

1876 buttonElement = buttonRef.current;

@@ -1833,8 +1911,9 @@ describe('DOMPluginEventSystem', () => {

1911 );

1912 }

1913

1914 + const root = ReactDOMClient.createRoot(container);

1915 await act(() => {

1837 - ReactDOM.render(<Test />, container);

1916 + root.render(<Test />);

1917 });

1918

1919 const divElement = divRef.current;

@@ -1884,8 +1963,9 @@ describe('DOMPluginEventSystem', () => {

1963 return <button ref={buttonRef}>Click me!</button>;

1964 }

1965

1966 + const root = ReactDOMClient.createRoot(container);

1967 await act(() => {

1888 - ReactDOM.render(<Test />, container);

1968 + root.render(<Test />);

1969 });

1970

1971 const buttonElement = buttonRef.current;

@@ -1942,8 +2022,9 @@ describe('DOMPluginEventSystem', () => {

2022 return <button ref={buttonRef}>Click me!</button>;

2023 }

2024

2025 + const root = ReactDOMClient.createRoot(container);

2026 await act(() => {

1946 - ReactDOM.render(<Test />, container);

2027 + root.render(<Test />);

2028 });

2029

2030 const buttonElement = buttonRef.current;

@@ -2023,8 +2104,9 @@ describe('DOMPluginEventSystem', () => {

2104

2105 return <button>Click anything!</button>;

2106 }

2107 + const root = ReactDOMClient.createRoot(container);

2108 await act(() => {

2027 - ReactDOM.render(<Test />, container);

2109 + root.render(<Test />);

2110 });

2111

2112 expect(container.innerHTML).toBe(

@@ -2041,8 +2123,9 @@ describe('DOMPluginEventSystem', () => {

2123 });

2124

2125 // Unmounting the container and clicking should not work

2126 +

2127 await act(() => {

2045 - ReactDOM.render(null, container);

2128 + root.render(null);

2129 });

2130

2131 dispatchClickEvent(document.body);

@@ -2050,7 +2133,7 @@ describe('DOMPluginEventSystem', () => {

2133

2134 // Re-rendering and clicking the body should work again

2135 await act(() => {

2053 - ReactDOM.render(<Test />, container);

2136 + root.render(<Test />);

2137 });

2138

2139 dispatchClickEvent(document.body);

@@ -2109,8 +2192,9 @@ describe('DOMPluginEventSystem', () => {

2192 );

2193 }

2194

2195 + const root = ReactDOMClient.createRoot(container);

2196 await act(() => {

2113 - ReactDOM.render(<Test />, container);

2197 + root.render(<Test />);

2198 });

2199

2200 const buttonElement = buttonRef.current;

@@ -2178,8 +2262,9 @@ describe('DOMPluginEventSystem', () => {

2262 return <button ref={buttonRef}>Click me!</button>;

2263 }

2264

2265 + const root = ReactDOMClient.createRoot(container);

2266 await act(() => {

2182 - ReactDOM.render(<Test />, container);

2267 + root.render(<Test />);

2268 });

2269

2270 const buttonElement = buttonRef.current;

@@ -2224,8 +2309,9 @@ describe('DOMPluginEventSystem', () => {

2309 return <button ref={buttonRef}>Click me!</button>;

2310 }

2311

2312 + const root = ReactDOMClient.createRoot(container);

2313 await act(() => {

2228 - ReactDOM.render(<Test />, container);

2314 + root.render(<Test />);

2315 });

2316

2317 const buttonElement = buttonRef.current;

@@ -2295,8 +2381,9 @@ describe('DOMPluginEventSystem', () => {

2381 );

2382 }

2383

2384 + const root = ReactDOMClient.createRoot(container);

2385 await act(() => {

2299 - ReactDOM.render(<Test />, container);

2386 + root.render(<Test />);

2387 });

2388

2389 const buttonElement = buttonRef.current;

@@ -2399,8 +2486,9 @@ describe('DOMPluginEventSystem', () => {

2486 );

2487 };

2488

2489 + const root = ReactDOMClient.createRoot(container);

2490 await act(() => {

2403 - ReactDOM.render(<Component show={true} />, container);

2491 + root.render(<Component show={true} />);

2492 });

2493

2494 const inner = innerRef.current;

@@ -2410,7 +2498,7 @@ describe('DOMPluginEventSystem', () => {

2498 expect(onAfterBlur).toHaveBeenCalledTimes(0);

2499

2500 await act(() => {

2413 - ReactDOM.render(<Component show={false} />, container);

2501 + root.render(<Component show={false} />);

2502 });

2503

2504 expect(onBeforeBlur).toHaveBeenCalledTimes(1);

@@ -2462,8 +2550,9 @@ describe('DOMPluginEventSystem', () => {

2550 );

2551 };

2552

2553 + const root = ReactDOMClient.createRoot(container);

2554 await act(() => {

2466 - ReactDOM.render(<Component show={true} />, container);

2555 + root.render(<Component show={true} />);

2556 });

2557

2558 const inner = innerRef.current;

@@ -2473,7 +2562,7 @@ describe('DOMPluginEventSystem', () => {

2562 expect(onAfterBlur).toHaveBeenCalledTimes(0);

2563

2564 await act(() => {

2476 - ReactDOM.render(<Component show={false} />, container);

2565 + root.render(<Component show={false} />);

2566 });

2567

2568 expect(onBeforeBlur).toHaveBeenCalledTimes(1);

@@ -2523,8 +2612,9 @@ describe('DOMPluginEventSystem', () => {

2612 );

2613 };

2614

2615 + const root = ReactDOMClient.createRoot(container);

2616 await act(() => {

2527 - ReactDOM.render(<Component show={true} />, container);

2617 + root.render(<Component show={true} />);

2618 });

2619

2620 const inner = innerRef.current;

@@ -2533,7 +2623,7 @@ describe('DOMPluginEventSystem', () => {

2623 expect(onBeforeBlur).toHaveBeenCalledTimes(0);

2624

2625 await act(() => {

2536 - ReactDOM.render(<Component show={false} />, container);

2626 + root.render(<Component show={false} />);

2627 });

2628

2629 expect(onBeforeBlur).toHaveBeenCalledTimes(1);

@@ -2765,7 +2855,7 @@ describe('DOMPluginEventSystem', () => {

2855 });

2856

2857 // @gate www

2768 - it('handle propagation of click events between disjointed comment roots', async () => {

2858 + it('handle propagation of click events between disjointed legacy comment roots', async () => {

2859 const buttonRef = React.createRef();

2860 const divRef = React.createRef();

2861 const log = [];

@@ -2881,8 +2971,9 @@ describe('DOMPluginEventSystem', () => {

2971 );

2972 }

2973

2974 + const root = ReactDOMClient.createRoot(container);

2975 await act(() => {

2885 - ReactDOM.render(<Parent />, container);

2976 + root.render(<Parent />);

2977 });

2978

2979 const divElement = divRef.current;

@@ -2953,8 +3044,9 @@ describe('DOMPluginEventSystem', () => {

3044 );

3045 }

3046

3047 + const root = ReactDOMClient.createRoot(container);

3048 await act(() => {

2957 - ReactDOM.render(<Test />, container);

3049 + root.render(<Test />);

3050 });

3051

3052 const buttonElement = buttonRef.current;

@@ -3025,8 +3117,9 @@ describe('DOMPluginEventSystem', () => {

3117 );

3118 }

3119

3120 + const root = ReactDOMClient.createRoot(container);

3121 await act(() => {

3029 - ReactDOM.render(<Test />, container);

3122 + root.render(<Test />);

3123 });

3124

3125 const buttonElement = buttonRef.current;

@@ -3081,8 +3174,9 @@ describe('DOMPluginEventSystem', () => {

3174 );

3175 }

3176

3177 + const root = ReactDOMClient.createRoot(container);

3178 await act(() => {

3085 - ReactDOM.render(<Test />, container);

3179 + root.render(<Test />);

3180 });

3181

3182 const textNode = buttonRef.current.firstChild;

@@ -3124,8 +3218,9 @@ describe('DOMPluginEventSystem', () => {

3218 );

3219 }

3220

3221 + const root = ReactDOMClient.createRoot(container);

3222 await act(() => {

3128 - ReactDOM.render(<Test />, container);

3223 + root.render(<Test />);

3224 });

3225

3226 const buttonElement = buttonRef.current;

@@ -3167,8 +3262,9 @@ describe('DOMPluginEventSystem', () => {

3262 );

3263 }

3264

3265 + const root = ReactDOMClient.createRoot(container);

3266 await act(() => {

3171 - ReactDOM.render(<Test />, container);

3267 + root.render(<Test />);

3268 });

3269

3270 const buttonElement = buttonRef.current;

@@ -3209,8 +3305,9 @@ describe('DOMPluginEventSystem', () => {

3305 );

3306 }

3307

3308 + const root = ReactDOMClient.createRoot(container);

3309 await act(() => {

3213 - ReactDOM.render(<Test />, container);

3310 + root.render(<Test />);

3311 });

3312

3313 const buttonElement = buttonRef.current;

@@ -3262,8 +3359,9 @@ describe('DOMPluginEventSystem', () => {

3359 return <div ref={ref}>test</div>;

3360 }

3361

3362 + const root = ReactDOMClient.createRoot(rootContainer);

3363 await act(() => {

3266 - ReactDOM.render(<Component />, rootContainer);

3364 + root.render(<Component />);

3365 });

3366

3367 dispatchEvent(ref.current, 'touchstart');

Convert DOMPluginEventSystem to createRoot (#28139)