Skip to content

Commit 4d577fd

Browse files
authored
More Unit Tests for Refs in Hidden Subtrees (#31404)
## Summary While fixing ref lifecycles in hidden subtrees in #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 #31379. ## How did you test this change? Verified unit tests pass: ``` $ yarn $ yarn test ReactFreshIntegration-test.js ```
1 parent 7c8e5e7 commit 4d577fd

File tree

1 file changed

+125
-0
lines changed

1 file changed

+125
-0
lines changed

packages/react-refresh/src/__tests__/ReactFreshIntegration-test.js

Lines changed: 125 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -430,6 +430,131 @@ describe('ReactFreshIntegration', () => {
430430
await patch(code);
431431
});
432432

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+
433558
it('reloads HOCs if they return functions', async () => {
434559
if (__DEV__) {
435560
await render(`

0 commit comments

Comments
 (0)