Concurrent rendering for ReactART-test (#28521)
## Summary We need to unblock flipping the default for RTR to be concurrent rendering. Update ReactART-test to use `unstable_isConcurrent` in place. ## How did you test this change? `yarn test packages/react-art/src/__tests__/ReactART-test.js`
Jack Pope committed
Mar 18, 2024 at 15:40 UTC
bc13750bdf9ca29c7d23a71c5760c21a78cf3fc4
1 file changed
+102
-55
packages/react-art/src/__tests__/ReactART-test.js
+102
-55
@@ -24,13 +24,8 @@ import Wedge from 'react-art/Wedge';
24
25
// Isolate DOM renderer.
26
jest.resetModules();
27
-
27
const ReactDOMClient = require('react-dom/client');
29
-const act = require('internal-test-utils').act;
30
-
31
-// Isolate test renderer.
32
-jest.resetModules();
33
-const ReactTestRenderer = require('react-test-renderer');
28
+let act = require('internal-test-utils').act;
29
30
// Isolate the noop renderer
31
jest.resetModules();
@@ -449,85 +444,137 @@ describe('ReactART', () => {
444
});
445
446
describe('ReactARTComponents', () => {
452
- it('should generate a <Shape> with props for drawing the Circle', () => {
453
- const circle = ReactTestRenderer.create(
454
- <Circle radius={10} stroke="green" strokeWidth={3} fill="blue" />,
455
- );
447
+ let ReactTestRenderer;
448
+ beforeEach(() => {
449
+ jest.resetModules();
450
+ // Isolate test renderer.
451
+ ReactTestRenderer = require('react-test-renderer');
452
+ act = require('internal-test-utils').act;
453
+ });
454
+
455
+ it('should generate a <Shape> with props for drawing the Circle', async () => {
456
+ let circle;
457
+ await act(() => {
458
+ circle = ReactTestRenderer.create(
459
+ <Circle radius={10} stroke="green" strokeWidth={3} fill="blue" />,
460
+ {unstable_isConcurrent: true},
461
+ );
462
+ });
463
expect(circle.toJSON()).toMatchSnapshot();
464
});
465
459
- it('should generate a <Shape> with props for drawing the Rectangle', () => {
460
- const rectangle = ReactTestRenderer.create(
461
- <Rectangle width={50} height={50} stroke="green" fill="blue" />,
462
- );
466
+ it('should generate a <Shape> with props for drawing the Rectangle', async () => {
467
+ let rectangle;
468
+ await act(() => {
469
+ rectangle = ReactTestRenderer.create(
470
+ <Rectangle width={50} height={50} stroke="green" fill="blue" />,
471
+ {unstable_isConcurrent: true},
472
+ );
473
+ });
474
expect(rectangle.toJSON()).toMatchSnapshot();
475
});
476
466
- it('should generate a <Shape> with positive width when width prop is negative', () => {
467
- const rectangle = ReactTestRenderer.create(
468
- <Rectangle width={-50} height={50} />,
469
- );
477
+ it('should generate a <Shape> with positive width when width prop is negative', async () => {
478
+ let rectangle;
479
+ await act(() => {
480
+ rectangle = ReactTestRenderer.create(
481
+ <Rectangle width={-50} height={50} />,
482
+ {unstable_isConcurrent: true},
483
+ );
484
+ });
485
expect(rectangle.toJSON()).toMatchSnapshot();
486
});
487
473
- it('should generate a <Shape> with positive height when height prop is negative', () => {
474
- const rectangle = ReactTestRenderer.create(
475
- <Rectangle height={-50} width={50} />,
476
- );
488
+ it('should generate a <Shape> with positive height when height prop is negative', async () => {
489
+ let rectangle;
490
+ await act(() => {
491
+ rectangle = ReactTestRenderer.create(
492
+ <Rectangle height={-50} width={50} />,
493
+ {unstable_isConcurrent: true},
494
+ );
495
+ });
496
expect(rectangle.toJSON()).toMatchSnapshot();
497
});
498
480
- it('should generate a <Shape> with a radius property of 0 when top left radius prop is negative', () => {
481
- const rectangle = ReactTestRenderer.create(
482
- <Rectangle radiusTopLeft={-25} width={50} height={50} />,
483
- );
499
+ it('should generate a <Shape> with a radius property of 0 when top left radius prop is negative', async () => {
500
+ let rectangle;
501
+ await act(() => {
502
+ rectangle = ReactTestRenderer.create(
503
+ <Rectangle radiusTopLeft={-25} width={50} height={50} />,
504
+ {unstable_isConcurrent: true},
505
+ );
506
+ });
507
expect(rectangle.toJSON()).toMatchSnapshot();
508
});
509
487
- it('should generate a <Shape> with a radius property of 0 when top right radius prop is negative', () => {
488
- const rectangle = ReactTestRenderer.create(
489
- <Rectangle radiusTopRight={-25} width={50} height={50} />,
490
- );
510
+ it('should generate a <Shape> with a radius property of 0 when top right radius prop is negative', async () => {
511
+ let rectangle;
512
+ await act(() => {
513
+ rectangle = ReactTestRenderer.create(
514
+ <Rectangle radiusTopRight={-25} width={50} height={50} />,
515
+ {unstable_isConcurrent: true},
516
+ );
517
+ });
518
expect(rectangle.toJSON()).toMatchSnapshot();
519
});
520
494
- it('should generate a <Shape> with a radius property of 0 when bottom right radius prop is negative', () => {
495
- const rectangle = ReactTestRenderer.create(
496
- <Rectangle radiusBottomRight={-30} width={50} height={50} />,
497
- );
521
+ it('should generate a <Shape> with a radius property of 0 when bottom right radius prop is negative', async () => {
522
+ let rectangle;
523
+ await act(() => {
524
+ rectangle = ReactTestRenderer.create(
525
+ <Rectangle radiusBottomRight={-30} width={50} height={50} />,
526
+ {unstable_isConcurrent: true},
527
+ );
528
+ });
529
expect(rectangle.toJSON()).toMatchSnapshot();
530
});
531
501
- it('should generate a <Shape> with a radius property of 0 when bottom left radius prop is negative', () => {
502
- const rectangle = ReactTestRenderer.create(
503
- <Rectangle radiusBottomLeft={-25} width={50} height={50} />,
504
- );
532
+ it('should generate a <Shape> with a radius property of 0 when bottom left radius prop is negative', async () => {
533
+ let rectangle;
534
+ await act(() => {
535
+ rectangle = ReactTestRenderer.create(
536
+ <Rectangle radiusBottomLeft={-25} width={50} height={50} />,
537
+ {unstable_isConcurrent: true},
538
+ );
539
+ });
540
expect(rectangle.toJSON()).toMatchSnapshot();
541
});
542
508
- it('should generate a <Shape> where top radius is 0 if the sum of the top radius is greater than width', () => {
509
- const rectangle = ReactTestRenderer.create(
510
- <Rectangle
511
- radiusTopRight={25}
512
- radiusTopLeft={26}
513
- width={50}
514
- height={40}
515
- />,
516
- );
543
+ it('should generate a <Shape> where top radius is 0 if the sum of the top radius is greater than width', async () => {
544
+ let rectangle;
545
+ await act(() => {
546
+ rectangle = ReactTestRenderer.create(
547
+ <Rectangle
548
+ radiusTopRight={25}
549
+ radiusTopLeft={26}
550
+ width={50}
551
+ height={40}
552
+ />,
553
+ {unstable_isConcurrent: true},
554
+ );
555
+ });
556
expect(rectangle.toJSON()).toMatchSnapshot();
557
});
558
520
- it('should generate a <Shape> with props for drawing the Wedge', () => {
521
- const wedge = ReactTestRenderer.create(
522
- <Wedge outerRadius={50} startAngle={0} endAngle={360} fill="blue" />,
523
- );
559
+ it('should generate a <Shape> with props for drawing the Wedge', async () => {
560
+ let wedge;
561
+ await act(() => {
562
+ wedge = ReactTestRenderer.create(
563
+ <Wedge outerRadius={50} startAngle={0} endAngle={360} fill="blue" />,
564
+ {unstable_isConcurrent: true},
565
+ );
566
+ });
567
expect(wedge.toJSON()).toMatchSnapshot();
568
});
569
527
- it('should return null if startAngle equals to endAngle on Wedge', () => {
528
- const wedge = ReactTestRenderer.create(
529
- <Wedge outerRadius={50} startAngle={0} endAngle={0} fill="blue" />,
530
- );
570
+ it('should return null if startAngle equals to endAngle on Wedge', async () => {
571
+ let wedge;
572
+ await act(() => {
573
+ wedge = ReactTestRenderer.create(
574
+ <Wedge outerRadius={50} startAngle={0} endAngle={0} fill="blue" />,
575
+ {unstable_isConcurrent: true},
576
+ );
577
+ });
578
expect(wedge.toJSON()).toBeNull();
579
});
580
});