OSSForks/react
1
0
Fork 0
mirror of https://github.com/zebrajr/react.git synced 2026-01-15 12:15:22 +00:00
Code Issues Actions 6 Packages Projects Releases Wiki Activity

More Unit Tests for Refs in Hidden Subtrees (#31404)

Browse Source 
## 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
```
This commit is contained in:
Timothy Yung
2024-11-04 07:46:28 -08:00
committed by GitHub
parent 7c8e5e7ab8
commit 4d577fd216
1 changed files with 125 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

125
packages/react-refresh/src/__tests__/ReactFreshIntegration-test.js vendored
View File

@@ -430,6 +430,131 @@ describe('ReactFreshIntegration', () => {
await patch(code);
});
// @gate __DEV__ && enableActivity
it('ignores ref for functional component in hidden subtree', async () => {
const code = `
import {unstable_Activity as Activity} from 'react';
// Avoid creating a new component on Fast Refresh.
global.A = global.A ?? function A() {
return <div />;
}
const A = global.A;
function hiddenRef() {
throw new Error('Unexpected hiddenRef() invocation.');
}
export default function App() {
return (
<Activity mode="hidden">
<A ref={hiddenRef} />
</Activity>
);
};
`;
await render(code);
await patch(code);
});
// @gate __DEV__ && enableActivity
it('ignores ref for ref forwarding component in hidden subtree', async () => {
const code = `
import {
forwardRef,
unstable_Activity as Activity,
} from 'react';
// Avoid creating a new component on Fast Refresh.
global.A = global.A ?? forwardRef(function A(props, ref) {
return <div ref={ref} />;
});
const A = global.A;
function hiddenRef() {
throw new Error('Unexpected hiddenRef() invocation.');
}
export default function App() {
return (
<Activity mode="hidden">
<A ref={hiddenRef} />
</Activity>
);
};
`;
await render(code);
await patch(code);
});
// @gate __DEV__ && enableActivity
it('ignores ref for simple memo component in hidden subtree', async () => {
const code = `
import {
memo,
unstable_Activity as Activity,
} from 'react';
// Avoid creating a new component on Fast Refresh.
global.A = global.A ?? memo(function A() {
return <div />;
});
const A = global.A;
function hiddenRef() {
throw new Error('Unexpected hiddenRef() invocation.');
}
export default function App() {
return (
<Activity mode="hidden">
<A ref={hiddenRef} />
</Activity>
);
};
`;
await render(code);
await patch(code);
});
// @gate __DEV__ && enableActivity
it('ignores ref for memo component in hidden subtree', async () => {
// A custom compare function means this won't use SimpleMemoComponent.
const code = `
import {
memo,
unstable_Activity as Activity,
} from 'react';
// Avoid creating a new component on Fast Refresh.
global.A = global.A ?? memo(
function A() {
return <div />;
},
() => false,
);
const A = global.A;
function hiddenRef() {
throw new Error('Unexpected hiddenRef() invocation.');
}
export default function App() {
return (
<Activity mode="hidden">
<A ref={hiddenRef} />
</Activity>
);
};
`;
await render(code);
await patch(code);
});
it('reloads HOCs if they return functions', async () => {
if (__DEV__) {
await render(`