More Unit Tests for Refs in Hidden Subtrees (#31404)
## Summary While fixing ref lifecycles in hidden subtrees in https://github.com/facebook/react/pull/31379, @rickhanlonii noticed that we could also add more unit tests for other types of tags to prevent future regressions during code refactors. This PR adds more unit tests in the same vein as those added in https://github.com/facebook/react/pull/31379. ## How did you test this change? Verified unit tests pass: ``` $ yarn $ yarn test ReactFreshIntegration-test.js ```
Timothy Yung committed
Nov 4, 2024 at 07:46 UTC
4d577fd216735384a262cbacdcbc5cda18626497
1 file changed
+125
packages/react-refresh/src/__tests__/ReactFreshIntegration-test.js
+125
@@ -430,6 +430,131 @@ describe('ReactFreshIntegration', () => {
430
await patch(code);
431
});
432
433
+ // @gate __DEV__ && enableActivity
434
+ it('ignores ref for functional component in hidden subtree', async () => {
435
+ const code = `
436
+ import {unstable_Activity as Activity} from 'react';
437
+
438
+ // Avoid creating a new component on Fast Refresh.
439
+ global.A = global.A ?? function A() {
440
+ return <div />;
441
+ }
442
+ const A = global.A;
443
+
444
+ function hiddenRef() {
445
+ throw new Error('Unexpected hiddenRef() invocation.');
446
+ }
447
+
448
+ export default function App() {
449
+ return (
450
+ <Activity mode="hidden">
451
+ <A ref={hiddenRef} />
452
+ </Activity>
453
+ );
454
+ };
455
+ `;
456
+
457
+ await render(code);
458
+ await patch(code);
459
+ });
460
+
461
+ // @gate __DEV__ && enableActivity
462
+ it('ignores ref for ref forwarding component in hidden subtree', async () => {
463
+ const code = `
464
+ import {
465
+ forwardRef,
466
+ unstable_Activity as Activity,
467
+ } from 'react';
468
+
469
+ // Avoid creating a new component on Fast Refresh.
470
+ global.A = global.A ?? forwardRef(function A(props, ref) {
471
+ return <div ref={ref} />;
472
+ });
473
+ const A = global.A;
474
+
475
+ function hiddenRef() {
476
+ throw new Error('Unexpected hiddenRef() invocation.');
477
+ }
478
+
479
+ export default function App() {
480
+ return (
481
+ <Activity mode="hidden">
482
+ <A ref={hiddenRef} />
483
+ </Activity>
484
+ );
485
+ };
486
+ `;
487
+
488
+ await render(code);
489
+ await patch(code);
490
+ });
491
+
492
+ // @gate __DEV__ && enableActivity
493
+ it('ignores ref for simple memo component in hidden subtree', async () => {
494
+ const code = `
495
+ import {
496
+ memo,
497
+ unstable_Activity as Activity,
498
+ } from 'react';
499
+
500
+ // Avoid creating a new component on Fast Refresh.
501
+ global.A = global.A ?? memo(function A() {
502
+ return <div />;
503
+ });
504
+ const A = global.A;
505
+
506
+ function hiddenRef() {
507
+ throw new Error('Unexpected hiddenRef() invocation.');
508
+ }
509
+
510
+ export default function App() {
511
+ return (
512
+ <Activity mode="hidden">
513
+ <A ref={hiddenRef} />
514
+ </Activity>
515
+ );
516
+ };
517
+ `;
518
+
519
+ await render(code);
520
+ await patch(code);
521
+ });
522
+
523
+ // @gate __DEV__ && enableActivity
524
+ it('ignores ref for memo component in hidden subtree', async () => {
525
+ // A custom compare function means this won't use SimpleMemoComponent.
526
+ const code = `
527
+ import {
528
+ memo,
529
+ unstable_Activity as Activity,
530
+ } from 'react';
531
+
532
+ // Avoid creating a new component on Fast Refresh.
533
+ global.A = global.A ?? memo(
534
+ function A() {
535
+ return <div />;
536
+ },
537
+ () => false,
538
+ );
539
+ const A = global.A;
540
+
541
+ function hiddenRef() {
542
+ throw new Error('Unexpected hiddenRef() invocation.');
543
+ }
544
+
545
+ export default function App() {
546
+ return (
547
+ <Activity mode="hidden">
548
+ <A ref={hiddenRef} />
549
+ </Activity>
550
+ );
551
+ };
552
+ `;
553
+
554
+ await render(code);
555
+ await patch(code);
556
+ });
557
+
558
it('reloads HOCs if they return functions', async () => {
559
if (__DEV__) {
560
await render(`