7263b4f80a · samitouri/QOS-React-2

@@ -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 });

Update RTR usage in ReactLazy-test (#28598)