@samitouri / QOS-React / commits / 7263b4f80a

Update RTR usage in ReactLazy-test (#28598)

- Make all test cases in ReactLazy use RTR with concurrent root - Except, two cases with "legacy mode" specified in description. These are moved to a separate description block where the disableLegacyMode flag is turned off to allow RTR to use legacy root after https://github.com/facebook/react/pull/28498

Jack Pope committed Mar 21, 2024 at 13:28 UTC 7263b4f80a52036060257cc9a0e388351a05f231
1 file changed +185 -164
packages/react-reconciler/src/__tests__/ReactLazy-test.internal.js
+185 -164
@@ -121,11 +121,15 @@ describe('ReactLazy', () => {
121 },
122 }));
123
124 - const root = ReactTestRenderer.create(
125 - <Suspense fallback={<Text text="Loading..." />}>
126 - <LazyText text="Hi" />
127 - </Suspense>,
128 - );
124 + let root;
125 + await act(() => {
126 + root = ReactTestRenderer.create(
127 + <Suspense fallback={<Text text="Loading..." />}>
128 + <LazyText text="Hi" />
129 + </Suspense>,
130 + {unstable_isConcurrent: true},
131 + );
132 + });
133
134 assertLog(['Hi']);
135 expect(root).toMatchRenderedOutput('Hi');
@@ -150,13 +154,17 @@ describe('ReactLazy', () => {
154 }
155 }
156
153 - const root = ReactTestRenderer.create(
154 - <ErrorBoundary>
155 - <Suspense fallback={<Text text="Loading..." />}>
156 - <LazyText text="Hi" />
157 - </Suspense>
158 - </ErrorBoundary>,
159 - );
157 + let root;
158 + await act(() => {
159 + root = ReactTestRenderer.create(
160 + <ErrorBoundary>
161 + <Suspense fallback={<Text text="Loading..." />}>
162 + <LazyText text="Hi" />
163 + </Suspense>
164 + </ErrorBoundary>,
165 + {unstable_isConcurrent: true},
166 + );
167 + });
168 assertLog([]);
169 expect(root).toMatchRenderedOutput('Error: oh no');
170 });
@@ -627,11 +635,15 @@ describe('ReactLazy', () => {
635
636 const LazyClass = lazy(() => fakeImport(C));
637
630 - const root = ReactTestRenderer.create(
631 - <Suspense fallback={<Text text="Loading..." />}>
632 - <LazyClass num={1} />
633 - </Suspense>,
634 - );
638 + let root;
639 + await act(() => {
640 + root = ReactTestRenderer.create(
641 + <Suspense fallback={<Text text="Loading..." />}>
642 + <LazyClass num={1} />
643 + </Suspense>,
644 + {unstable_isConcurrent: true},
645 + );
646 + });
647
648 assertLog(['Loading...']);
649 await waitForAll([]);
@@ -641,20 +653,24 @@ describe('ReactLazy', () => {
653
654 assertLog([]);
655
644 - root.update(
645 - <Suspense fallback={<Text text="Loading..." />}>
646 - <LazyClass num={2} />
647 - </Suspense>,
648 - );
656 + await act(() => {
657 + root.update(
658 + <Suspense fallback={<Text text="Loading..." />}>
659 + <LazyClass num={2} />
660 + </Suspense>,
661 + );
662 + });
663
664 assertLog(['UNSAFE_componentWillMount: A', 'A2']);
665 expect(root).toMatchRenderedOutput('A2');
666
653 - root.update(
654 - <Suspense fallback={<Text text="Loading..." />}>
655 - <LazyClass num={3} />
656 - </Suspense>,
657 - );
667 + await act(() => {
668 + root.update(
669 + <Suspense fallback={<Text text="Loading..." />}>
670 + <LazyClass num={3} />
671 + </Suspense>,
672 + );
673 + });
674 assertLog([
675 'UNSAFE_componentWillReceiveProps: A -> A',
676 'UNSAFE_componentWillUpdate: A -> A',
@@ -1234,7 +1250,7 @@ describe('ReactLazy', () => {
1250 expect(componentStackMessage).toContain('in ResolvedText');
1251 });
1252
1237 - it('should error with a component stack containing Lazy if unresolved', () => {
1253 + it('should error with a component stack containing Lazy if unresolved', async () => {
1254 let componentStackMessage;
1255
1256 const LazyText = lazy(() => ({
@@ -1258,13 +1274,16 @@ describe('ReactLazy', () => {
1274 }
1275 }
1276
1261 - ReactTestRenderer.create(
1262 - <ErrorBoundary>
1263 - <Suspense fallback={<Text text="Loading..." />}>
1264 - <LazyText text="Hi" />
1265 - </Suspense>
1266 - </ErrorBoundary>,
1267 - );
1277 + await act(() => {
1278 + ReactTestRenderer.create(
1279 + <ErrorBoundary>
1280 + <Suspense fallback={<Text text="Loading..." />}>
1281 + <LazyText text="Hi" />
1282 + </Suspense>
1283 + </ErrorBoundary>,
1284 + {unstable_isConcurrent: true},
1285 + );
1286 + });
1287
1288 assertLog([]);
1289
@@ -1362,79 +1381,6 @@ describe('ReactLazy', () => {
1381 expect(root).toMatchRenderedOutput('ba');
1382 });
1383
1365 - it('mount and reorder lazy types (legacy mode)', async () => {
1366 - class Child extends React.Component {
1367 - componentDidMount() {
1368 - Scheduler.log('Did mount: ' + this.props.label);
1369 - }
1370 - componentDidUpdate() {
1371 - Scheduler.log('Did update: ' + this.props.label);
1372 - }
1373 - render() {
1374 - return <Text text={this.props.label} />;
1375 - }
1376 - }
1377 -
1378 - function ChildA({lowerCase}) {
1379 - return <Child label={lowerCase ? 'a' : 'A'} />;
1380 - }
1381 -
1382 - function ChildB({lowerCase}) {
1383 - return <Child label={lowerCase ? 'b' : 'B'} />;
1384 - }
1385 -
1386 - const LazyChildA = lazy(() => {
1387 - Scheduler.log('Init A');
1388 - return fakeImport(ChildA);
1389 - });
1390 - const LazyChildB = lazy(() => {
1391 - Scheduler.log('Init B');
1392 - return fakeImport(ChildB);
1393 - });
1394 - const LazyChildA2 = lazy(() => {
1395 - Scheduler.log('Init A2');
1396 - return fakeImport(ChildA);
1397 - });
1398 - const LazyChildB2 = lazy(() => {
1399 - Scheduler.log('Init B2');
1400 - return fakeImport(ChildB);
1401 - });
1402 -
1403 - function Parent({swap}) {
1404 - return (
1405 - <Suspense fallback={<Text text="Outer..." />}>
1406 - <Suspense fallback={<Text text="Loading..." />}>
1407 - {swap
1408 - ? [
1409 - <LazyChildB2 key="B" lowerCase={true} />,
1410 - <LazyChildA2 key="A" lowerCase={true} />,
1411 - ]
1412 - : [<LazyChildA key="A" />, <LazyChildB key="B" />]}
1413 - </Suspense>
1414 - </Suspense>
1415 - );
1416 - }
1417 -
1418 - const root = ReactTestRenderer.create(<Parent swap={false} />, {
1419 - unstable_isConcurrent: false,
1420 - });
1421 -
1422 - assertLog(['Init A', 'Init B', 'Loading...']);
1423 - expect(root).not.toMatchRenderedOutput('AB');
1424 -
1425 - await resolveFakeImport(ChildA);
1426 - await resolveFakeImport(ChildB);
1427 -
1428 - await waitForAll(['A', 'B', 'Did mount: A', 'Did mount: B']);
1429 - expect(root).toMatchRenderedOutput('AB');
1430 -
1431 - // Swap the position of A and B
1432 - root.update(<Parent swap={true} />);
1433 - assertLog(['Init B2', 'Loading...']);
1434 - await waitForAll(['Init A2', 'b', 'a', 'Did update: b', 'Did update: a']);
1435 - expect(root).toMatchRenderedOutput('ba');
1436 - });
1437 -
1384 it('mount and reorder lazy elements', async () => {
1385 class Child extends React.Component {
1386 componentDidMount() {
@@ -1504,72 +1450,147 @@ describe('ReactLazy', () => {
1450 expect(root).toMatchRenderedOutput('ba');
1451 });
1452
1507 - it('mount and reorder lazy elements (legacy mode)', async () => {
1508 - class Child extends React.Component {
1509 - componentDidMount() {
1510 - Scheduler.log('Did mount: ' + this.props.label);
1511 - }
1512 - componentDidUpdate() {
1513 - Scheduler.log('Did update: ' + this.props.label);
1453 + describe('legacy mode', () => {
1454 + it('mount and reorder lazy elements (legacy mode)', async () => {
1455 + class Child extends React.Component {
1456 + componentDidMount() {
1457 + Scheduler.log('Did mount: ' + this.props.label);
1458 + }
1459 + componentDidUpdate() {
1460 + Scheduler.log('Did update: ' + this.props.label);
1461 + }
1462 + render() {
1463 + return <Text text={this.props.label} />;
1464 + }
1465 }
1515 - render() {
1516 - return <Text text={this.props.label} />;
1466 +
1467 + const ChildA = <Child key="A" label="A" />;
1468 + const lazyChildA = lazy(() => {
1469 + Scheduler.log('Init A');
1470 + return fakeImport(ChildA);
1471 + });
1472 + const ChildB = <Child key="B" label="B" />;
1473 + const lazyChildB = lazy(() => {
1474 + Scheduler.log('Init B');
1475 + return fakeImport(ChildB);
1476 + });
1477 + const ChildA2 = <Child key="A" label="a" />;
1478 + const lazyChildA2 = lazy(() => {
1479 + Scheduler.log('Init A2');
1480 + return fakeImport(ChildA2);
1481 + });
1482 + const ChildB2 = <Child key="B" label="b" />;
1483 + const lazyChildB2 = lazy(() => {
1484 + Scheduler.log('Init B2');
1485 + return fakeImport(ChildB2);
1486 + });
1487 +
1488 + function Parent({swap}) {
1489 + return (
1490 + <Suspense fallback={<Text text="Loading..." />}>
1491 + {swap ? [lazyChildB2, lazyChildA2] : [lazyChildA, lazyChildB]}
1492 + </Suspense>
1493 + );
1494 }
1518 - }
1495
1520 - const ChildA = <Child key="A" label="A" />;
1521 - const lazyChildA = lazy(() => {
1522 - Scheduler.log('Init A');
1523 - return fakeImport(ChildA);
1524 - });
1525 - const ChildB = <Child key="B" label="B" />;
1526 - const lazyChildB = lazy(() => {
1527 - Scheduler.log('Init B');
1528 - return fakeImport(ChildB);
1529 - });
1530 - const ChildA2 = <Child key="A" label="a" />;
1531 - const lazyChildA2 = lazy(() => {
1532 - Scheduler.log('Init A2');
1533 - return fakeImport(ChildA2);
1534 - });
1535 - const ChildB2 = <Child key="B" label="b" />;
1536 - const lazyChildB2 = lazy(() => {
1537 - Scheduler.log('Init B2');
1538 - return fakeImport(ChildB2);
1539 - });
1496 + const root = ReactTestRenderer.create(<Parent swap={false} />, {
1497 + unstable_isConcurrent: false,
1498 + });
1499
1541 - function Parent({swap}) {
1542 - return (
1543 - <Suspense fallback={<Text text="Loading..." />}>
1544 - {swap ? [lazyChildB2, lazyChildA2] : [lazyChildA, lazyChildB]}
1545 - </Suspense>
1546 - );
1547 - }
1500 + assertLog(['Init A', 'Loading...']);
1501 + expect(root).not.toMatchRenderedOutput('AB');
1502
1549 - const root = ReactTestRenderer.create(<Parent swap={false} />, {
1550 - unstable_isConcurrent: false,
1503 + await resolveFakeImport(ChildA);
1504 + // We need to flush to trigger the B to load.
1505 + await waitForAll(['Init B']);
1506 + await resolveFakeImport(ChildB);
1507 +
1508 + await waitForAll(['A', 'B', 'Did mount: A', 'Did mount: B']);
1509 + expect(root).toMatchRenderedOutput('AB');
1510 +
1511 + // Swap the position of A and B
1512 + root.update(<Parent swap={true} />);
1513 + assertLog(['Init B2', 'Loading...']);
1514 + await resolveFakeImport(ChildB2);
1515 + // We need to flush to trigger the second one to load.
1516 + await waitForAll(['Init A2']);
1517 + await resolveFakeImport(ChildA2);
1518 +
1519 + await waitForAll(['b', 'a', 'Did update: b', 'Did update: a']);
1520 + expect(root).toMatchRenderedOutput('ba');
1521 });
1522
1553 - assertLog(['Init A', 'Loading...']);
1554 - expect(root).not.toMatchRenderedOutput('AB');
1523 + it('mount and reorder lazy types (legacy mode)', async () => {
1524 + class Child extends React.Component {
1525 + componentDidMount() {
1526 + Scheduler.log('Did mount: ' + this.props.label);
1527 + }
1528 + componentDidUpdate() {
1529 + Scheduler.log('Did update: ' + this.props.label);
1530 + }
1531 + render() {
1532 + return <Text text={this.props.label} />;
1533 + }
1534 + }
1535
1556 - await resolveFakeImport(ChildA);
1557 - // We need to flush to trigger the B to load.
1558 - await waitForAll(['Init B']);
1559 - await resolveFakeImport(ChildB);
1536 + function ChildA({lowerCase}) {
1537 + return <Child label={lowerCase ? 'a' : 'A'} />;
1538 + }
1539
1561 - await waitForAll(['A', 'B', 'Did mount: A', 'Did mount: B']);
1562 - expect(root).toMatchRenderedOutput('AB');
1540 + function ChildB({lowerCase}) {
1541 + return <Child label={lowerCase ? 'b' : 'B'} />;
1542 + }
1543
1564 - // Swap the position of A and B
1565 - root.update(<Parent swap={true} />);
1566 - assertLog(['Init B2', 'Loading...']);
1567 - await resolveFakeImport(ChildB2);
1568 - // We need to flush to trigger the second one to load.
1569 - await waitForAll(['Init A2']);
1570 - await resolveFakeImport(ChildA2);
1544 + const LazyChildA = lazy(() => {
1545 + Scheduler.log('Init A');
1546 + return fakeImport(ChildA);
1547 + });
1548 + const LazyChildB = lazy(() => {
1549 + Scheduler.log('Init B');
1550 + return fakeImport(ChildB);
1551 + });
1552 + const LazyChildA2 = lazy(() => {
1553 + Scheduler.log('Init A2');
1554 + return fakeImport(ChildA);
1555 + });
1556 + const LazyChildB2 = lazy(() => {
1557 + Scheduler.log('Init B2');
1558 + return fakeImport(ChildB);
1559 + });
1560
1572 - await waitForAll(['b', 'a', 'Did update: b', 'Did update: a']);
1573 - expect(root).toMatchRenderedOutput('ba');
1561 + function Parent({swap}) {
1562 + return (
1563 + <Suspense fallback={<Text text="Outer..." />}>
1564 + <Suspense fallback={<Text text="Loading..." />}>
1565 + {swap
1566 + ? [
1567 + <LazyChildB2 key="B" lowerCase={true} />,
1568 + <LazyChildA2 key="A" lowerCase={true} />,
1569 + ]
1570 + : [<LazyChildA key="A" />, <LazyChildB key="B" />]}
1571 + </Suspense>
1572 + </Suspense>
1573 + );
1574 + }
1575 +
1576 + const root = ReactTestRenderer.create(<Parent swap={false} />, {
1577 + unstable_isConcurrent: false,
1578 + });
1579 +
1580 + assertLog(['Init A', 'Init B', 'Loading...']);
1581 + expect(root).not.toMatchRenderedOutput('AB');
1582 +
1583 + await resolveFakeImport(ChildA);
1584 + await resolveFakeImport(ChildB);
1585 +
1586 + await waitForAll(['A', 'B', 'Did mount: A', 'Did mount: B']);
1587 + expect(root).toMatchRenderedOutput('AB');
1588 +
1589 + // Swap the position of A and B
1590 + root.update(<Parent swap={true} />);
1591 + assertLog(['Init B2', 'Loading...']);
1592 + await waitForAll(['Init A2', 'b', 'a', 'Did update: b', 'Did update: a']);
1593 + expect(root).toMatchRenderedOutput('ba');
1594 + });
1595 });
1596 });