Skip to content

Commit 72473a6

Browse files
committed
Add a failing test for Offscreen in StrictMode
1 parent 9fcaf88 commit 72473a6

File tree

1 file changed

+84
-0
lines changed

1 file changed

+84
-0
lines changed
Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
let React;
2+
let Offscreen;
3+
let ReactDOMClient;
4+
let act;
5+
6+
describe('ReactOffscreenStrictMode', () => {
7+
let log;
8+
9+
beforeEach(() => {
10+
jest.resetModules();
11+
log = [];
12+
13+
React = require('react');
14+
Offscreen = React.unstable_Offscreen;
15+
ReactDOMClient = require('react-dom/client');
16+
act = require('jest-react').act;
17+
18+
const ReactFeatureFlags = require('shared/ReactFeatureFlags');
19+
ReactFeatureFlags.enableStrictEffects = __DEV__;
20+
});
21+
22+
function Component({ label }) {
23+
React.useEffect(() => {
24+
log.push(`${label}: useEffect mount`);
25+
return () => log.push(`${label}: useEffect unmount`);
26+
});
27+
28+
React.useLayoutEffect(() => {
29+
log.push(`${label}: useLayoutEffect mount`);
30+
return () => log.push(`${label}: useLayoutEffect unmount`);
31+
});
32+
33+
log.push(`${label}: render`);
34+
35+
return null;
36+
}
37+
38+
if (__DEV__) {
39+
// @gate enableOffscreen
40+
it('should trigger strict effects when offscreen is visible', () => {
41+
const container = document.createElement('div');
42+
const root = ReactDOMClient.createRoot(container, {
43+
unstable_strictMode: true,
44+
});
45+
46+
act(() => {
47+
root.render(
48+
<Offscreen mode="visible">
49+
<Component label="A" />
50+
</Offscreen>
51+
);
52+
});
53+
54+
expect(log).toEqual([
55+
'A: render',
56+
'A: render',
57+
'A: useLayoutEffect mount',
58+
'A: useEffect mount',
59+
'A: useLayoutEffect unmount',
60+
'A: useEffect unmount',
61+
'A: useLayoutEffect mount',
62+
'A: useEffect mount',
63+
]);
64+
});
65+
66+
// @gate enableOffscreen
67+
it('should not trigger strict effects when offscreen is hidden', () => {
68+
const container = document.createElement('div');
69+
const root = ReactDOMClient.createRoot(container, {
70+
unstable_strictMode: true,
71+
});
72+
73+
act(() => {
74+
root.render(
75+
<Offscreen mode="hidden">
76+
<Component label="A" />
77+
</Offscreen>
78+
);
79+
});
80+
81+
expect(log).toEqual([]);
82+
});
83+
}
84+
});

0 commit comments

Comments
 (0)