@samitouri / QOS-React-2 / commits / 73ffce1b6f

DevTools: Update tests to fix warnings/errors (#21748)

Some new ones had slipped in (e.g. deprecated ReactDOM.render message from 18)

Brian Vaughn committed Jun 24, 2021 at 22:42 UTC 73ffce1b6fb7eff13414e35e40efe4269664e5ea

19 files changed +391 -363

packages/react-devtools-shared/src/__tests__/FastRefreshDevToolsIntegration-test.js

+4 -5

@@ -9,13 +9,13 @@

10 describe('Fast Refresh', () => {

11 let React;

12 - let ReactDOM;

12 let ReactFreshRuntime;

13 let act;

14 let babel;

15 let container;

16 let exportsObj;

17 let freshPlugin;

18 + let legacyRender;

19 let store;

20 let withErrorsOrWarningsIgnored;

@@ -37,10 +37,9 @@ describe('Fast Refresh', () => {

37 ReactFreshRuntime = require('react-refresh/runtime');

38 ReactFreshRuntime.injectIntoGlobalHook(global);

40 - ReactDOM = require('react-dom');

41 -

40 const utils = require('./utils');

41 act = utils.act;

42 + legacyRender = utils.legacyRender;

43 withErrorsOrWarningsIgnored = utils.withErrorsOrWarningsIgnored;

44 });

@@ -74,7 +73,7 @@ describe('Fast Refresh', () => {

73 function render(source) {

74 const Component = execute(source);

75 act(() => {

77 - ReactDOM.render(<Component />, container);

76 + legacyRender(<Component />, container);

77 });

78 // Module initialization shouldn't be counted as a hot update.

79 expect(ReactFreshRuntime.performReactRefresh()).toBe(null);

@@ -99,7 +98,7 @@ describe('Fast Refresh', () => {

98 // Here, we'll just force a re-render using the newer type to emulate this.

99 const NextComponent = nextExports.default;

100 act(() => {

102 - ReactDOM.render(<NextComponent />, container);

101 + legacyRender(<NextComponent />, container);

102 });

103 }

104 act(() => {

packages/react-devtools-shared/src/__tests__/componentStacks-test.js

+4 -4

@@ -25,8 +25,8 @@ function normalizeCodeLocInfo(str) {

26 describe('component stack', () => {

27 let React;

28 - let ReactDOM;

28 let act;

29 + let legacyRender;

30 let mockError;

31 let mockWarn;

@@ -44,9 +44,9 @@ describe('component stack', () => {

45 const utils = require('./utils');

46 act = utils.act;

47 + legacyRender = utils.legacyRender;

49 React = require('react');

49 - ReactDOM = require('react-dom');

50 });

52 it('should log the current component stack along with an error or warning', () => {

@@ -60,7 +60,7 @@ describe('component stack', () => {

61 const container = document.createElement('div');

63 - act(() => ReactDOM.render(<Grandparent />, container));

63 + act(() => legacyRender(<Grandparent />, container));

65 expect(mockError).toHaveBeenCalledWith(

66 'Test error.',

@@ -93,7 +93,7 @@ describe('component stack', () => {

93 };

95 const container = document.createElement('div');

96 - act(() => ReactDOM.render(<Example test="abc" />, container));

96 + act(() => legacyRender(<Example test="abc" />, container));

98 expect(useEffectCount).toBe(1);

packages/react-devtools-shared/src/__tests__/console-test.js

+12 -12

@@ -9,9 +9,9 @@

10 describe('console', () => {

11 let React;

12 - let ReactDOM;

12 let act;

13 let fakeConsole;

14 + let legacyRender;

15 let mockError;

16 let mockInfo;

17 let mockLog;

@@ -58,10 +58,10 @@ describe('console', () => {

58 };

60 React = require('react');

61 - ReactDOM = require('react-dom');

62 const utils = require('./utils');

63 act = utils.act;

64 + legacyRender = utils.legacyRender;

65 });

67 function normalizeCodeLocInfo(str) {

@@ -176,7 +176,7 @@ describe('console', () => {

176 return null;

177 };

178

179 - act(() => ReactDOM.render(<Child />, document.createElement('div')));

179 + act(() => legacyRender(<Child />, document.createElement('div')));

180

181 expect(mockWarn).toHaveBeenCalledTimes(1);

182 expect(mockWarn.mock.calls[0]).toHaveLength(1);

@@ -203,7 +203,7 @@ describe('console', () => {

203 return null;

204 };

205

206 - act(() => ReactDOM.render(<Parent />, document.createElement('div')));

206 + act(() => legacyRender(<Parent />, document.createElement('div')));

207

208 expect(mockLog).toHaveBeenCalledTimes(1);

209 expect(mockLog.mock.calls[0]).toHaveLength(1);

@@ -243,7 +243,7 @@ describe('console', () => {

243 return null;

244 };

245

246 - act(() => ReactDOM.render(<Parent />, document.createElement('div')));

246 + act(() => legacyRender(<Parent />, document.createElement('div')));

247

248 expect(mockLog).toHaveBeenCalledTimes(2);

249 expect(mockLog.mock.calls[0]).toHaveLength(1);

@@ -298,8 +298,8 @@ describe('console', () => {

298 }

299

300 const container = document.createElement('div');

301 - act(() => ReactDOM.render(<Parent />, container));

302 - act(() => ReactDOM.render(<Parent />, container));

301 + act(() => legacyRender(<Parent />, container));

302 + act(() => legacyRender(<Parent />, container));

303

304 expect(mockLog).toHaveBeenCalledTimes(2);

305 expect(mockLog.mock.calls[0]).toHaveLength(1);

@@ -350,7 +350,7 @@ describe('console', () => {

350 }

351 }

352

353 - act(() => ReactDOM.render(<Parent />, document.createElement('div')));

353 + act(() => legacyRender(<Parent />, document.createElement('div')));

354

355 expect(mockLog).toHaveBeenCalledTimes(1);

356 expect(mockLog.mock.calls[0]).toHaveLength(1);

@@ -377,7 +377,7 @@ describe('console', () => {

377 };

378

379 unpatchConsole();

380 - act(() => ReactDOM.render(<Child />, document.createElement('div')));

380 + act(() => legacyRender(<Child />, document.createElement('div')));

381

382 expect(mockWarn).toHaveBeenCalledTimes(1);

383 expect(mockWarn.mock.calls[0]).toHaveLength(1);

@@ -391,7 +391,7 @@ describe('console', () => {

391 breakOnWarn: false,

392 showInlineWarningsAndErrors: false,

393 });

394 - act(() => ReactDOM.render(<Child />, document.createElement('div')));

394 + act(() => legacyRender(<Child />, document.createElement('div')));

395

396 expect(mockWarn).toHaveBeenCalledTimes(2);

397 expect(mockWarn.mock.calls[1]).toHaveLength(2);

@@ -435,7 +435,7 @@ describe('console', () => {

435 return null;

436 };

437

438 - act(() => ReactDOM.render(<Parent />, document.createElement('div')));

438 + act(() => legacyRender(<Parent />, document.createElement('div')));

439

440 expect(mockLog).toHaveBeenCalledTimes(1);

441 expect(mockLog.mock.calls[0]).toHaveLength(1);

@@ -460,7 +460,7 @@ describe('console', () => {

460 return null;

461 };

462

463 - act(() => ReactDOM.render(<Component />, document.createElement('div')));

463 + act(() => legacyRender(<Component />, document.createElement('div')));

464

465 expect(mockWarn).toHaveBeenCalledTimes(1);

466 expect(mockWarn.mock.calls[0][0]).toBe('Symbol:');

packages/react-devtools-shared/src/__tests__/editing-test.js

+7 -6

@@ -13,8 +13,8 @@ import type Store from 'react-devtools-shared/src/devtools/store';

13 describe('editing interface', () => {

14 let PropTypes;

15 let React;

16 - let ReactDOM;

16 let bridge: FrontendBridge;

17 + let legacyRender;

18 let store: Store;

19 let utils;

@@ -25,6 +25,8 @@ describe('editing interface', () => {

25 beforeEach(() => {

26 utils = require('./utils');

28 + legacyRender = utils.legacyRender;

29 +

30 bridge = global.bridge;

31 store = global.store;

32 store.collapseNodesByDefault = false;

@@ -32,7 +34,6 @@ describe('editing interface', () => {

35 PropTypes = require('prop-types');

36 React = require('react');

35 - ReactDOM = require('react-dom');

37 });

39 describe('props', () => {

@@ -67,7 +68,7 @@ describe('editing interface', () => {

69 const container = document.createElement('div');

70 await utils.actAsync(() =>

70 - ReactDOM.render(

71 + legacyRender(

72 <>

73 <ClassComponent

74 array={[1, 2, 3]}

@@ -435,7 +436,7 @@ describe('editing interface', () => {

436

437 const container = document.createElement('div');

438 await utils.actAsync(() =>

438 - ReactDOM.render(

439 + legacyRender(

440 <ClassComponent object={{nested: 'initial'}} shallow="initial" />,

441 container,

442 ),

@@ -652,7 +653,7 @@ describe('editing interface', () => {

653

654 const container = document.createElement('div');

655 await utils.actAsync(() =>

655 - ReactDOM.render(<FunctionComponent />, container),

656 + legacyRender(<FunctionComponent />, container),

657 );

658

659 hookID = 0; // index

@@ -902,7 +903,7 @@ describe('editing interface', () => {

903

904 const container = document.createElement('div');

905 await utils.actAsync(() =>

905 - ReactDOM.render(

906 + legacyRender(

907 <LegacyContextProvider>

908 <ClassComponent />

909 </LegacyContextProvider>,

packages/react-devtools-shared/src/__tests__/inspectedElement-test.js

+47 -42

@@ -31,12 +31,15 @@ describe('InspectedElement', () => {

31 let TestUtilsAct;

32 let TestRendererAct;

34 + let legacyRender;

35 let testRendererInstance;

37 beforeEach(() => {

38 utils = require('./utils');

39 utils.beforeEachProfiling();

41 + legacyRender = utils.legacyRender;

42 +

43 bridge = global.bridge;

44 store = global.store;

45 store.collapseNodesByDefault = false;

@@ -139,7 +142,7 @@ describe('InspectedElement', () => {

142

143 const container = document.createElement('div');

144 await utils.actAsync(() =>

142 - ReactDOM.render(<Example a={1} b="abc" />, container),

145 + legacyRender(<Example a={1} b="abc" />, container),

146 );

147

148 const inspectedElement = await inspectElementAtIndex(0);

@@ -209,7 +212,7 @@ describe('InspectedElement', () => {

212

213 const container = document.createElement('div');

214 await utils.actAsync(() =>

212 - ReactDOM.render(

215 + legacyRender(

216 <React.Fragment>

217 <LegacyContextProvider>

218 <LegacyContextConsumer />

@@ -270,7 +273,7 @@ describe('InspectedElement', () => {

273

274 const container = document.createElement('div');

275 await utils.actAsync(

273 - () => ReactDOM.render(<Example a={1} b="abc" />, container),

276 + () => legacyRender(<Example a={1} b="abc" />, container),

277 false,

278 );

279

@@ -283,7 +286,7 @@ describe('InspectedElement', () => {

286 `);

287

288 await utils.actAsync(

286 - () => ReactDOM.render(<Example a={2} b="def" />, container),

289 + () => legacyRender(<Example a={2} b="def" />, container),

290 false,

291 );

292

@@ -319,7 +322,7 @@ describe('InspectedElement', () => {

322

323 const container = document.createElement('div');

324 await utils.actAsync(() =>

322 - ReactDOM.render(

325 + legacyRender(

326 <Wrapper>

327 <Target a={1} b="abc" />

328 </Wrapper>,

@@ -349,7 +352,7 @@ describe('InspectedElement', () => {

352

353 await utils.actAsync(

354 () =>

352 - ReactDOM.render(

355 + legacyRender(

356 <Wrapper>

357 <Target a={2} b="def" />

358 </Wrapper>,

@@ -416,7 +419,7 @@ describe('InspectedElement', () => {

419

420 const container = document.createElement('div');

421 await utils.actAsync(() =>

419 - ReactDOM.render(

422 + legacyRender(

423 <Example

424 boolean_false={false}

425 boolean_true={true}

@@ -505,7 +508,7 @@ describe('InspectedElement', () => {

508

509 const container = document.createElement('div');

510 await utils.actAsync(() =>

508 - ReactDOM.render(

511 + legacyRender(

512 <Example

513 anonymous_fn={instance.anonymousFunction}

514 array_buffer={arrayBuffer}

@@ -669,7 +672,7 @@ describe('InspectedElement', () => {

672

673 const iterable = generator();

674 await utils.actAsync(() =>

672 - ReactDOM.render(<Example prop={iterable} />, container),

675 + legacyRender(<Example prop={iterable} />, container),

676 );

677

678 const inspectedElement = await inspectElementAtIndex(0);

@@ -693,7 +696,7 @@ describe('InspectedElement', () => {

696

697 const container = document.createElement('div');

698 await utils.actAsync(() =>

696 - ReactDOM.render(<Example object={object} />, container),

699 + legacyRender(<Example object={object} />, container),

700 );

701

702 const inspectedElement = await inspectElementAtIndex(0);

@@ -718,7 +721,7 @@ describe('InspectedElement', () => {

721

722 const container = document.createElement('div');

723 await utils.actAsync(() =>

721 - ReactDOM.render(<Example object={object} />, container),

724 + legacyRender(<Example object={object} />, container),

725 );

726

727 const inspectedElement = await inspectElementAtIndex(0);

@@ -755,7 +758,7 @@ describe('InspectedElement', () => {

758

759 const container = document.createElement('div');

760 await utils.actAsync(() =>

758 - ReactDOM.render(<Example data={new CustomData()} />, container),

761 + legacyRender(<Example data={new CustomData()} />, container),

762 );

763

764 const inspectedElement = await inspectElementAtIndex(0);

@@ -834,7 +837,7 @@ describe('InspectedElement', () => {

837

838 const container = document.createElement('div');

839 await utils.actAsync(() =>

837 - ReactDOM.render(<Example object={object} />, container),

840 + legacyRender(<Example object={object} />, container),

841 );

842

843 const inspectedElement = await inspectElementAtIndex(0);

@@ -889,7 +892,7 @@ describe('InspectedElement', () => {

892 const Example = ({data}) => null;

893 const container = document.createElement('div');

894 await utils.actAsync(() =>

892 - ReactDOM.render(<Example data={testData} />, container),

895 + legacyRender(<Example data={testData} />, container),

896 );

897

898 const inspectedElement = await inspectElementAtIndex(0);

@@ -920,7 +923,7 @@ describe('InspectedElement', () => {

923

924 const container = document.createElement('div');

925 await utils.actAsync(() =>

923 - ReactDOM.render(

926 + legacyRender(

927 <Example

928 nestedObject={{

929 a: {

@@ -1075,7 +1078,7 @@ describe('InspectedElement', () => {

1078

1079 const container = document.createElement('div');

1080 await utils.actAsync(() =>

1078 - ReactDOM.render(

1081 + legacyRender(

1082 <Example

1083 set_of_sets={new Set([new Set([1, 2, 3]), new Set(['a', 'b', 'c'])])}

1084 />,

@@ -1141,7 +1144,7 @@ describe('InspectedElement', () => {

1144

1145 const container = document.createElement('div');

1146 await utils.actAsync(() =>

1144 - ReactDOM.render(

1147 + legacyRender(

1148 <Example

1149 nestedObject={{

1150 a: {

@@ -1245,7 +1248,7 @@ describe('InspectedElement', () => {

1248

1249 TestRendererAct(() => {

1250 TestUtilsAct(() => {

1248 - ReactDOM.render(

1251 + legacyRender(

1252 <Example

1253 nestedObject={{

1254 a: {

@@ -1304,7 +1307,7 @@ describe('InspectedElement', () => {

1307

1308 const container = document.createElement('div');

1309 await utils.actAsync(() =>

1307 - ReactDOM.render(

1310 + legacyRender(

1311 <Example

1312 nestedObject={{

1313 a: {

@@ -1383,7 +1386,7 @@ describe('InspectedElement', () => {

1386

1387 TestRendererAct(() => {

1388 TestUtilsAct(() => {

1386 - ReactDOM.render(

1389 + legacyRender(

1390 <Example

1391 nestedObject={{

1392 a: {

@@ -1439,7 +1442,7 @@ describe('InspectedElement', () => {

1442

1443 const container = document.createElement('div');

1444 await utils.actAsync(() =>

1442 - ReactDOM.render(

1445 + legacyRender(

1446 <Example

1447 nestedObject={{

1448 value: 1,

@@ -1487,7 +1490,7 @@ describe('InspectedElement', () => {

1490 `);

1491

1492 TestUtilsAct(() => {

1490 - ReactDOM.render(

1493 + legacyRender(

1494 <Example

1495 nestedObject={{

1496 value: 2,

@@ -1529,7 +1532,7 @@ describe('InspectedElement', () => {

1532

1533 const container = document.createElement('div');

1534 await utils.actAsync(() =>

1532 - ReactDOM.render(<Example a={1} b="abc" />, container),

1535 + legacyRender(<Example a={1} b="abc" />, container),

1536 );

1537

1538 const inspectedElement = await inspectElementAtIndex(0);

@@ -1573,7 +1576,7 @@ describe('InspectedElement', () => {

1576 };

1577

1578 await utils.actAsync(() =>

1576 - ReactDOM.render(

1579 + legacyRender(

1580 <Example nestedObject={nestedObject} />,

1581 document.createElement('div'),

1582 ),

@@ -1632,7 +1635,7 @@ describe('InspectedElement', () => {

1635 };

1636

1637 await utils.actAsync(() =>

1635 - ReactDOM.render(

1638 + legacyRender(

1639 <Example nestedObject={nestedObject} />,

1640 document.createElement('div'),

1641 ),

@@ -1707,7 +1710,7 @@ describe('InspectedElement', () => {

1710 const bigInt = BigInt(123); // eslint-disable-line no-undef

1711

1712 await utils.actAsync(() =>

1710 - ReactDOM.render(

1713 + legacyRender(

1714 <Example

1715 arrayBuffer={arrayBuffer}

1716 dataView={dataView}

@@ -1784,7 +1787,7 @@ describe('InspectedElement', () => {

1787 }

1788

1789 await utils.actAsync(() =>

1787 - ReactDOM.render(<DisplayedComplexValue />, container),

1790 + legacyRender(<DisplayedComplexValue />, container),

1791 );

1792

1793 const {hooks} = await inspectElementAtIndex(0);

@@ -1826,7 +1829,7 @@ describe('InspectedElement', () => {

1829

1830 const container = document.createElement('div');

1831 await utils.actAsync(() =>

1829 - ReactDOM.render(<Example proxy={proxy} />, container),

1832 + legacyRender(<Example proxy={proxy} />, container),

1833 );

1834

1835 const inspectedElement = await inspectElementAtIndex(0);

@@ -1860,7 +1863,7 @@ describe('InspectedElement', () => {

1863

1864 const container = document.createElement('div');

1865 await utils.actAsync(() =>

1863 - ReactDOM.render(<Example a={1} b="abc" />, container),

1866 + legacyRender(<Example a={1} b="abc" />, container),

1867 );

1868

1869 await inspectElementAtIndex(0);

@@ -1893,7 +1896,7 @@ describe('InspectedElement', () => {

1896

1897 const container = document.createElement('div');

1898 await utils.actAsync(() =>

1896 - ReactDOM.render(<Example a={1} b="abc" />, container),

1899 + legacyRender(<Example a={1} b="abc" />, container),

1900 );

1901

1902 await inspectElementAtIndex(0);

@@ -1926,7 +1929,7 @@ describe('InspectedElement', () => {

1929

1930 const container = document.createElement('div');

1931 await utils.actAsync(() =>

1929 - ReactDOM.render(<Example a={1} b="abc" />, container),

1932 + legacyRender(<Example a={1} b="abc" />, container),

1933 );

1934

1935 await inspectElementAtIndex(0);

@@ -1963,7 +1966,7 @@ describe('InspectedElement', () => {

1966

1967 const container = document.createElement('div');

1968 await utils.actAsync(() =>

1966 - ReactDOM.render(<Example a={1} b="abc" />, container),

1969 + legacyRender(<Example a={1} b="abc" />, container),

1970 );

1971

1972 await inspectElementAtIndex(0);

@@ -2030,7 +2033,7 @@ describe('InspectedElement', () => {

2033

2034 await withErrorsOrWarningsIgnored(['test-only: '], async () => {

2035 await utils.actAsync(() =>

2033 - ReactDOM.render(<Example repeatWarningCount={1} />, container),

2036 + legacyRender(<Example repeatWarningCount={1} />, container),

2037 );

2038 });

2039

@@ -2066,7 +2069,7 @@ describe('InspectedElement', () => {

2069 const container = document.createElement('div');

2070 await utils.withErrorsOrWarningsIgnored(['test-only:'], async () => {

2071 await utils.actAsync(() =>

2069 - ReactDOM.render(<Example repeatWarningCount={1} />, container),

2072 + legacyRender(<Example repeatWarningCount={1} />, container),

2073 );

2074 });

2075 const data = await getErrorsAndWarningsForElementAtIndex(0);

@@ -2102,7 +2105,7 @@ describe('InspectedElement', () => {

2105 const container = document.createElement('div');

2106 await utils.withErrorsOrWarningsIgnored(['test-only:'], async () => {

2107 await utils.actAsync(() =>

2105 - ReactDOM.render(<Example repeatWarningCount={1} />, container),

2108 + legacyRender(<Example repeatWarningCount={1} />, container),

2109 );

2110 });

2111

@@ -2139,7 +2142,7 @@ describe('InspectedElement', () => {

2142 const container = document.createElement('div');

2143 await utils.withErrorsOrWarningsIgnored(['test-only:'], async () => {

2144 await utils.actAsync(() =>

2142 - ReactDOM.render(<Example repeatWarningCount={1} />, container),

2145 + legacyRender(<Example repeatWarningCount={1} />, container),

2146 );

2147 });

2148

@@ -2172,7 +2175,7 @@ describe('InspectedElement', () => {

2175 ['Warning: Each child in a list should have a unique "key" prop.'],

2176 async () => {

2177 await utils.actAsync(() =>

2175 - ReactDOM.render(<Example repeatWarningCount={1} />, container),

2178 + legacyRender(<Example repeatWarningCount={1} />, container),

2179 );

2180 },

2181 );

@@ -2202,7 +2205,7 @@ describe('InspectedElement', () => {

2205 const container = document.createElement('div');

2206 await utils.withErrorsOrWarningsIgnored(['test-only:'], async () => {

2207 await utils.actAsync(() =>

2205 - ReactDOM.render(<Example repeatWarningCount={1} />, container),

2208 + legacyRender(<Example repeatWarningCount={1} />, container),

2209 );

2210 });

2211

@@ -2233,7 +2236,7 @@ describe('InspectedElement', () => {

2236 const container = document.createElement('div');

2237 await utils.withErrorsOrWarningsIgnored(['test-only:'], async () => {

2238 await utils.actAsync(() =>

2236 - ReactDOM.render(

2239 + legacyRender(

2240 <React.Fragment>

2241 <Example id={1} />

2242 <Example id={2} />

@@ -2330,7 +2333,7 @@ describe('InspectedElement', () => {

2333 const container = document.createElement('div');

2334 await utils.withErrorsOrWarningsIgnored(['test-only:'], async () => {

2335 await utils.actAsync(() =>

2333 - ReactDOM.render(

2336 + legacyRender(

2337 <React.Fragment>

2338 <Example id={1} />

2339 <Example id={2} />

@@ -2433,7 +2436,7 @@ describe('InspectedElement', () => {

2436 const Example = () => 'example';

2437

2438 await utils.actAsync(() =>

2436 - ReactDOM.render(

2439 + legacyRender(

2440 <ErrorBoundary>

2441 <Example />

2442 </ErrorBoundary>,

@@ -2486,7 +2489,9 @@ describe('InspectedElement', () => {

2489 await toggleError(true);

2490

2491 // we are in error state now, <Example /> won't show up

2489 - expect(store.getElementIDAtIndex(1)).toBe(null);

2492 + withErrorsOrWarningsIgnored(['Invalid index'], () => {

2493 + expect(store.getElementIDAtIndex(1)).toBe(null);

2494 + });

2495

2496 // Inpsect <ErrorBoundary /> to toggle off the error state

2497 inspectedElement = await inspect(0);

packages/react-devtools-shared/src/__tests__/ownersListContext-test.js

+7 -6

@@ -14,9 +14,9 @@ import type Store from 'react-devtools-shared/src/devtools/store';

15 describe('OwnersListContext', () => {

16 let React;

17 - let ReactDOM;

17 let TestRenderer: ReactTestRenderer;

18 let bridge: FrontendBridge;

19 + let legacyRender;

20 let store: Store;

21 let utils;

@@ -30,12 +30,13 @@ describe('OwnersListContext', () => {

30 utils = require('./utils');

31 utils.beforeEachProfiling();

33 + legacyRender = utils.legacyRender;

34 +

35 bridge = global.bridge;

36 store = global.store;

37 store.collapseNodesByDefault = false;

39 React = require('react');

38 - ReactDOM = require('react-dom');

40 TestRenderer = utils.requireTestRenderer();

42 BridgeContext = require('react-devtools-shared/src/devtools/views/context')

@@ -73,7 +74,7 @@ describe('OwnersListContext', () => {

74 const Child = () => null;

76 utils.act(() =>

76 - ReactDOM.render(<Grandparent />, document.createElement('div')),

77 + legacyRender(<Grandparent />, document.createElement('div')),

78 );

80 expect(store).toMatchSnapshot('mount');

@@ -132,7 +133,7 @@ describe('OwnersListContext', () => {

133 const Child = () => null;

134

135 utils.act(() =>

135 - ReactDOM.render(<Grandparent />, document.createElement('div')),

136 + legacyRender(<Grandparent />, document.createElement('div')),

137 );

138

139 expect(store).toMatchSnapshot('mount');

@@ -170,7 +171,7 @@ describe('OwnersListContext', () => {

171 const Parent = () => null;

172

173 utils.act(() =>

173 - ReactDOM.render(<Grandparent />, document.createElement('div')),

174 + legacyRender(<Grandparent />, document.createElement('div')),

175 );

176

177 expect(store).toMatchSnapshot('mount');

@@ -211,7 +212,7 @@ describe('OwnersListContext', () => {

212 };

213

214 utils.act(() =>

214 - ReactDOM.render(<Grandparent />, document.createElement('div')),

215 + legacyRender(<Grandparent />, document.createElement('div')),

216 );

217

218 let didFinish = false;

packages/react-devtools-shared/src/__tests__/profilerContext-test.js

+22 -21

@@ -18,6 +18,7 @@ describe('ProfilerContext', () => {

18 let ReactDOM;

19 let TestRenderer: ReactTestRenderer;

20 let bridge: FrontendBridge;

21 + let legacyRender;

22 let store: Store;

23 let utils;

@@ -33,6 +34,8 @@ describe('ProfilerContext', () => {

34 utils = require('./utils');

35 utils.beforeEachProfiling();

37 + legacyRender = utils.legacyRender;

38 +

39 bridge = global.bridge;

40 store = global.store;

41 store.collapseNodesByDefault = false;

@@ -96,10 +99,10 @@ describe('ProfilerContext', () => {

99 const containerA = document.createElement('div');

100 const containerB = document.createElement('div');

101

99 - await utils.actAsync(() => ReactDOM.render(<Component />, containerA));

102 + await utils.actAsync(() => legacyRender(<Component />, containerA));

103 expect(context.supportsProfiling).toBe(true);

104

102 - await utils.actAsync(() => ReactDOM.render(<Component />, containerB));

105 + await utils.actAsync(() => legacyRender(<Component />, containerB));

106 await utils.actAsync(() => ReactDOM.unmountComponentAtNode(containerA));

107 expect(context.supportsProfiling).toBe(true);

108

@@ -110,9 +113,7 @@ describe('ProfilerContext', () => {

113 it('should gracefully handle an empty profiling session (with no recorded commits)', async () => {

114 const Example = () => null;

115

113 - utils.act(() =>

114 - ReactDOM.render(<Example />, document.createElement('div')),

115 - );

116 + utils.act(() => legacyRender(<Example />, document.createElement('div')));

117

118 let context: Context = ((null: any): Context);

119

@@ -150,14 +151,14 @@ describe('ProfilerContext', () => {

151

152 const containerOne = document.createElement('div');

153 const containerTwo = document.createElement('div');

153 - utils.act(() => ReactDOM.render(<Parent />, containerOne));

154 - utils.act(() => ReactDOM.render(<Parent />, containerTwo));

154 + utils.act(() => legacyRender(<Parent />, containerOne));

155 + utils.act(() => legacyRender(<Parent />, containerTwo));

156 expect(store).toMatchSnapshot('mounted');

157

158 // Profile and record updates to both roots.

159 await utils.actAsync(() => store.profilerStore.startProfiling());

159 - await utils.actAsync(() => ReactDOM.render(<Parent />, containerOne));

160 - await utils.actAsync(() => ReactDOM.render(<Parent />, containerTwo));

160 + await utils.actAsync(() => legacyRender(<Parent />, containerOne));

161 + await utils.actAsync(() => legacyRender(<Parent />, containerTwo));

162 await utils.actAsync(() => store.profilerStore.stopProfiling());

163

164 let context: Context = ((null: any): Context);

@@ -189,13 +190,13 @@ describe('ProfilerContext', () => {

190

191 const containerOne = document.createElement('div');

192 const containerTwo = document.createElement('div');

192 - utils.act(() => ReactDOM.render(<Parent />, containerOne));

193 - utils.act(() => ReactDOM.render(<Parent />, containerTwo));

193 + utils.act(() => legacyRender(<Parent />, containerOne));

194 + utils.act(() => legacyRender(<Parent />, containerTwo));

195 expect(store).toMatchSnapshot('mounted');

196

197 // Profile and record updates to only the first root.

198 await utils.actAsync(() => store.profilerStore.startProfiling());

198 - await utils.actAsync(() => ReactDOM.render(<Parent />, containerOne));

199 + await utils.actAsync(() => legacyRender(<Parent />, containerOne));

200 await utils.actAsync(() => store.profilerStore.stopProfiling());

201

202 let context: Context = ((null: any): Context);

@@ -228,14 +229,14 @@ describe('ProfilerContext', () => {

229

230 const containerA = document.createElement('div');

231 const containerB = document.createElement('div');

231 - utils.act(() => ReactDOM.render(<Parent />, containerA));

232 - utils.act(() => ReactDOM.render(<Parent />, containerB));

232 + utils.act(() => legacyRender(<Parent />, containerA));

233 + utils.act(() => legacyRender(<Parent />, containerB));

234 expect(store).toMatchSnapshot('mounted');

235

236 // Profile and record updates.

237 await utils.actAsync(() => store.profilerStore.startProfiling());

237 - await utils.actAsync(() => ReactDOM.render(<Parent />, containerA));

238 - await utils.actAsync(() => ReactDOM.render(<Parent />, containerB));

238 + await utils.actAsync(() => legacyRender(<Parent />, containerA));

239 + await utils.actAsync(() => legacyRender(<Parent />, containerB));

240 await utils.actAsync(() => store.profilerStore.stopProfiling());

241

242 let context: Context = ((null: any): Context);

@@ -263,8 +264,8 @@ describe('ProfilerContext', () => {

264

265 // Profile and record more updates to both roots

266 await utils.actAsync(() => store.profilerStore.startProfiling());

266 - await utils.actAsync(() => ReactDOM.render(<Parent />, containerA));

267 - await utils.actAsync(() => ReactDOM.render(<Parent />, containerB));

267 + await utils.actAsync(() => legacyRender(<Parent />, containerA));

268 + await utils.actAsync(() => legacyRender(<Parent />, containerB));

269 await utils.actAsync(() => store.profilerStore.stopProfiling());

270

271 const otherID = ((store.getElementIDAtIndex(0): any): number);

@@ -287,7 +288,7 @@ describe('ProfilerContext', () => {

288

289 const container = document.createElement('div');

290 utils.act(() =>

290 - ReactDOM.render(<GrandParent includeChild={true} />, container),

291 + legacyRender(<GrandParent includeChild={true} />, container),

292 );

293 expect(store).toMatchSnapshot('mounted');

294

@@ -297,10 +298,10 @@ describe('ProfilerContext', () => {

298 // Profile and record updates.

299 await utils.actAsync(() => store.profilerStore.startProfiling());

300 await utils.actAsync(() =>

300 - ReactDOM.render(<GrandParent includeChild={true} />, container),

301 + legacyRender(<GrandParent includeChild={true} />, container),

302 );

303 await utils.actAsync(() =>

303 - ReactDOM.render(<GrandParent includeChild={false} />, container),

304 + legacyRender(<GrandParent includeChild={false} />, container),

305 );

306 await utils.actAsync(() => store.profilerStore.stopProfiling());

307

packages/react-devtools-shared/src/__tests__/profilerStore-test.js

+9 -6

@@ -12,6 +12,7 @@ import type Store from 'react-devtools-shared/src/devtools/store';

12 describe('ProfilerStore', () => {

13 let React;

14 let ReactDOM;

15 + let legacyRender;

16 let store: Store;

17 let utils;

@@ -19,6 +20,8 @@ describe('ProfilerStore', () => {

20 utils = require('./utils');

21 utils.beforeEachProfiling();

23 + legacyRender = utils.legacyRender;

24 +

25 store = global.store;

26 store.collapseNodesByDefault = false;

27 store.recordChangeDescriptions = true;

@@ -38,15 +41,15 @@ describe('ProfilerStore', () => {

41 const containerB = document.createElement('div');

43 utils.act(() => {

41 - ReactDOM.render(<Parent key="A" count={3} />, containerA);

42 - ReactDOM.render(<Parent key="B" count={2} />, containerB);

44 + legacyRender(<Parent key="A" count={3} />, containerA);

45 + legacyRender(<Parent key="B" count={2} />, containerB);

46 });

48 utils.act(() => store.profilerStore.startProfiling());

50 utils.act(() => {

48 - ReactDOM.render(<Parent key="A" count={4} />, containerA);

49 - ReactDOM.render(<Parent key="B" count={1} />, containerB);

51 + legacyRender(<Parent key="A" count={4} />, containerA);

52 + legacyRender(<Parent key="B" count={1} />, containerB);

53 });

55 utils.act(() => store.profilerStore.stopProfiling());

@@ -96,7 +99,7 @@ describe('ProfilerStore', () => {

100 // It's important that this test uses legacy sync mode.

101 // The root API does not trigger this particular failing case.

99 - ReactDOM.render(<ControlledInput />, container);

102 + legacyRender(<ControlledInput />, container);

103

104 utils.act(() => store.profilerStore.startProfiling());

105

@@ -151,7 +154,7 @@ describe('ProfilerStore', () => {

154

155 // It's important that this test uses legacy sync mode.

156 // The root API does not trigger this particular failing case.

154 - ReactDOM.render(<ControlledInput />, container);

157 + legacyRender(<ControlledInput />, container);

158

159 utils.act(() => store.profilerStore.startProfiling());

160 utils.act(() =>

packages/react-devtools-shared/src/__tests__/profilingCache-test.js

+27 -24

@@ -18,6 +18,7 @@ describe('ProfilingCache', () => {

18 let Scheduler;

19 let TestRenderer: ReactTestRenderer;

20 let bridge: FrontendBridge;

21 + let legacyRender;

22 let store: Store;

23 let utils;

@@ -25,6 +26,8 @@ describe('ProfilingCache', () => {

26 utils = require('./utils');

27 utils.beforeEachProfiling();

29 + legacyRender = utils.legacyRender;

30 +

31 bridge = global.bridge;

32 store = global.store;

33 store.collapseNodesByDefault = false;

@@ -60,14 +63,14 @@ describe('ProfilingCache', () => {

63 const containerB = document.createElement('div');

64 const containerC = document.createElement('div');

63 - utils.act(() => ReactDOM.render(<Parent count={2} />, containerA));

64 - utils.act(() => ReactDOM.render(<Parent count={1} />, containerB));

66 + utils.act(() => legacyRender(<Parent count={2} />, containerA));

67 + utils.act(() => legacyRender(<Parent count={1} />, containerB));

68 utils.act(() => store.profilerStore.startProfiling());

66 - utils.act(() => ReactDOM.render(<Parent count={3} />, containerA));

67 - utils.act(() => ReactDOM.render(<Parent count={1} />, containerC));

68 - utils.act(() => ReactDOM.render(<Parent count={1} />, containerA));

69 + utils.act(() => legacyRender(<Parent count={3} />, containerA));

70 + utils.act(() => legacyRender(<Parent count={1} />, containerC));

71 + utils.act(() => legacyRender(<Parent count={1} />, containerA));

72 utils.act(() => ReactDOM.unmountComponentAtNode(containerB));

70 - utils.act(() => ReactDOM.render(<Parent count={0} />, containerA));

73 + utils.act(() => legacyRender(<Parent count={0} />, containerA));

74 utils.act(() => store.profilerStore.stopProfiling());

76 const allProfilingDataForRoots = [];

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

146 const container = document.createElement('div');

147

148 utils.act(() => store.profilerStore.startProfiling());

146 - utils.act(() => ReactDOM.render(<Parent count={2} />, container));

147 - utils.act(() => ReactDOM.render(<Parent count={3} />, container));

148 - utils.act(() => ReactDOM.render(<Parent count={1} />, container));

149 - utils.act(() => ReactDOM.render(<Parent count={0} />, container));

149 + utils.act(() => legacyRender(<Parent count={2} />, container));

150 + utils.act(() => legacyRender(<Parent count={3} />, container));

151 + utils.act(() => legacyRender(<Parent count={1} />, container));

152 + utils.act(() => legacyRender(<Parent count={0} />, container));

153 utils.act(() => store.profilerStore.stopProfiling());

154

155 const allCommitData = [];

@@ -248,16 +251,16 @@ describe('ProfilingCache', () => {

251 const container = document.createElement('div');

252

253 utils.act(() => store.profilerStore.startProfiling());

251 - utils.act(() => ReactDOM.render(<LegacyContextProvider />, container));

254 + utils.act(() => legacyRender(<LegacyContextProvider />, container));

255 expect(instance).not.toBeNull();

256 utils.act(() => (instance: any).setState({count: 1}));

257 utils.act(() =>

255 - ReactDOM.render(<LegacyContextProvider foo={123} />, container),

258 + legacyRender(<LegacyContextProvider foo={123} />, container),

259 );

260 utils.act(() =>

258 - ReactDOM.render(<LegacyContextProvider bar="abc" />, container),

261 + legacyRender(<LegacyContextProvider bar="abc" />, container),

262 );

260 - utils.act(() => ReactDOM.render(<LegacyContextProvider />, container));

263 + utils.act(() => legacyRender(<LegacyContextProvider />, container));

264 utils.act(() => store.profilerStore.stopProfiling());

265

266 const allCommitData = [];

@@ -346,7 +349,7 @@ describe('ProfilingCache', () => {

349

350 utils.act(() => store.profilerStore.startProfiling());

351 utils.act(() =>

349 - ReactDOM.render(

352 + legacyRender(

353 <Context.Provider value={true}>

354 <Component count={1} />

355 </Context.Provider>,

@@ -356,7 +359,7 @@ describe('ProfilingCache', () => {

359

360 // Second render has no changed hooks, only changed props.

361 utils.act(() =>

359 - ReactDOM.render(

362 + legacyRender(

363 <Context.Provider value={true}>

364 <Component count={2} />

365 </Context.Provider>,

@@ -373,7 +376,7 @@ describe('ProfilingCache', () => {

376 // Fifth render has a changed context value, but no changed hook.

377 // Technically, DevTools will miss this "context" change since it only tracks legacy context.

378 utils.act(() =>

376 - ReactDOM.render(

379 + legacyRender(

380 <Context.Provider value={false}>

381 <Component count={2} />

382 </Context.Provider>,

@@ -453,7 +456,7 @@ describe('ProfilingCache', () => {

456

457 utils.act(() => store.profilerStore.startProfiling());

458 utils.act(() =>

456 - ReactDOM.render(<Grandparent />, document.createElement('div')),

459 + legacyRender(<Grandparent />, document.createElement('div')),

460 );

461 utils.act(() => store.profilerStore.stopProfiling());

462

@@ -508,7 +511,7 @@ describe('ProfilingCache', () => {

511

512 utils.act(() => store.profilerStore.startProfiling());

513 await utils.actAsync(() =>

511 - ReactDOM.render(<Parent />, document.createElement('div')),

514 + legacyRender(<Parent />, document.createElement('div')),

515 );

516 utils.act(() => store.profilerStore.stopProfiling());

517

@@ -558,9 +561,9 @@ describe('ProfilingCache', () => {

561 const container = document.createElement('div');

562

563 utils.act(() => store.profilerStore.startProfiling());

561 - utils.act(() => ReactDOM.render(<Parent count={1} />, container));

562 - utils.act(() => ReactDOM.render(<Parent count={2} />, container));

563 - utils.act(() => ReactDOM.render(<Parent count={3} />, container));

564 + utils.act(() => legacyRender(<Parent count={1} />, container));

565 + utils.act(() => legacyRender(<Parent count={2} />, container));

566 + utils.act(() => legacyRender(<Parent count={3} />, container));

567 utils.act(() => store.profilerStore.stopProfiling());

568

569 const allFiberCommits = [];

@@ -624,7 +627,7 @@ describe('ProfilingCache', () => {

627 const container = document.createElement('div');

628

629 utils.act(() => store.profilerStore.startProfiling());

627 - utils.act(() => ReactDOM.render(<React.Suspense />, container));

630 + utils.act(() => legacyRender(<React.Suspense />, container));

631 utils.act(() => store.profilerStore.stopProfiling());

632

633 function Validator({commitIndex, rootID}) {

@@ -721,7 +724,7 @@ describe('ProfilingCache', () => {

724 const {Simulate} = require('react-dom/test-utils');

725

726 const container = document.createElement('div');

724 - utils.act(() => ReactDOM.render(<App />, container));

727 + utils.act(() => legacyRender(<App />, container));

728 expect(container.textContent).toBe('Home');

729 utils.act(() => store.profilerStore.startProfiling());

730 utils.act(() => Simulate.click(linkRef.current));

packages/react-devtools-shared/src/__tests__/profilingCharts-test.js

+7 -6

@@ -12,9 +12,9 @@ import type Store from 'react-devtools-shared/src/devtools/store';

13 describe('profiling charts', () => {

14 let React;

15 - let ReactDOM;

15 let Scheduler;

16 let TestRenderer: TestRendererType;

17 + let legacyRender;

18 let store: Store;

19 let utils;

@@ -22,12 +22,13 @@ describe('profiling charts', () => {

22 utils = require('./utils');

23 utils.beforeEachProfiling();

25 + legacyRender = utils.legacyRender;

26 +

27 store = global.store;

28 store.collapseNodesByDefault = false;

29 store.recordChangeDescriptions = true;

31 React = require('react');

30 - ReactDOM = require('react-dom');

32 Scheduler = require('scheduler');

33 TestRenderer = utils.requireTestRenderer();

34 });

@@ -54,8 +55,8 @@ describe('profiling charts', () => {

55 const container = document.createElement('div');

57 utils.act(() => store.profilerStore.startProfiling());

57 - utils.act(() => ReactDOM.render(<Parent />, container));

58 - utils.act(() => ReactDOM.render(<Parent />, container));

58 + utils.act(() => legacyRender(<Parent />, container));

59 + utils.act(() => legacyRender(<Parent />, container));

60 utils.act(() => store.profilerStore.stopProfiling());

62 let renderFinished = false;

@@ -120,8 +121,8 @@ describe('profiling charts', () => {

121 const container = document.createElement('div');

122

123 utils.act(() => store.profilerStore.startProfiling());

123 - utils.act(() => ReactDOM.render(<Parent />, container));

124 - utils.act(() => ReactDOM.render(<Parent />, container));

124 + utils.act(() => legacyRender(<Parent />, container));

125 + utils.act(() => legacyRender(<Parent />, container));

126 utils.act(() => store.profilerStore.stopProfiling());

127

128 let renderFinished = false;

packages/react-devtools-shared/src/__tests__/profilingCommitTreeBuilder-test.js

+12 -19

@@ -15,6 +15,7 @@ describe('commit tree', () => {

15 let ReactDOM;

16 let Scheduler;

17 let TestRenderer: TestRendererType;

18 + let legacyRender;

19 let store: Store;

20 let utils;

@@ -22,6 +23,8 @@ describe('commit tree', () => {

23 utils = require('./utils');

24 utils.beforeEachProfiling();

26 + legacyRender = utils.legacyRender;

27 +

28 store = global.store;

29 store.collapseNodesByDefault = false;

30 store.recordChangeDescriptions = true;

@@ -47,10 +50,10 @@ describe('commit tree', () => {

50 const container = document.createElement('div');

52 utils.act(() => store.profilerStore.startProfiling());

50 - utils.act(() => ReactDOM.render(<Parent count={1} />, container));

51 - utils.act(() => ReactDOM.render(<Parent count={3} />, container));

52 - utils.act(() => ReactDOM.render(<Parent count={2} />, container));

53 - utils.act(() => ReactDOM.render(<Parent count={0} />, container));

53 + utils.act(() => legacyRender(<Parent count={1} />, container));

54 + utils.act(() => legacyRender(<Parent count={3} />, container));

55 + utils.act(() => legacyRender(<Parent count={2} />, container));

56 + utils.act(() => legacyRender(<Parent count={0} />, container));

57 utils.act(() => store.profilerStore.stopProfiling());

59 let renderFinished = false;

@@ -108,16 +111,10 @@ describe('commit tree', () => {

111 const container = document.createElement('div');

112

113 utils.act(() => store.profilerStore.startProfiling());

111 - utils.act(() =>

112 - ReactDOM.render(<App renderChildren={true} />, container),

113 - );

114 + utils.act(() => legacyRender(<App renderChildren={true} />, container));

115 await Promise.resolve();

115 - utils.act(() =>

116 - ReactDOM.render(<App renderChildren={true} />, container),

117 - );

118 - utils.act(() =>

119 - ReactDOM.render(<App renderChildren={false} />, container),

120 - );

116 + utils.act(() => legacyRender(<App renderChildren={true} />, container));

117 + utils.act(() => legacyRender(<App renderChildren={false} />, container));

118 utils.act(() => store.profilerStore.stopProfiling());

119

120 let renderFinished = false;

@@ -189,12 +186,8 @@ describe('commit tree', () => {

186 const container = document.createElement('div');

187

188 utils.act(() => store.profilerStore.startProfiling());

192 - utils.act(() =>

193 - ReactDOM.render(<App renderChildren={true} />, container),

194 - );

195 - utils.act(() =>

196 - ReactDOM.render(<App renderChildren={false} />, container),

197 - );

189 + utils.act(() => legacyRender(<App renderChildren={true} />, container));

190 + utils.act(() => legacyRender(<App renderChildren={false} />, container));

191 utils.act(() => store.profilerStore.stopProfiling());

192

193 let renderFinished = false;

packages/react-devtools-shared/src/__tests__/profilingHostRoot-test.js

+4 -2

@@ -11,10 +11,10 @@ describe('profiling HostRoot', () => {

11 let React;

12 let ReactDOM;

13 let Scheduler;

14 + let legacyRender;

15 let store: Store;

16 let utils;

17 let getEffectDurations;

17 -

18 let effectDurations;

19 let passiveEffectDurations;

@@ -22,6 +22,8 @@ describe('profiling HostRoot', () => {

22 utils = require('./utils');

23 utils.beforeEachProfiling();

25 + legacyRender = utils.legacyRender;

26 +

27 getEffectDurations = require('../backend/utils').getEffectDurations;

29 store = global.store;

@@ -61,7 +63,7 @@ describe('profiling HostRoot', () => {

63 utils.act(() => store.profilerStore.startProfiling());

64 utils.act(() => {

65 const container = document.createElement('div');

64 - ReactDOM.render(<App />, container);

66 + legacyRender(<App />, container);

67 });

68 utils.act(() => store.profilerStore.stopProfiling());

packages/react-devtools-shared/src/__tests__/store-test.js

+72 -86

@@ -14,6 +14,7 @@ describe('Store', () => {

14 let act;

15 let bridge;

16 let getRendererID;

17 + let legacyRender;

18 let store;

19 let withErrorsOrWarningsIgnored;

@@ -28,6 +29,7 @@ describe('Store', () => {

29 const utils = require('./utils');

30 act = utils.act;

31 getRendererID = utils.getRendererID;

32 + legacyRender = utils.legacyRender;

33 withErrorsOrWarningsIgnored = utils.withErrorsOrWarningsIgnored;

34 });

@@ -35,7 +37,7 @@ describe('Store', () => {

37 const Component = () => <div>Hi</div>;

39 act(() =>

38 - ReactDOM.render(<Component count={4} />, document.createElement('div')),

40 + legacyRender(<Component count={4} />, document.createElement('div')),

41 );

42 expect(store).toMatchSnapshot('1: mount');

@@ -53,10 +55,10 @@ describe('Store', () => {

56 const container = document.createElement('div');

56 - act(() => ReactDOM.render(<Root>{null}</Root>, container));

58 + act(() => legacyRender(<Root>{null}</Root>, container));

59 expect(store).toMatchSnapshot('1: mount');

59 - act(() => ReactDOM.render(<div />, container));

61 + act(() => legacyRender(<div />, container));

62 expect(store).toMatchSnapshot('2: add host nodes');

63 });

@@ -81,7 +83,7 @@ describe('Store', () => {

83 const container = document.createElement('div');

85 act(() =>

84 - ReactDOM.render(

86 + legacyRender(

87 <>

88 <React.Suspense fallback="Loading...">

89 <Owner />

@@ -117,10 +119,10 @@ describe('Store', () => {

119

120 const container = document.createElement('div');

121

120 - act(() => ReactDOM.render(<Grandparent count={4} />, container));

122 + act(() => legacyRender(<Grandparent count={4} />, container));

123 expect(store).toMatchSnapshot('1: mount');

124

123 - act(() => ReactDOM.render(<Grandparent count={2} />, container));

125 + act(() => legacyRender(<Grandparent count={2} />, container));

126 expect(store).toMatchSnapshot('2: update');

127

128 act(() => ReactDOM.unmountComponentAtNode(container));

@@ -136,14 +138,14 @@ describe('Store', () => {

138 const containerB = document.createElement('div');

139

140 act(() => {

139 - ReactDOM.render(<Parent key="A" count={3} />, containerA);

140 - ReactDOM.render(<Parent key="B" count={2} />, containerB);

141 + legacyRender(<Parent key="A" count={3} />, containerA);

142 + legacyRender(<Parent key="B" count={2} />, containerB);

143 });

144 expect(store).toMatchSnapshot('1: mount');

145

146 act(() => {

145 - ReactDOM.render(<Parent key="A" count={4} />, containerA);

146 - ReactDOM.render(<Parent key="B" count={1} />, containerB);

147 + legacyRender(<Parent key="A" count={4} />, containerA);

148 + legacyRender(<Parent key="B" count={1} />, containerB);

149 });

150 expect(store).toMatchSnapshot('2: update');

151

@@ -171,10 +173,7 @@ describe('Store', () => {

173 const Child = () => <div>Hi!</div>;

174

175 act(() =>

174 - ReactDOM.render(

175 - <Grandparent count={4} />,

176 - document.createElement('div'),

177 - ),

176 + legacyRender(<Grandparent count={4} />, document.createElement('div')),

177 );

178 expect(store).toMatchSnapshot('1: mount');

179 });

@@ -201,11 +200,11 @@ describe('Store', () => {

200 );

201

202 const container = document.createElement('div');

204 - act(() => ReactDOM.render(<Wrapper shouldSuspense={true} />, container));

203 + act(() => legacyRender(<Wrapper shouldSuspense={true} />, container));

204 expect(store).toMatchSnapshot('1: loading');

205

206 act(() => {

208 - ReactDOM.render(<Wrapper shouldSuspense={false} />, container);

207 + legacyRender(<Wrapper shouldSuspense={false} />, container);

208 });

209 expect(store).toMatchSnapshot('2: resolved');

210 });

@@ -251,7 +250,7 @@ describe('Store', () => {

250

251 const container = document.createElement('div');

252 act(() =>

254 - ReactDOM.render(

253 + legacyRender(

254 <Wrapper

255 suspendParent={false}

256 suspendFirst={false}

@@ -262,7 +261,7 @@ describe('Store', () => {

261 );

262 expect(store).toMatchSnapshot('1: third child is suspended');

263 act(() =>

265 - ReactDOM.render(

264 + legacyRender(

265 <Wrapper

266 suspendParent={false}

267 suspendFirst={true}

@@ -273,7 +272,7 @@ describe('Store', () => {

272 );

273 expect(store).toMatchSnapshot('2: first and third child are suspended');

274 act(() =>

276 - ReactDOM.render(

275 + legacyRender(

276 <Wrapper

277 suspendParent={false}

278 suspendFirst={false}

@@ -284,7 +283,7 @@ describe('Store', () => {

283 );

284 expect(store).toMatchSnapshot('3: second and third child are suspended');

285 act(() =>

287 - ReactDOM.render(

286 + legacyRender(

287 <Wrapper

288 suspendParent={false}

289 suspendFirst={true}

@@ -295,7 +294,7 @@ describe('Store', () => {

294 );

295 expect(store).toMatchSnapshot('4: first and third child are suspended');

296 act(() =>

298 - ReactDOM.render(

297 + legacyRender(

298 <Wrapper

299 suspendParent={true}

300 suspendFirst={true}

@@ -306,7 +305,7 @@ describe('Store', () => {

305 );

306 expect(store).toMatchSnapshot('5: parent is suspended');

307 act(() =>

309 - ReactDOM.render(

308 + legacyRender(

309 <Wrapper

310 suspendParent={false}

311 suspendFirst={true}

@@ -317,7 +316,7 @@ describe('Store', () => {

316 );

317 expect(store).toMatchSnapshot('6: all children are suspended');

318 act(() =>

320 - ReactDOM.render(

319 + legacyRender(

320 <Wrapper

321 suspendParent={false}

322 suspendFirst={false}

@@ -346,7 +345,7 @@ describe('Store', () => {

345 );

346 expect(store).toMatchSnapshot('9: parent is suspended');

347 act(() =>

349 - ReactDOM.render(

348 + legacyRender(

349 <Wrapper

350 suspendParent={false}

351 suspendFirst={true}

@@ -373,7 +372,7 @@ describe('Store', () => {

372 );

373 expect(store).toMatchSnapshot('12: all children are suspended');

374 act(() =>

376 - ReactDOM.render(

375 + legacyRender(

376 <Wrapper

377 suspendParent={false}

378 suspendFirst={false}

@@ -430,10 +429,7 @@ describe('Store', () => {

429 const Child = () => <div>Hi!</div>;

430

431 act(() =>

433 - ReactDOM.render(

434 - <Grandparent count={2} />,

435 - document.createElement('div'),

436 - ),

432 + legacyRender(<Grandparent count={2} />, document.createElement('div')),

433 );

434 expect(store).toMatchSnapshot('1: mount');

435

@@ -468,10 +464,10 @@ describe('Store', () => {

464

465 const container = document.createElement('div');

466

471 - act(() => ReactDOM.render(<Root>{[foo, bar]}</Root>, container));

467 + act(() => legacyRender(<Root>{[foo, bar]}</Root>, container));

468 expect(store).toMatchSnapshot('1: mount');

469

474 - act(() => ReactDOM.render(<Root>{[bar, foo]}</Root>, container));

470 + act(() => legacyRender(<Root>{[bar, foo]}</Root>, container));

471 expect(store).toMatchSnapshot('3: reorder children');

472

473 act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(0), true));

@@ -495,7 +491,7 @@ describe('Store', () => {

491 const container = document.createElement('div');

492

493 act(() =>

498 - ReactDOM.render(

494 + legacyRender(

495 <React.Fragment>

496 <Parent count={1} />

497 <Parent count={3} />

@@ -506,7 +502,7 @@ describe('Store', () => {

502 expect(store).toMatchSnapshot('1: mount');

503

504 act(() =>

509 - ReactDOM.render(

505 + legacyRender(

506 <React.Fragment>

507 <Parent count={2} />

508 <Parent count={1} />

@@ -529,14 +525,14 @@ describe('Store', () => {

525 const containerB = document.createElement('div');

526

527 act(() => {

532 - ReactDOM.render(<Parent key="A" count={3} />, containerA);

533 - ReactDOM.render(<Parent key="B" count={2} />, containerB);

528 + legacyRender(<Parent key="A" count={3} />, containerA);

529 + legacyRender(<Parent key="B" count={2} />, containerB);

530 });

531 expect(store).toMatchSnapshot('1: mount');

532

533 act(() => {

538 - ReactDOM.render(<Parent key="A" count={4} />, containerA);

539 - ReactDOM.render(<Parent key="B" count={1} />, containerB);

534 + legacyRender(<Parent key="A" count={4} />, containerA);

535 + legacyRender(<Parent key="B" count={1} />, containerB);

536 });

537 expect(store).toMatchSnapshot('2: update');

538

@@ -564,10 +560,7 @@ describe('Store', () => {

560 const Child = () => <div>Hi!</div>;

561

562 act(() =>

567 - ReactDOM.render(

568 - <Grandparent count={4} />,

569 - document.createElement('div'),

570 - ),

563 + legacyRender(<Grandparent count={4} />, document.createElement('div')),

564 );

565 expect(store).toMatchSnapshot('1: mount');

566

@@ -600,7 +593,7 @@ describe('Store', () => {

593 );

594

595 const container = document.createElement('div');

603 - act(() => ReactDOM.render(<Wrapper shouldSuspense={true} />, container));

596 + act(() => legacyRender(<Wrapper shouldSuspense={true} />, container));

597 expect(store).toMatchSnapshot('1: loading');

598

599 // This test isn't meaningful unless we expand the suspended tree

@@ -609,7 +602,7 @@ describe('Store', () => {

602 expect(store).toMatchSnapshot('2: expand Wrapper and Suspense');

603

604 act(() => {

612 - ReactDOM.render(<Wrapper shouldSuspense={false} />, container);

605 + legacyRender(<Wrapper shouldSuspense={false} />, container);

606 });

607 expect(store).toMatchSnapshot('2: resolved');

608 });

@@ -626,10 +619,7 @@ describe('Store', () => {

619 const Child = () => <div>Hi!</div>;

620

621 act(() =>

629 - ReactDOM.render(

630 - <Grandparent count={2} />,

631 - document.createElement('div'),

632 - ),

622 + legacyRender(<Grandparent count={2} />, document.createElement('div')),

623 );

624 expect(store).toMatchSnapshot('1: mount');

625

@@ -671,7 +661,7 @@ describe('Store', () => {

661 const ref = React.createRef();

662

663 act(() =>

674 - ReactDOM.render(

664 + legacyRender(

665 <Wrapper forwardedRef={ref} />,

666 document.createElement('div'),

667 ),

@@ -711,10 +701,10 @@ describe('Store', () => {

701

702 const container = document.createElement('div');

703

714 - act(() => ReactDOM.render(<Root>{[foo, bar]}</Root>, container));

704 + act(() => legacyRender(<Root>{[foo, bar]}</Root>, container));

705 expect(store).toMatchSnapshot('1: mount');

706

717 - act(() => ReactDOM.render(<Root>{[bar, foo]}</Root>, container));

707 + act(() => legacyRender(<Root>{[bar, foo]}</Root>, container));

708 expect(store).toMatchSnapshot('3: reorder children');

709

710 act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(0), false));

@@ -743,9 +733,7 @@ describe('Store', () => {

733 const Parent = () => <Child />;

734 const Child = () => null;

735

746 - act(() =>

747 - ReactDOM.render(<SuspenseTree />, document.createElement('div')),

748 - );

736 + act(() => legacyRender(<SuspenseTree />, document.createElement('div')));

737 expect(store).toMatchSnapshot('1: mount');

738

739 act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(0), false));

@@ -790,9 +778,7 @@ describe('Store', () => {

778 const Parent = () => <Child />;

779 const Child = () => null;

780

793 - act(() =>

794 - ReactDOM.render(<Grandparent />, document.createElement('div')),

795 - );

781 + act(() => legacyRender(<Grandparent />, document.createElement('div')));

782

783 for (let i = 0; i < store.numElements; i++) {

784 expect(store.getIndexOfElementID(store.getElementIDAtIndex(i))).toBe(i);

@@ -805,8 +791,8 @@ describe('Store', () => {

791 const Child = () => null;

792

793 act(() => {

808 - ReactDOM.render(<Grandparent />, document.createElement('div'));

809 - ReactDOM.render(<Grandparent />, document.createElement('div'));

794 + legacyRender(<Grandparent />, document.createElement('div'));

795 + legacyRender(<Grandparent />, document.createElement('div'));

796 });

797

798 for (let i = 0; i < store.numElements; i++) {

@@ -820,7 +806,7 @@ describe('Store', () => {

806 const Child = () => null;

807

808 act(() =>

823 - ReactDOM.render(

809 + legacyRender(

810 <React.Fragment>

811 <Grandparent />

812 <Grandparent />

@@ -840,14 +826,14 @@ describe('Store', () => {

826 const Child = () => null;

827

828 act(() => {

843 - ReactDOM.render(

829 + legacyRender(

830 <React.Fragment>

831 <Grandparent />

832 <Grandparent />

833 </React.Fragment>,

834 document.createElement('div'),

835 );

850 - ReactDOM.render(

836 + legacyRender(

837 <React.Fragment>

838 <Grandparent />

839 <Grandparent />

@@ -870,10 +856,10 @@ describe('Store', () => {

856

857 expect(store.supportsProfiling).toBe(false);

858

873 - act(() => ReactDOM.render(<Component />, containerA));

859 + act(() => legacyRender(<Component />, containerA));

860 expect(store.supportsProfiling).toBe(true);

861

876 - act(() => ReactDOM.render(<Component />, containerB));

862 + act(() => legacyRender(<Component />, containerB));

863 act(() => ReactDOM.unmountComponentAtNode(containerA));

864 expect(store.supportsProfiling).toBe(true);

865

@@ -888,7 +874,7 @@ describe('Store', () => {

874 // This is pretty hacky.

875 const fauxElement = Object.assign({}, <Child />, {key: 123});

876

891 - act(() => ReactDOM.render([fauxElement], document.createElement('div')));

877 + act(() => legacyRender([fauxElement], document.createElement('div')));

878 expect(store).toMatchSnapshot('1: mount');

879 });

880

@@ -949,12 +935,12 @@ describe('Store', () => {

935 const container = document.createElement('div');

936

937 // Render once to start fetching the lazy component

952 - act(() => ReactDOM.render(<App />, container));

938 + act(() => legacyRender(<App />, container));

939

940 await Promise.resolve();

941

942 // Render again after it resolves

957 - act(() => ReactDOM.render(<App />, container));

943 + act(() => legacyRender(<App />, container));

944

945 expect(store).toMatchInlineSnapshot(`

946 [root]

@@ -1004,19 +990,19 @@ describe('Store', () => {

990 const container = document.createElement('div');

991

992 // Render once to start fetching the lazy component

1007 - act(() => ReactDOM.render(<App renderChildren={true} />, container));

993 + act(() => legacyRender(<App renderChildren={true} />, container));

994

995 expect(store).toMatchSnapshot('1: mounted + loading');

996

997 await Promise.resolve();

998

999 // Render again after it resolves

1014 - act(() => ReactDOM.render(<App renderChildren={true} />, container));

1000 + act(() => legacyRender(<App renderChildren={true} />, container));

1001

1002 expect(store).toMatchSnapshot('2: mounted + loaded');

1003

1004 // Render again to unmount it

1019 - act(() => ReactDOM.render(<App renderChildren={false} />, container));

1005 + act(() => legacyRender(<App renderChildren={false} />, container));

1006

1007 expect(store).toMatchSnapshot('3: unmounted');

1008 });

@@ -1047,12 +1033,12 @@ describe('Store', () => {

1033 const container = document.createElement('div');

1034

1035 // Render once to start fetching the lazy component

1050 - act(() => ReactDOM.render(<App renderChildren={true} />, container));

1036 + act(() => legacyRender(<App renderChildren={true} />, container));

1037

1038 expect(store).toMatchSnapshot('1: mounted + loading');

1039

1040 // Render again to unmount it before it finishes loading

1055 - act(() => ReactDOM.render(<App renderChildren={false} />, container));

1041 + act(() => legacyRender(<App renderChildren={false} />, container));

1042

1043 expect(store).toMatchSnapshot('2: unmounted');

1044 });

@@ -1083,7 +1069,7 @@ describe('Store', () => {

1069 const container = document.createElement('div');

1070

1071 withErrorsOrWarningsIgnored(['test-only:'], () => {

1086 - act(() => ReactDOM.render(<Example />, container));

1072 + act(() => legacyRender(<Example />, container));

1073 });

1074

1075 expect(store).toMatchInlineSnapshot(`

@@ -1093,7 +1079,7 @@ describe('Store', () => {

1079 `);

1080

1081 withErrorsOrWarningsIgnored(['test-only:'], () => {

1096 - act(() => ReactDOM.render(<Example rerender={1} />, container));

1082 + act(() => legacyRender(<Example rerender={1} />, container));

1083 });

1084

1085 expect(store).toMatchInlineSnapshot(`

@@ -1114,7 +1100,7 @@ describe('Store', () => {

1100 const container = document.createElement('div');

1101

1102 withErrorsOrWarningsIgnored(['test-only:'], () => {

1117 - act(() => ReactDOM.render(<Example />, container));

1103 + act(() => legacyRender(<Example />, container));

1104 });

1105

1106 expect(store).toMatchInlineSnapshot(`

@@ -1124,7 +1110,7 @@ describe('Store', () => {

1110 `);

1111

1112 withErrorsOrWarningsIgnored(['test-only:'], () => {

1127 - act(() => ReactDOM.render(<Example rerender={1} />, container));

1113 + act(() => legacyRender(<Example rerender={1} />, container));

1114 });

1115

1116 expect(store).toMatchInlineSnapshot(`

@@ -1156,7 +1142,7 @@ describe('Store', () => {

1142

1143 withErrorsOrWarningsIgnored(['test-only:'], () => {

1144 act(() => {

1159 - ReactDOM.render(<Example />, container);

1145 + legacyRender(<Example />, container);

1146 }, false);

1147 });

1148 flushPendingBridgeOperations();

@@ -1194,7 +1180,7 @@ describe('Store', () => {

1180

1181 withErrorsOrWarningsIgnored(['test-only:'], () => {

1182 act(() => {

1197 - ReactDOM.render(

1183 + legacyRender(

1184 <>

1185 <Example />

1186 </>,

@@ -1209,7 +1195,7 @@ describe('Store', () => {

1195

1196 // Before warnings and errors have flushed, flush another commit.

1197 act(() => {

1212 - ReactDOM.render(

1198 + legacyRender(

1199 <>

1200 <Example />

1201 <Noop />

@@ -1252,7 +1238,7 @@ describe('Store', () => {

1238 withErrorsOrWarningsIgnored(

1239 ['Warning: Each child in a list should have a unique "key" prop'],

1240 () => {

1255 - act(() => ReactDOM.render(<Example />, container));

1241 + act(() => legacyRender(<Example />, container));

1242 },

1243 );

1244

@@ -1273,7 +1259,7 @@ describe('Store', () => {

1259 const container = document.createElement('div');

1260 withErrorsOrWarningsIgnored(['test-only:'], () => {

1261 act(() =>

1276 - ReactDOM.render(

1262 + legacyRender(

1263 <React.Fragment>

1264 <Example />

1265 <Example />

@@ -1314,7 +1300,7 @@ describe('Store', () => {

1300 const container = document.createElement('div');

1301 withErrorsOrWarningsIgnored(['test-only:'], () => {

1302 act(() =>

1317 - ReactDOM.render(

1303 + legacyRender(

1304 <React.Fragment>

1305 <Example />

1306 <Example />

@@ -1359,7 +1345,7 @@ describe('Store', () => {

1345 const container = document.createElement('div');

1346 withErrorsOrWarningsIgnored(['test-only:'], () => {

1347 act(() =>

1362 - ReactDOM.render(

1348 + legacyRender(

1349 <React.Fragment>

1350 <Example />

1351 <Example />

@@ -1412,7 +1398,7 @@ describe('Store', () => {

1398 const container = document.createElement('div');

1399 withErrorsOrWarningsIgnored(['test-only:'], () => {

1400 act(() =>

1415 - ReactDOM.render(

1401 + legacyRender(

1402 <React.Fragment>

1403 <ComponentWithError />

1404 <ComponentWithWarning />

@@ -1432,7 +1418,7 @@ describe('Store', () => {

1418

1419 withErrorsOrWarningsIgnored(['test-only:'], () => {

1420 act(() =>

1435 - ReactDOM.render(

1421 + legacyRender(

1422 <React.Fragment>

1423 <ComponentWithWarning />

1424 <ComponentWithWarningAndError />

@@ -1450,7 +1436,7 @@ describe('Store', () => {

1436

1437 withErrorsOrWarningsIgnored(['test-only:'], () => {

1438 act(() =>

1453 - ReactDOM.render(

1439 + legacyRender(

1440 <React.Fragment>

1441 <ComponentWithWarning />

1442 </React.Fragment>,

@@ -1465,7 +1451,7 @@ describe('Store', () => {

1451 `);

1452

1453 withErrorsOrWarningsIgnored(['test-only:'], () => {

1468 - act(() => ReactDOM.render(<React.Fragment />, container));

1454 + act(() => legacyRender(<React.Fragment />, container));

1455 });

1456 expect(store).toMatchInlineSnapshot(`[root]`);

1457 expect(store.errorCount).toBe(0);

packages/react-devtools-shared/src/__tests__/storeComponentFilters-test.js

+20 -11

@@ -12,9 +12,9 @@ import type Store from 'react-devtools-shared/src/devtools/store';

13 describe('Store component filters', () => {

14 let React;

15 - let ReactDOM;

15 let Types;

16 let bridge: FrontendBridge;

17 + let legacyRender;

18 let store: Store;

19 let utils;

20 let internalAct;

@@ -34,10 +34,11 @@ describe('Store component filters', () => {

34 store.recordChangeDescriptions = true;

36 React = require('react');

37 - ReactDOM = require('react-dom');

37 Types = require('react-devtools-shared/src/types');

38 utils = require('./utils');

39 internalAct = require('jest-react').act;

40 +

41 + legacyRender = utils.legacyRender;

42 });

44 it('should throw if filters are updated while profiling', () => {

@@ -56,7 +57,7 @@ describe('Store component filters', () => {

57 const FunctionComponent = () => <div>Hi</div>;

59 act(() =>

59 - ReactDOM.render(

60 + legacyRender(

61 <ClassComponent>

62 <FunctionComponent />

63 </ClassComponent>,

@@ -137,7 +138,7 @@ describe('Store component filters', () => {

138 it('should ignore invalid ElementTypeRoot filter', () => {

139 const Component = () => <div>Hi</div>;

140

140 - act(() => ReactDOM.render(<Component />, document.createElement('div')));

141 + act(() => legacyRender(<Component />, document.createElement('div')));

142 expect(store).toMatchInlineSnapshot(`

143 [root]

144 ▾ <Component>

@@ -165,7 +166,7 @@ describe('Store component filters', () => {

166 const Baz = () => <Text label="baz" />;

167

168 act(() =>

168 - ReactDOM.render(

169 + legacyRender(

170 <React.Fragment>

171 <Foo />

172 <Bar />

@@ -221,7 +222,7 @@ describe('Store component filters', () => {

222 it('should filter by path', () => {

223 const Component = () => <div>Hi</div>;

224

224 - act(() => ReactDOM.render(<Component />, document.createElement('div')));

225 + act(() => legacyRender(<Component />, document.createElement('div')));

226 expect(store).toMatchInlineSnapshot(`

227 [root]

228 ▾ <Component>

@@ -258,7 +259,7 @@ describe('Store component filters', () => {

259 const Bar = () => <Foo />;

260 Bar.displayName = 'Bar(Foo(Component))';

261

261 - act(() => ReactDOM.render(<Bar />, document.createElement('div')));

262 + act(() => legacyRender(<Bar />, document.createElement('div')));

263 expect(store).toMatchInlineSnapshot(`

264 [root]

265 ▾ <Component> [Bar][Foo]

@@ -337,7 +338,7 @@ describe('Store component filters', () => {

338 ];

339

340 const container = document.createElement('div');

340 - act(() => ReactDOM.render(<Wrapper shouldSuspend={true} />, container));

341 + act(() => legacyRender(<Wrapper shouldSuspend={true} />, container));

342 expect(store).toMatchInlineSnapshot(`

343 [root]

344 ▾ <Wrapper>

@@ -345,14 +346,14 @@ describe('Store component filters', () => {

346 <div>

347 `);

348

348 - act(() => ReactDOM.render(<Wrapper shouldSuspend={false} />, container));

349 + act(() => legacyRender(<Wrapper shouldSuspend={false} />, container));

350 expect(store).toMatchInlineSnapshot(`

351 [root]

352 ▾ <Wrapper>

353 <Component>

354 `);

355

355 - act(() => ReactDOM.render(<Wrapper shouldSuspend={true} />, container));

356 + act(() => legacyRender(<Wrapper shouldSuspend={true} />, container));

357 expect(store).toMatchInlineSnapshot(`

358 [root]

359 ▾ <Wrapper>

@@ -376,6 +377,14 @@ describe('Store component filters', () => {

377 console.warn('test-only: render warning');

378 return null;

379 }

380 +

381 + // HACK This require() is needed (somewhere in the test) for this case to pass.

382 + // Without it, the legacyRender() call below causes this test to fail

383 + // because it requires "react-dom" for the first time,

384 + // which causes the console error() and warn() methods to be overridden again,

385 + // effectively disconnecting the DevTools override in 'react-devtools-shared/src/backend/console'.

386 + require('react-dom');

387 +

388 const container = document.createElement('div');

389 utils.withErrorsOrWarningsIgnored(['test-only:'], () => {

390 act(

@@ -386,7 +395,7 @@ describe('Store component filters', () => {

395 ]),

396 );

397 act(() =>

389 - ReactDOM.render(

398 + legacyRender(

399 <React.Fragment>

400 <ComponentWithError />

401 <ComponentWithWarning />

packages/react-devtools-shared/src/__tests__/storeOwners-test.js

+13 -11

@@ -11,8 +11,8 @@ const {printOwnersList} = require('../devtools/utils');

12 describe('Store owners list', () => {

13 let React;

14 - let ReactDOM;

14 let act;

15 + let legacyRender;

16 let store;

18 beforeEach(() => {

@@ -20,8 +20,10 @@ describe('Store owners list', () => {

20 store.collapseNodesByDefault = false;

22 React = require('react');

23 - ReactDOM = require('react-dom');

24 - act = require('./utils').act;

23 +

24 + const utils = require('./utils');

25 + act = utils.act;

26 + legacyRender = utils.legacyRender;

27 });

29 it('should drill through intermediate components', () => {

@@ -36,7 +38,7 @@ describe('Store owners list', () => {

38 const Leaf = () => <div>Leaf</div>;

39 const Intermediate = ({children}) => <Wrapper>{children}</Wrapper>;

39 - act(() => ReactDOM.render(<Root />, document.createElement('div')));

41 + act(() => legacyRender(<Root />, document.createElement('div')));

42 expect(store).toMatchSnapshot('1: mount');

44 const rootID = store.getElementIDAtIndex(0);

@@ -64,7 +66,7 @@ describe('Store owners list', () => {

66 <Wrapper key="wrapper">{children}</Wrapper>,

67 ];

67 - act(() => ReactDOM.render(<Root />, document.createElement('div')));

69 + act(() => legacyRender(<Root />, document.createElement('div')));

70 expect(store).toMatchSnapshot('1: mount');

72 const rootID = store.getElementIDAtIndex(0);

@@ -96,7 +98,7 @@ describe('Store owners list', () => {

98 const container = document.createElement('div');

100 act(() =>

99 - ReactDOM.render(

101 + legacyRender(

102 <Root includeDirect={false} includeIndirect={true} />,

103 container,

104 ),

@@ -109,7 +111,7 @@ describe('Store owners list', () => {

111 ).toMatchSnapshot('2: components owned by <Root>');

112

113 act(() =>

112 - ReactDOM.render(

114 + legacyRender(

115 <Root includeDirect={true} includeIndirect={true} />,

116 container,

117 ),

@@ -121,7 +123,7 @@ describe('Store owners list', () => {

123 ).toMatchSnapshot('4: components owned by <Root>');

124

125 act(() =>

124 - ReactDOM.render(

126 + legacyRender(

127 <Root includeDirect={true} includeIndirect={false} />,

128 container,

129 ),

@@ -133,7 +135,7 @@ describe('Store owners list', () => {

135 ).toMatchSnapshot('6: components owned by <Root>');

136

137 act(() =>

136 - ReactDOM.render(

138 + legacyRender(

139 <Root includeDirect={false} includeIndirect={false} />,

140 container,

141 ),

@@ -153,7 +155,7 @@ describe('Store owners list', () => {

155 const Leaf = () => <div>Leaf</div>;

156

157 const container = document.createElement('div');

156 - act(() => ReactDOM.render(<Root ascending={true} />, container));

158 + act(() => legacyRender(<Root ascending={true} />, container));

159 expect(store).toMatchSnapshot('1: mount (ascending)');

160

161 const rootID = store.getElementIDAtIndex(0);

@@ -161,7 +163,7 @@ describe('Store owners list', () => {

163 printOwnersList(store.getOwnersListForElement(rootID)),

164 ).toMatchSnapshot('2: components owned by <Root>');

165

164 - act(() => ReactDOM.render(<Root ascending={false} />, container));

166 + act(() => legacyRender(<Root ascending={false} />, container));

167 expect(store).toMatchSnapshot('3: update (descending)');

168

169 expect(

packages/react-devtools-shared/src/__tests__/storeStressSync-test.js

+49 -45

@@ -14,6 +14,7 @@ describe('StoreStress (Legacy Mode)', () => {

14 let bridge;

15 let store;

16 let print;

17 + let legacyRender;

19 beforeEach(() => {

20 bridge = global.bridge;

@@ -22,7 +23,10 @@ describe('StoreStress (Legacy Mode)', () => {

24 React = require('react');

25 ReactDOM = require('react-dom');

25 - act = require('./utils').act;

26 +

27 + const utils = require('./utils');

28 + act = utils.act;

29 + legacyRender = utils.legacyRender;

31 print = require('./storeSerializer').print;

32 });

@@ -56,7 +60,7 @@ describe('StoreStress (Legacy Mode)', () => {

61 // 1. Render a normal version of [a, b, c, d, e].

62 let container = document.createElement('div');

59 - act(() => ReactDOM.render(<Parent>{[a, b, c, d, e]}</Parent>, container));

63 + act(() => legacyRender(<Parent>{[a, b, c, d, e]}</Parent>, container));

64 expect(store).toMatchSnapshot('1: abcde');

65 expect(container.textContent).toMatch('abcde');

66 const snapshotForABCDE = print(store);

@@ -119,7 +123,7 @@ describe('StoreStress (Legacy Mode)', () => {

123 container = document.createElement('div');

124

125 // Verify mounting 'abcde'.

122 - act(() => ReactDOM.render(<Parent>{cases[i]}</Parent>, container));

126 + act(() => legacyRender(<Parent>{cases[i]}</Parent>, container));

127 expect(container.textContent).toMatch('abcde');

128 expect(print(store)).toEqual(snapshotForABCDE);

129

@@ -147,7 +151,7 @@ describe('StoreStress (Legacy Mode)', () => {

151 container = document.createElement('div');

152 for (let i = 0; i < cases.length; i++) {

153 // Verify mounting 'abcde'.

150 - act(() => ReactDOM.render(<Parent>{cases[i]}</Parent>, container));

154 + act(() => legacyRender(<Parent>{cases[i]}</Parent>, container));

155 expect(container.textContent).toMatch('abcde');

156 expect(print(store)).toEqual(snapshotForABCDE);

157

@@ -210,7 +214,7 @@ describe('StoreStress (Legacy Mode)', () => {

214 const snapshots = [];

215 let container = document.createElement('div');

216 for (let i = 0; i < steps.length; i++) {

213 - act(() => ReactDOM.render(<Root>{steps[i]}</Root>, container));

217 + act(() => legacyRender(<Root>{steps[i]}</Root>, container));

218 // We snapshot each step once so it doesn't regress.

219 expect(store).toMatchSnapshot();

220 snapshots.push(print(store));

@@ -222,11 +226,11 @@ describe('StoreStress (Legacy Mode)', () => {

226 for (let i = 0; i < steps.length; i++) {

227 for (let j = 0; j < steps.length; j++) {

228 container = document.createElement('div');

225 - act(() => ReactDOM.render(<Root>{steps[i]}</Root>, container));

229 + act(() => legacyRender(<Root>{steps[i]}</Root>, container));

230 expect(print(store)).toMatch(snapshots[i]);

227 - act(() => ReactDOM.render(<Root>{steps[j]}</Root>, container));

231 + act(() => legacyRender(<Root>{steps[j]}</Root>, container));

232 expect(print(store)).toMatch(snapshots[j]);

229 - act(() => ReactDOM.render(<Root>{steps[i]}</Root>, container));

233 + act(() => legacyRender(<Root>{steps[i]}</Root>, container));

234 expect(print(store)).toMatch(snapshots[i]);

235 act(() => ReactDOM.unmountComponentAtNode(container));

236 expect(print(store)).toBe('');

@@ -238,7 +242,7 @@ describe('StoreStress (Legacy Mode)', () => {

242 for (let j = 0; j < steps.length; j++) {

243 container = document.createElement('div');

244 act(() =>

241 - ReactDOM.render(

245 + legacyRender(

246 <Root>

247 <div>{steps[i]}</div>

248 </Root>,

@@ -247,7 +251,7 @@ describe('StoreStress (Legacy Mode)', () => {

251 );

252 expect(print(store)).toMatch(snapshots[i]);

253 act(() =>

250 - ReactDOM.render(

254 + legacyRender(

255 <Root>

256 <div>{steps[j]}</div>

257 </Root>,

@@ -256,7 +260,7 @@ describe('StoreStress (Legacy Mode)', () => {

260 );

261 expect(print(store)).toMatch(snapshots[j]);

262 act(() =>

259 - ReactDOM.render(

263 + legacyRender(

264 <Root>

265 <div>{steps[i]}</div>

266 </Root>,

@@ -312,7 +316,7 @@ describe('StoreStress (Legacy Mode)', () => {

316 let container = document.createElement('div');

317 for (let i = 0; i < steps.length; i++) {

318 act(() =>

315 - ReactDOM.render(

319 + legacyRender(

320 <Root>

321 <X />

322 <React.Suspense fallback={z}>{steps[i]}</React.Suspense>

@@ -331,7 +335,7 @@ describe('StoreStress (Legacy Mode)', () => {

335 // 2. Verify check Suspense can render same steps as initial fallback content.

336 for (let i = 0; i < steps.length; i++) {

337 act(() =>

334 - ReactDOM.render(

338 + legacyRender(

339 <Root>

340 <X />

341 <React.Suspense fallback={steps[i]}>

@@ -355,7 +359,7 @@ describe('StoreStress (Legacy Mode)', () => {

359 // Always start with a fresh container and steps[i].

360 container = document.createElement('div');

361 act(() =>

358 - ReactDOM.render(

362 + legacyRender(

363 <Root>

364 <X />

365 <React.Suspense fallback={z}>{steps[i]}</React.Suspense>

@@ -367,7 +371,7 @@ describe('StoreStress (Legacy Mode)', () => {

371 expect(print(store)).toEqual(snapshots[i]);

372 // Re-render with steps[j].

373 act(() =>

370 - ReactDOM.render(

374 + legacyRender(

375 <Root>

376 <X />

377 <React.Suspense fallback={z}>{steps[j]}</React.Suspense>

@@ -380,7 +384,7 @@ describe('StoreStress (Legacy Mode)', () => {

384 expect(print(store)).toEqual(snapshots[j]);

385 // Check that we can transition back again.

386 act(() =>

383 - ReactDOM.render(

387 + legacyRender(

388 <Root>

389 <X />

390 <React.Suspense fallback={z}>{steps[i]}</React.Suspense>

@@ -402,7 +406,7 @@ describe('StoreStress (Legacy Mode)', () => {

406 // Always start with a fresh container and steps[i].

407 container = document.createElement('div');

408 act(() =>

405 - ReactDOM.render(

409 + legacyRender(

410 <Root>

411 <X />

412 <React.Suspense fallback={steps[i]}>

@@ -418,7 +422,7 @@ describe('StoreStress (Legacy Mode)', () => {

422 expect(print(store)).toEqual(snapshots[i]);

423 // Re-render with steps[j].

424 act(() =>

421 - ReactDOM.render(

425 + legacyRender(

426 <Root>

427 <X />

428 <React.Suspense fallback={steps[j]}>

@@ -435,7 +439,7 @@ describe('StoreStress (Legacy Mode)', () => {

439 expect(print(store)).toEqual(snapshots[j]);

440 // Check that we can transition back again.

441 act(() =>

438 - ReactDOM.render(

442 + legacyRender(

443 <Root>

444 <X />

445 <React.Suspense fallback={steps[i]}>

@@ -461,7 +465,7 @@ describe('StoreStress (Legacy Mode)', () => {

465 // Always start with a fresh container and steps[i].

466 container = document.createElement('div');

467 act(() =>

464 - ReactDOM.render(

468 + legacyRender(

469 <Root>

470 <X />

471 <React.Suspense fallback={z}>{steps[i]}</React.Suspense>

@@ -473,7 +477,7 @@ describe('StoreStress (Legacy Mode)', () => {

477 expect(print(store)).toEqual(snapshots[i]);

478 // Re-render with steps[j].

479 act(() =>

476 - ReactDOM.render(

480 + legacyRender(

481 <Root>

482 <X />

483 <React.Suspense fallback={steps[j]}>

@@ -490,7 +494,7 @@ describe('StoreStress (Legacy Mode)', () => {

494 expect(print(store)).toEqual(snapshots[j]);

495 // Check that we can transition back again.

496 act(() =>

493 - ReactDOM.render(

497 + legacyRender(

498 <Root>

499 <X />

500 <React.Suspense fallback={z}>{steps[i]}</React.Suspense>

@@ -512,7 +516,7 @@ describe('StoreStress (Legacy Mode)', () => {

516 // Always start with a fresh container and steps[i].

517 container = document.createElement('div');

518 act(() =>

515 - ReactDOM.render(

519 + legacyRender(

520 <Root>

521 <X />

522 <React.Suspense fallback={steps[i]}>

@@ -528,7 +532,7 @@ describe('StoreStress (Legacy Mode)', () => {

532 expect(print(store)).toEqual(snapshots[i]);

533 // Re-render with steps[j].

534 act(() =>

531 - ReactDOM.render(

535 + legacyRender(

536 <Root>

537 <X />

538 <React.Suspense fallback={z}>{steps[j]}</React.Suspense>

@@ -541,7 +545,7 @@ describe('StoreStress (Legacy Mode)', () => {

545 expect(print(store)).toEqual(snapshots[j]);

546 // Check that we can transition back again.

547 act(() =>

544 - ReactDOM.render(

548 + legacyRender(

549 <Root>

550 <X />

551 <React.Suspense fallback={steps[i]}>

@@ -567,7 +571,7 @@ describe('StoreStress (Legacy Mode)', () => {

571 // Always start with a fresh container and steps[i].

572 container = document.createElement('div');

573 act(() =>

570 - ReactDOM.render(

574 + legacyRender(

575 <Root>

576 <X />

577 <React.Suspense fallback={steps[j]}>{steps[i]}</React.Suspense>

@@ -605,7 +609,7 @@ describe('StoreStress (Legacy Mode)', () => {

609

610 // Trigger actual fallback.

611 act(() =>

608 - ReactDOM.render(

612 + legacyRender(

613 <Root>

614 <X />

615 <React.Suspense fallback={steps[j]}>

@@ -633,7 +637,7 @@ describe('StoreStress (Legacy Mode)', () => {

637

638 // Switch to primary mode.

639 act(() =>

636 - ReactDOM.render(

640 + legacyRender(

641 <Root>

642 <X />

643 <React.Suspense fallback={steps[j]}>{steps[i]}</React.Suspense>

@@ -723,7 +727,7 @@ describe('StoreStress (Legacy Mode)', () => {

727 let container = document.createElement('div');

728 for (let i = 0; i < steps.length; i++) {

729 act(() =>

726 - ReactDOM.render(

730 + legacyRender(

731 <Root>

732 <X />

733 <React.Suspense fallback={z}>

@@ -747,7 +751,7 @@ describe('StoreStress (Legacy Mode)', () => {

751 const fallbackSnapshots = [];

752 for (let i = 0; i < steps.length; i++) {

753 act(() =>

750 - ReactDOM.render(

754 + legacyRender(

755 <Root>

756 <X />

757 <React.Suspense fallback={steps[i]}>

@@ -773,7 +777,7 @@ describe('StoreStress (Legacy Mode)', () => {

777 // Always start with a fresh container and steps[i].

778 container = document.createElement('div');

779 act(() =>

776 - ReactDOM.render(

780 + legacyRender(

781 <Root>

782 <X />

783 <React.Suspense fallback={z}>

@@ -787,7 +791,7 @@ describe('StoreStress (Legacy Mode)', () => {

791 expect(print(store)).toEqual(snapshots[i]);

792 // Re-render with steps[j].

793 act(() =>

790 - ReactDOM.render(

794 + legacyRender(

795 <Root>

796 <X />

797 <React.Suspense fallback={z}>

@@ -802,7 +806,7 @@ describe('StoreStress (Legacy Mode)', () => {

806 expect(print(store)).toEqual(snapshots[j]);

807 // Check that we can transition back again.

808 act(() =>

805 - ReactDOM.render(

809 + legacyRender(

810 <Root>

811 <X />

812 <React.Suspense fallback={z}>

@@ -826,7 +830,7 @@ describe('StoreStress (Legacy Mode)', () => {

830 // Always start with a fresh container and steps[i].

831 container = document.createElement('div');

832 act(() =>

829 - ReactDOM.render(

833 + legacyRender(

834 <Root>

835 <X />

836 <React.Suspense fallback={steps[i]}>

@@ -845,7 +849,7 @@ describe('StoreStress (Legacy Mode)', () => {

849 expect(print(store)).toEqual(fallbackSnapshots[i]);

850 // Re-render with steps[j].

851 act(() =>

848 - ReactDOM.render(

852 + legacyRender(

853 <Root>

854 <X />

855 <React.Suspense fallback={steps[j]}>

@@ -865,7 +869,7 @@ describe('StoreStress (Legacy Mode)', () => {

869 expect(print(store)).toEqual(fallbackSnapshots[j]);

870 // Check that we can transition back again.

871 act(() =>

868 - ReactDOM.render(

872 + legacyRender(

873 <Root>

874 <X />

875 <React.Suspense fallback={steps[i]}>

@@ -894,7 +898,7 @@ describe('StoreStress (Legacy Mode)', () => {

898 // Always start with a fresh container and steps[i].

899 container = document.createElement('div');

900 act(() =>

897 - ReactDOM.render(

901 + legacyRender(

902 <Root>

903 <X />

904 <React.Suspense fallback={z}>

@@ -908,7 +912,7 @@ describe('StoreStress (Legacy Mode)', () => {

912 expect(print(store)).toEqual(snapshots[i]);

913 // Re-render with steps[j].

914 act(() =>

911 - ReactDOM.render(

915 + legacyRender(

916 <Root>

917 <X />

918 <React.Suspense fallback={steps[j]}>

@@ -923,7 +927,7 @@ describe('StoreStress (Legacy Mode)', () => {

927 expect(print(store)).toEqual(fallbackSnapshots[j]);

928 // Check that we can transition back again.

929 act(() =>

926 - ReactDOM.render(

930 + legacyRender(

931 <Root>

932 <X />

933 <React.Suspense fallback={z}>

@@ -947,7 +951,7 @@ describe('StoreStress (Legacy Mode)', () => {

951 // Always start with a fresh container and steps[i].

952 container = document.createElement('div');

953 act(() =>

950 - ReactDOM.render(

954 + legacyRender(

955 <Root>

956 <X />

957 <React.Suspense fallback={steps[i]}>

@@ -961,7 +965,7 @@ describe('StoreStress (Legacy Mode)', () => {

965 expect(print(store)).toEqual(fallbackSnapshots[i]);

966 // Re-render with steps[j].

967 act(() =>

964 - ReactDOM.render(

968 + legacyRender(

969 <Root>

970 <X />

971 <React.Suspense fallback={steps[i]}>

@@ -976,7 +980,7 @@ describe('StoreStress (Legacy Mode)', () => {

980 expect(print(store)).toEqual(snapshots[j]);

981 // Check that we can transition back again.

982 act(() =>

979 - ReactDOM.render(

983 + legacyRender(

984 <Root>

985 <X />

986 <React.Suspense fallback={steps[i]}>

@@ -1000,7 +1004,7 @@ describe('StoreStress (Legacy Mode)', () => {

1004 // Always start with a fresh container and steps[i].

1005 container = document.createElement('div');

1006 act(() =>

1003 - ReactDOM.render(

1007 + legacyRender(

1008 <Root>

1009 <X />

1010 <React.Suspense fallback={steps[j]}>

@@ -1040,7 +1044,7 @@ describe('StoreStress (Legacy Mode)', () => {

1044

1045 // Trigger actual fallback.

1046 act(() =>

1043 - ReactDOM.render(

1047 + legacyRender(

1048 <Root>

1049 <X />

1050 <React.Suspense fallback={steps[j]}>

@@ -1066,7 +1070,7 @@ describe('StoreStress (Legacy Mode)', () => {

1070

1071 // Switch to primary mode.

1072 act(() =>

1069 - ReactDOM.render(

1073 + legacyRender(

1074 <Root>

1075 <X />

1076 <React.Suspense fallback={steps[j]}>

packages/react-devtools-shared/src/__tests__/treeContext-test.js

+46 -44

@@ -20,6 +20,7 @@ describe('TreeListContext', () => {

20 let ReactDOM;

21 let TestRenderer: ReactTestRenderer;

22 let bridge: FrontendBridge;

23 + let legacyRender;

24 let store: Store;

25 let utils;

26 let withErrorsOrWarningsIgnored;

@@ -35,6 +36,7 @@ describe('TreeListContext', () => {

36 utils = require('./utils');

37 utils.beforeEachProfiling();

39 + legacyRender = utils.legacyRender;

40 withErrorsOrWarningsIgnored = utils.withErrorsOrWarningsIgnored;

42 bridge = global.bridge;

@@ -88,7 +90,7 @@ describe('TreeListContext', () => {

90 const Child = () => null;

92 utils.act(() =>

91 - ReactDOM.render(<Grandparent />, document.createElement('div')),

93 + legacyRender(<Grandparent />, document.createElement('div')),

94 );

96 let renderer;

@@ -214,7 +216,7 @@ describe('TreeListContext', () => {

216 const Child = () => null;

217

218 utils.act(() =>

217 - ReactDOM.render(<Grandparent />, document.createElement('div')),

219 + legacyRender(<Grandparent />, document.createElement('div')),

220 );

221

222 let renderer;

@@ -300,7 +302,7 @@ describe('TreeListContext', () => {

302 const Child = () => null;

303

304 utils.act(() =>

303 - ReactDOM.render(<Grandparent />, document.createElement('div')),

305 + legacyRender(<Grandparent />, document.createElement('div')),

306 );

307

308 let renderer;

@@ -391,7 +393,7 @@ describe('TreeListContext', () => {

393

394 const container = document.createElement('div');

395 utils.act(() =>

394 - ReactDOM.render(

396 + legacyRender(

397 <Grandparent>

398 <Parent>

399 <Child />

@@ -425,7 +427,7 @@ describe('TreeListContext', () => {

427

428 // Remove the child (which should auto-select the parent)

429 await utils.actAsync(() =>

428 - ReactDOM.render(

430 + legacyRender(

431 <Grandparent>

432 <Parent />

433 </Grandparent>,

@@ -458,7 +460,7 @@ describe('TreeListContext', () => {

460 const Child = () => null;

461

462 utils.act(() =>

461 - ReactDOM.render(<Grandparent />, document.createElement('div')),

463 + legacyRender(<Grandparent />, document.createElement('div')),

464 );

465

466 let renderer;

@@ -619,7 +621,7 @@ describe('TreeListContext', () => {

621 const Child = () => null;

622

623 utils.act(() =>

622 - ReactDOM.render(<Grandparent />, document.createElement('div')),

624 + legacyRender(<Grandparent />, document.createElement('div')),

625 );

626

627 let renderer;

@@ -918,7 +920,7 @@ describe('TreeListContext', () => {

920 Qux.displayName = `withHOC(${Qux.name})`;

921

922 utils.act(() =>

921 - ReactDOM.render(

923 + legacyRender(

924 <React.Fragment>

925 <Foo />

926 <Bar />

@@ -990,7 +992,7 @@ describe('TreeListContext', () => {

992 const Baz = () => null;

993

994 utils.act(() =>

993 - ReactDOM.render(

995 + legacyRender(

996 <React.Fragment>

997 <Foo />

998 <Baz />

@@ -1097,7 +1099,7 @@ describe('TreeListContext', () => {

1099 const container = document.createElement('div');

1100

1101 utils.act(() =>

1100 - ReactDOM.render(

1102 + legacyRender(

1103 <React.Fragment>

1104 <Foo />

1105 <Bar />

@@ -1123,7 +1125,7 @@ describe('TreeListContext', () => {

1125 `);

1126

1127 await utils.actAsync(() =>

1126 - ReactDOM.render(

1128 + legacyRender(

1129 <React.Fragment>

1130 <Foo />

1131 <Bar />

@@ -1158,7 +1160,7 @@ describe('TreeListContext', () => {

1160 const container = document.createElement('div');

1161

1162 utils.act(() =>

1161 - ReactDOM.render(

1163 + legacyRender(

1164 <React.Fragment>

1165 <Foo />

1166 <Bar />

@@ -1196,7 +1198,7 @@ describe('TreeListContext', () => {

1198 `);

1199

1200 await utils.actAsync(() =>

1199 - ReactDOM.render(

1201 + legacyRender(

1202 <React.Fragment>

1203 <Foo />

1204 <Bar />

@@ -1242,7 +1244,7 @@ describe('TreeListContext', () => {

1244 const Child = () => null;

1245

1246 utils.act(() =>

1245 - ReactDOM.render(<Grandparent />, document.createElement('div')),

1247 + legacyRender(<Grandparent />, document.createElement('div')),

1248 );

1249

1250 let renderer;

@@ -1283,7 +1285,7 @@ describe('TreeListContext', () => {

1285 const Child = () => null;

1286

1287 const container = document.createElement('div');

1286 - utils.act(() => ReactDOM.render(<Grandparent count={2} />, container));

1288 + utils.act(() => legacyRender(<Grandparent count={2} />, container));

1289

1290 let renderer;

1291 utils.act(() => (renderer = TestRenderer.create(<Contexts />)));

@@ -1306,7 +1308,7 @@ describe('TreeListContext', () => {

1308 `);

1309

1310 await utils.actAsync(() =>

1309 - ReactDOM.render(<Grandparent count={1} />, container),

1311 + legacyRender(<Grandparent count={1} />, container),

1312 );

1313 expect(state).toMatchInlineSnapshot(`

1314 [owners]

@@ -1315,7 +1317,7 @@ describe('TreeListContext', () => {

1317 `);

1318

1319 await utils.actAsync(() =>

1318 - ReactDOM.render(<Grandparent count={0} />, container),

1320 + legacyRender(<Grandparent count={0} />, container),

1321 );

1322 expect(state).toMatchInlineSnapshot(`

1323 [owners]

@@ -1329,7 +1331,7 @@ describe('TreeListContext', () => {

1331

1332 const container = document.createElement('div');

1333 utils.act(() =>

1332 - ReactDOM.render(

1334 + legacyRender(

1335 <Parent>

1336 <Child />

1337 </Parent>,

@@ -1353,7 +1355,7 @@ describe('TreeListContext', () => {

1355 → <Child>

1356 `);

1357

1356 - await utils.actAsync(() => ReactDOM.render(<Parent />, container));

1358 + await utils.actAsync(() => legacyRender(<Parent />, container));

1359 expect(state).toMatchInlineSnapshot(`

1360 [root]

1361 → <Parent>

@@ -1386,7 +1388,7 @@ describe('TreeListContext', () => {

1388 );

1389

1390 const container = document.createElement('div');

1389 - utils.act(() => ReactDOM.render(<Parent />, container));

1391 + utils.act(() => legacyRender(<Parent />, container));

1392

1393 let renderer;

1394 utils.act(() => (renderer = TestRenderer.create(<Contexts />)));

@@ -1493,7 +1495,7 @@ describe('TreeListContext', () => {

1495

1496 it('should handle when there are no errors/warnings', () => {

1497 utils.act(() =>

1496 - ReactDOM.render(

1498 + legacyRender(

1499 <React.Fragment>

1500 <Child />

1501 <Child />

@@ -1556,7 +1558,7 @@ describe('TreeListContext', () => {

1558 it('should cycle through the next errors/warnings and wrap around', () => {

1559 withErrorsOrWarningsIgnored(['test-only:'], () =>

1560 utils.act(() =>

1559 - ReactDOM.render(

1561 + legacyRender(

1562 <React.Fragment>

1563 <Child />

1564 <Child logWarning={true} />

@@ -1617,7 +1619,7 @@ describe('TreeListContext', () => {

1619 it('should cycle through the previous errors/warnings and wrap around', () => {

1620 withErrorsOrWarningsIgnored(['test-only:'], () =>

1621 utils.act(() =>

1620 - ReactDOM.render(

1622 + legacyRender(

1623 <React.Fragment>

1624 <Child />

1625 <Child logWarning={true} />

@@ -1678,14 +1680,14 @@ describe('TreeListContext', () => {

1680 it('should cycle through the next errors/warnings and wrap around with multiple roots', () => {

1681 withErrorsOrWarningsIgnored(['test-only:'], () => {

1682 utils.act(() => {

1681 - ReactDOM.render(

1683 + legacyRender(

1684 <React.Fragment>

1685 <Child />

1686 <Child logWarning={true} />,

1687 </React.Fragment>,

1688 document.createElement('div'),

1689 );

1688 - ReactDOM.render(

1690 + legacyRender(

1691 <React.Fragment>

1692 <Child />

1693 <Child logError={true} />

@@ -1748,14 +1750,14 @@ describe('TreeListContext', () => {

1750 it('should cycle through the previous errors/warnings and wrap around with multiple roots', () => {

1751 withErrorsOrWarningsIgnored(['test-only:'], () => {

1752 utils.act(() => {

1751 - ReactDOM.render(

1753 + legacyRender(

1754 <React.Fragment>

1755 <Child />

1756 <Child logWarning={true} />,

1757 </React.Fragment>,

1758 document.createElement('div'),

1759 );

1758 - ReactDOM.render(

1760 + legacyRender(

1761 <React.Fragment>

1762 <Child />

1763 <Child logError={true} />

@@ -1818,7 +1820,7 @@ describe('TreeListContext', () => {

1820 it('should select the next or previous element relative to the current selection', () => {

1821 withErrorsOrWarningsIgnored(['test-only:'], () =>

1822 utils.act(() =>

1821 - ReactDOM.render(

1823 + legacyRender(

1824 <React.Fragment>

1825 <Child />

1826 <Child logWarning={true} />

@@ -1880,7 +1882,7 @@ describe('TreeListContext', () => {

1882 it('should update correctly when errors/warnings are cleared for a fiber in the list', () => {

1883 withErrorsOrWarningsIgnored(['test-only:'], () =>

1884 utils.act(() =>

1883 - ReactDOM.render(

1885 + legacyRender(

1886 <React.Fragment>

1887 <Child logWarning={true} />

1888 <Child logError={true} />

@@ -1953,7 +1955,7 @@ describe('TreeListContext', () => {

1955 it('should update correctly when errors/warnings are cleared for the currently selected fiber', () => {

1956 withErrorsOrWarningsIgnored(['test-only:'], () =>

1957 utils.act(() =>

1956 - ReactDOM.render(

1958 + legacyRender(

1959 <React.Fragment>

1960 <Child logWarning={true} />

1961 <Child logError={true} />

@@ -1994,7 +1996,7 @@ describe('TreeListContext', () => {

1996

1997 withErrorsOrWarningsIgnored(['test-only:'], () =>

1998 utils.act(() =>

1997 - ReactDOM.render(

1999 + legacyRender(

2000 <React.Fragment>

2001 <Child logWarning={true} />

2002 <Child />

@@ -2028,7 +2030,7 @@ describe('TreeListContext', () => {

2030

2031 withErrorsOrWarningsIgnored(['test-only:'], () =>

2032 utils.act(() =>

2031 - ReactDOM.render(

2033 + legacyRender(

2034 <React.Fragment>

2035 <Child />

2036 <Child logWarning={true} />

@@ -2074,7 +2076,7 @@ describe('TreeListContext', () => {

2076 it('should update correctly when all errors/warnings are cleared', () => {

2077 withErrorsOrWarningsIgnored(['test-only:'], () =>

2078 utils.act(() =>

2077 - ReactDOM.render(

2079 + legacyRender(

2080 <React.Fragment>

2081 <Child logWarning={true} />

2082 <Child logError={true} />

@@ -2124,7 +2126,7 @@ describe('TreeListContext', () => {

2126

2127 withErrorsOrWarningsIgnored(['test-only:'], () =>

2128 utils.act(() =>

2127 - ReactDOM.render(

2129 + legacyRender(

2130 <React.Fragment>

2131 <Wrapper>

2132 <Child logWarning={true} />

@@ -2174,7 +2176,7 @@ describe('TreeListContext', () => {

2176

2177 withErrorsOrWarningsIgnored(['test-only:'], () =>

2178 utils.act(() =>

2177 - ReactDOM.render(

2179 + legacyRender(

2180 <React.Fragment>

2181 <Wrapper>

2182 <Child logWarning={true} />

@@ -2260,7 +2262,7 @@ describe('TreeListContext', () => {

2262

2263 withErrorsOrWarningsIgnored(['test-only:'], () =>

2264 utils.act(() =>

2263 - ReactDOM.render(

2265 + legacyRender(

2266 <React.Fragment>

2267 <Wrapper>

2268 <Child logWarning={true} />

@@ -2318,7 +2320,7 @@ describe('TreeListContext', () => {

2320

2321 withErrorsOrWarningsIgnored(['test-only:'], () =>

2322 utils.act(() =>

2321 - ReactDOM.render(

2323 + legacyRender(

2324 <React.Suspense fallback={null}>

2325 <Child logWarning={true} />

2326 <NeverResolves />

@@ -2354,7 +2356,7 @@ describe('TreeListContext', () => {

2356

2357 withErrorsOrWarningsIgnored(['test-only:'], () =>

2358 utils.act(() =>

2357 - ReactDOM.render(

2359 + legacyRender(

2360 <React.Suspense fallback={null}>

2361 <Child logWarning={true} />

2362 <LazyComponent />

@@ -2373,7 +2375,7 @@ describe('TreeListContext', () => {

2375 await Promise.resolve();

2376 withErrorsOrWarningsIgnored(['test-only:'], () =>

2377 utils.act(() =>

2376 - ReactDOM.render(

2378 + legacyRender(

2379 <React.Suspense fallback={null}>

2380 <Child logWarning={true} />

2381 <LazyComponent />

@@ -2404,7 +2406,7 @@ describe('TreeListContext', () => {

2406

2407 withErrorsOrWarningsIgnored(['test-only:'], () =>

2408 utils.act(() =>

2407 - ReactDOM.render(

2409 + legacyRender(

2410 <React.Suspense fallback={<Fallback />}>

2411 <LazyComponent />

2412 </React.Suspense>,

@@ -2425,7 +2427,7 @@ describe('TreeListContext', () => {

2427 await Promise.resolve();

2428 withErrorsOrWarningsIgnored(['test-only:'], () =>

2429 utils.act(() =>

2428 - ReactDOM.render(

2430 + legacyRender(

2431 <React.Suspense fallback={<Fallback />}>

2432 <LazyComponent />

2433 </React.Suspense>,

@@ -2469,7 +2471,7 @@ describe('TreeListContext', () => {

2471 ['test-only:', 'React will try to recreate this component tree'],

2472 () => {

2473 utils.act(() =>

2472 - ReactDOM.render(

2474 + legacyRender(

2475 <ErrorBoundary>

2476 <BadRender />

2477 </ErrorBoundary>,

@@ -2533,7 +2535,7 @@ describe('TreeListContext', () => {

2535 ['test-only:', 'React will try to recreate this component tree'],

2536 () => {

2537 utils.act(() =>

2536 - ReactDOM.render(

2538 + legacyRender(

2539 <ErrorBoundary>

2540 <LogsWarning />

2541 </ErrorBoundary>,

@@ -2592,7 +2594,7 @@ describe('TreeListContext', () => {

2594 ['test-only:', 'React will try to recreate this component tree'],

2595 () => {

2596 utils.act(() =>

2595 - ReactDOM.render(

2597 + legacyRender(

2598 <ErrorBoundary>

2599 <BadRender />

2600 </ErrorBoundary>,

packages/react-devtools-shared/src/__tests__/useEditableValue-test.js

+9 -9

@@ -10,15 +10,15 @@

10 describe('useEditableValue', () => {

11 let act;

12 let React;

13 - let ReactDOM;

13 + let legacyRender;

14 let useEditableValue;

16 beforeEach(() => {

17 const utils = require('./utils');

18 act = utils.act;

19 + legacyRender = utils.legacyRender;

21 React = require('react');

21 - ReactDOM = require('react-dom');

23 useEditableValue = require('../devtools/views/hooks').useEditableValue;

24 });

@@ -33,7 +33,7 @@ describe('useEditableValue', () => {

33 }

35 const container = document.createElement('div');

36 - ReactDOM.render(<Example />, container);

36 + legacyRender(<Example />, container);

37 expect(state.editableValue).toEqual('NaN');

38 expect(state.externalValue).toEqual(NaN);

39 expect(state.parsedValue).toEqual(NaN);

@@ -51,7 +51,7 @@ describe('useEditableValue', () => {

51 }

53 const container = document.createElement('div');

54 - ReactDOM.render(<Example value={1} />, container);

54 + legacyRender(<Example value={1} />, container);

55 expect(state.editableValue).toEqual('1');

56 expect(state.externalValue).toEqual(1);

57 expect(state.parsedValue).toEqual(1);

@@ -60,7 +60,7 @@ describe('useEditableValue', () => {

61 // If there are NO pending changes,

62 // an update to the external prop value should override the local/pending value.

63 - ReactDOM.render(<Example value={2} />, container);

63 + legacyRender(<Example value={2} />, container);

64 expect(state.editableValue).toEqual('2');

65 expect(state.externalValue).toEqual(2);

66 expect(state.parsedValue).toEqual(2);

@@ -79,7 +79,7 @@ describe('useEditableValue', () => {

79 }

81 const container = document.createElement('div');

82 - ReactDOM.render(<Example value={1} />, container);

82 + legacyRender(<Example value={1} />, container);

83 expect(state.editableValue).toEqual('1');

84 expect(state.externalValue).toEqual(1);

85 expect(state.parsedValue).toEqual(1);

@@ -102,7 +102,7 @@ describe('useEditableValue', () => {

102

103 // If there ARE pending changes,

104 // an update to the external prop value should NOT override the local/pending value.

105 - ReactDOM.render(<Example value={3} />, container);

105 + legacyRender(<Example value={3} />, container);

106 expect(state.editableValue).toEqual('2');

107 expect(state.externalValue).toEqual(3);

108 expect(state.parsedValue).toEqual(2);

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

121 }

122

123 const container = document.createElement('div');

124 - ReactDOM.render(<Example value={1} />, container);

124 + legacyRender(<Example value={1} />, container);

125 expect(state.editableValue).toEqual('1');

126 expect(state.externalValue).toEqual(1);

127 expect(state.parsedValue).toEqual(1);

@@ -154,7 +154,7 @@ describe('useEditableValue', () => {

154 }

155

156 const container = document.createElement('div');

157 - ReactDOM.render(<Example value={1} />, container);

157 + legacyRender(<Example value={1} />, container);

158 expect(state.editableValue).toEqual('1');

159 expect(state.externalValue).toEqual(1);

160 expect(state.parsedValue).toEqual(1);

packages/react-devtools-shared/src/__tests__/utils.js

+20 -4

@@ -162,6 +162,16 @@ export function getRendererID(): number {

162 return parseInt(id, 10);

163 }

164

165 +export function legacyRender(elements, container) {

166 + const ReactDOM = require('react-dom');

167 + withErrorsOrWarningsIgnored(

168 + ['ReactDOM.render is no longer supported in React 18'],

169 + () => {

170 + ReactDOM.render(elements, container);

171 + },

172 + );

173 +}

174 +

175 export function requireTestRenderer(): ReactTestRenderer {

176 let hook;

177 try {

@@ -228,9 +238,15 @@ export function withErrorsOrWarningsIgnored<T: void | Promise<void>>(

238 errorOrWarningMessages: string[],

239 fn: () => T,

240 ): T {

241 + // withErrorsOrWarningsIgnored() may be nested.

242 + const prev = global._ignoredErrorOrWarningMessages || [];

243 +

244 let resetIgnoredErrorOrWarningMessages = true;

245 try {

233 - global._ignoredErrorOrWarningMessages = errorOrWarningMessages;

246 + global._ignoredErrorOrWarningMessages = [

247 + ...prev,

248 + ...errorOrWarningMessages,

249 + ];

250 const maybeThenable = fn();

251 if (

252 maybeThenable !== undefined &&

@@ -239,16 +255,16 @@ export function withErrorsOrWarningsIgnored<T: void | Promise<void>>(

255 resetIgnoredErrorOrWarningMessages = false;

256 return maybeThenable.then(

257 () => {

242 - global._ignoredErrorOrWarningMessages = [];

258 + global._ignoredErrorOrWarningMessages = prev;

259 },

260 () => {

245 - global._ignoredErrorOrWarningMessages = [];

261 + global._ignoredErrorOrWarningMessages = prev;

262 },

263 );

264 }

265 } finally {

266 if (resetIgnoredErrorOrWarningMessages) {

251 - global._ignoredErrorOrWarningMessages = [];

267 + global._ignoredErrorOrWarningMessages = prev;

268 }

269 }

270 }