Skip to content

Commit d855463

Browse files
acdliteacdlite
committed
Rewrite <Cache> element tests to not use cache()
Because we haven't decided on the client caching semantics of cache(), we're going to remove the behavior for now and add it back later. So we need to rewrite these client tests to not depend on cache(). This essentially reverts the test suite back to what it was before facebook#25506. There were also some tests in the ReactUse-test module that depended on cache() too, which I've also updated.
1 parent 256f19a commit d855463

2 files changed

Lines changed: 110 additions & 115 deletions

File tree

‎packages/react-reconciler/src/__tests__/ReactCacheElement-test.js‎

Lines changed: 80 additions & 94 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ let React;
22
let ReactNoop;
33
let Cache;
44
let getCacheSignal;
5+
let getCacheForType;
56
let Scheduler;
67
let assertLog;
78
let act;
@@ -10,13 +11,11 @@ let Activity;
1011
let useCacheRefresh;
1112
let startTransition;
1213
let useState;
13-
let cache;
1414

15-
let getTextCache;
1615
let textCaches;
1716
let seededCache;
1817

19-
describe('ReactCache', () => {
18+
describe('ReactCacheElement', () => {
2019
beforeEach(() => {
2120
jest.resetModules();
2221

@@ -26,9 +25,9 @@ describe('ReactCache', () => {
2625
Scheduler = require('scheduler');
2726
act = require('internal-test-utils').act;
2827
Suspense = React.Suspense;
29-
cache = React.cache;
3028
Activity = React.unstable_Activity;
3129
getCacheSignal = React.unstable_getCacheSignal;
30+
getCacheForType = React.unstable_getCacheForType;
3231
useCacheRefresh = React.unstable_useCacheRefresh;
3332
startTransition = React.startTransition;
3433
useState = React.useState;
@@ -38,59 +37,57 @@ describe('ReactCache', () => {
3837

3938
textCaches = [];
4039
seededCache = null;
40+
});
4141

42-
if (gate(flags => flags.enableCache)) {
43-
getTextCache = cache(() => {
44-
if (seededCache !== null) {
45-
// Trick to seed a cache before it exists.
46-
// TODO: Need a built-in API to seed data before the initial render (i.e.
47-
// not a refresh because nothing has mounted yet).
48-
const textCache = seededCache;
49-
seededCache = null;
50-
return textCache;
51-
}
52-
53-
const data = new Map();
54-
const version = textCaches.length + 1;
55-
const textCache = {
56-
version,
57-
data,
58-
resolve(text) {
59-
const record = data.get(text);
60-
if (record === undefined) {
61-
const newRecord = {
62-
status: 'resolved',
63-
value: text,
64-
cleanupScheduled: false,
65-
};
66-
data.set(text, newRecord);
67-
} else if (record.status === 'pending') {
68-
record.value.resolve();
69-
}
70-
},
71-
reject(text, error) {
72-
const record = data.get(text);
73-
if (record === undefined) {
74-
const newRecord = {
75-
status: 'rejected',
76-
value: error,
77-
cleanupScheduled: false,
78-
};
79-
data.set(text, newRecord);
80-
} else if (record.status === 'pending') {
81-
record.value.reject();
82-
}
83-
},
84-
};
85-
textCaches.push(textCache);
86-
return textCache;
87-
});
42+
function createTextCache() {
43+
if (seededCache !== null) {
44+
// Trick to seed a cache before it exists.
45+
// TODO: Need a built-in API to seed data before the initial render (i.e.
46+
// not a refresh because nothing has mounted yet).
47+
const textCache = seededCache;
48+
seededCache = null;
49+
return textCache;
8850
}
89-
});
51+
52+
const data = new Map();
53+
const version = textCaches.length + 1;
54+
const textCache = {
55+
version,
56+
data,
57+
resolve(text) {
58+
const record = data.get(text);
59+
if (record === undefined) {
60+
const newRecord = {
61+
status: 'resolved',
62+
value: text,
63+
cleanupScheduled: false,
64+
};
65+
data.set(text, newRecord);
66+
} else if (record.status === 'pending') {
67+
record.value.resolve();
68+
}
69+
},
70+
reject(text, error) {
71+
const record = data.get(text);
72+
if (record === undefined) {
73+
const newRecord = {
74+
status: 'rejected',
75+
value: error,
76+
cleanupScheduled: false,
77+
};
78+
data.set(text, newRecord);
79+
} else if (record.status === 'pending') {
80+
record.value.reject();
81+
}
82+
},
83+
};
84+
textCaches.push(textCache);
85+
return textCache;
86+
}
9087

9188
function readText(text) {
9289
const signal = getCacheSignal ? getCacheSignal() : null;
93-
const textCache = getTextCache();
90+
const textCache = getCacheForType(createTextCache);
9491
const record = textCache.data.get(text);
9592
if (record !== undefined) {
9693
if (!record.cleanupScheduled) {
@@ -167,7 +164,7 @@ describe('ReactCache', () => {
167164

168165
function seedNextTextCache(text) {
169166
if (seededCache === null) {
170-
seededCache = getTextCache();
167+
seededCache = createTextCache();
171168
}
172169
seededCache.resolve(text);
173170
}
@@ -182,7 +179,7 @@ describe('ReactCache', () => {
182179
}
183180
}
184181

185-
// @gate enableCacheElement && enableCache
182+
// @gate enableCacheElement
186183
test('render Cache component', async () => {
187184
const root = ReactNoop.createRoot();
188185
await act(() => {
@@ -191,7 +188,7 @@ describe('ReactCache', () => {
191188
expect(root).toMatchRenderedOutput('Hi');
192189
});
193190

194-
// @gate enableCacheElement && enableCache
191+
// @gate enableCacheElement
195192
test('mount new data', async () => {
196193
const root = ReactNoop.createRoot();
197194
await act(() => {
@@ -247,7 +244,7 @@ describe('ReactCache', () => {
247244
expect(root).toMatchRenderedOutput('Bye');
248245
});
249246

250-
// @gate enableCacheElement && enableCache
247+
// @gate enableCacheElement
251248
test('multiple new Cache boundaries in the same mount share the same, fresh root cache', async () => {
252249
function App() {
253250
return (
@@ -290,7 +287,7 @@ describe('ReactCache', () => {
290287
expect(root).toMatchRenderedOutput('Bye');
291288
});
292289

293-
// @gate enableCacheElement && enableCache
290+
// @gate enableCacheElement
294291
test('multiple new Cache boundaries in the same update share the same, fresh cache', async () => {
295292
function App({showMore}) {
296293
return showMore ? (
@@ -342,7 +339,7 @@ describe('ReactCache', () => {
342339
expect(root).toMatchRenderedOutput('Bye');
343340
});
344341

345-
// @gate enableCacheElement && enableCache
342+
// @gate enableCacheElement
346343
test(
347344
'nested cache boundaries share the same cache as the root during ' +
348345
'the initial render',
@@ -382,7 +379,7 @@ describe('ReactCache', () => {
382379
},
383380
);
384381

385-
// @gate enableCacheElement && enableCache
382+
// @gate enableCacheElement
386383
test('new content inside an existing Cache boundary should re-use already cached data', async () => {
387384
function App({showMore}) {
388385
return (
@@ -426,7 +423,7 @@ describe('ReactCache', () => {
426423
expect(root).toMatchRenderedOutput('Bye');
427424
});
428425

429-
// @gate enableCacheElement && enableCache
426+
// @gate enableCacheElement
430427
test('a new Cache boundary uses fresh cache', async () => {
431428
// The only difference from the previous test is that the "Show More"
432429
// content is wrapped in a nested <Cache /> boundary
@@ -484,7 +481,7 @@ describe('ReactCache', () => {
484481
expect(root).toMatchRenderedOutput('Bye!');
485482
});
486483

487-
// @gate enableCacheElement && enableCache
484+
// @gate enableCacheElement
488485
test('inner/outer cache boundaries uses the same cache instance on initial render', async () => {
489486
const root = ReactNoop.createRoot();
490487

@@ -566,7 +563,7 @@ describe('ReactCache', () => {
566563
expect(root).toMatchRenderedOutput('Bye');
567564
});
568565

569-
// @gate enableCacheElement && enableCache
566+
// @gate enableCacheElement
570567
test('inner/ outer cache boundaries added in the same update use the same cache instance', async () => {
571568
const root = ReactNoop.createRoot();
572569

@@ -655,7 +652,6 @@ describe('ReactCache', () => {
655652
expect(root).toMatchRenderedOutput('Bye');
656653
});
657654

658-
// @gate enableCache
659655
test('refresh a cache boundary', async () => {
660656
let refresh;
661657
function App() {
@@ -705,7 +701,7 @@ describe('ReactCache', () => {
705701
expect(root).toMatchRenderedOutput('Bye');
706702
});
707703

708-
// @gate enableCacheElement && enableCache
704+
// @gate enableCacheElement
709705
test('refresh the root cache', async () => {
710706
let refresh;
711707
function App() {
@@ -753,7 +749,7 @@ describe('ReactCache', () => {
753749
expect(root).toMatchRenderedOutput('Bye');
754750
});
755751

756-
// @gate enableCacheElement && enableCache
752+
// @gate enableCacheElement
757753
test('refresh the root cache without a transition', async () => {
758754
let refresh;
759755
function App() {
@@ -808,20 +804,11 @@ describe('ReactCache', () => {
808804
expect(root).toMatchRenderedOutput('Bye');
809805
});
810806

811-
// @gate enableCacheElement && enableCache
807+
// @gate enableCacheElement
812808
test('refresh a cache with seed data', async () => {
813-
let refreshWithSeed;
809+
let refresh;
814810
function App() {
815-
const refresh = useCacheRefresh();
816-
const [seed, setSeed] = useState({fn: null});
817-
if (seed.fn) {
818-
seed.fn();
819-
seed.fn = null;
820-
}
821-
refreshWithSeed = fn => {
822-
setSeed({fn});
823-
refresh();
824-
};
811+
refresh = useCacheRefresh();
825812
return <AsyncText showVersion={true} text="A" />;
826813
}
827814

@@ -851,12 +838,11 @@ describe('ReactCache', () => {
851838
// server mutation.
852839
// TODO: Seeding multiple typed textCaches. Should work by calling `refresh`
853840
// multiple times with different key/value pairs
854-
startTransition(() =>
855-
refreshWithSeed(() => {
856-
const textCache = getTextCache();
857-
textCache.resolve('A');
858-
}),
859-
);
841+
startTransition(() => {
842+
const textCache = createTextCache();
843+
textCache.resolve('A');
844+
startTransition(() => refresh(createTextCache, textCache));
845+
});
860846
});
861847
// The root should re-render without a cache miss.
862848
// The cache is not cleared up yet, since it's still reference by the root
@@ -871,7 +857,7 @@ describe('ReactCache', () => {
871857
expect(root).toMatchRenderedOutput('Bye');
872858
});
873859

874-
// @gate enableCacheElement && enableCache
860+
// @gate enableCacheElement
875861
test('refreshing a parent cache also refreshes its children', async () => {
876862
let refreshShell;
877863
function RefreshShell() {
@@ -946,7 +932,7 @@ describe('ReactCache', () => {
946932
expect(root).toMatchRenderedOutput('Bye!');
947933
});
948934

949-
// @gate enableCacheElement && enableCache
935+
// @gate enableCacheElement
950936
test(
951937
'refreshing a cache boundary does not refresh the other boundaries ' +
952938
'that mounted at the same time (i.e. the ones that share the same cache)',
@@ -1027,7 +1013,7 @@ describe('ReactCache', () => {
10271013
},
10281014
);
10291015

1030-
// @gate enableCacheElement && enableCache
1016+
// @gate enableCacheElement
10311017
test(
10321018
'mount a new Cache boundary in a sibling while simultaneously ' +
10331019
'resolving a Suspense boundary',
@@ -1096,7 +1082,7 @@ describe('ReactCache', () => {
10961082
},
10971083
);
10981084

1099-
// @gate enableCacheElement && enableCache
1085+
// @gate enableCacheElement
11001086
test('cache pool is cleared once transitions that depend on it commit their shell', async () => {
11011087
function Child({text}) {
11021088
return (
@@ -1189,7 +1175,7 @@ describe('ReactCache', () => {
11891175
expect(root).toMatchRenderedOutput('Bye!');
11901176
});
11911177

1192-
// @gate enableCacheElement && enableCache
1178+
// @gate enableCacheElement
11931179
test('cache pool is not cleared by arbitrary commits', async () => {
11941180
function App() {
11951181
return (
@@ -1268,7 +1254,7 @@ describe('ReactCache', () => {
12681254
expect(root).toMatchRenderedOutput('Bye!');
12691255
});
12701256

1271-
// @gate enableCacheElement && enableCache
1257+
// @gate enableCacheElement
12721258
test('cache boundary uses a fresh cache when its key changes', async () => {
12731259
const root = ReactNoop.createRoot();
12741260
seedNextTextCache('A');
@@ -1307,7 +1293,7 @@ describe('ReactCache', () => {
13071293
expect(root).toMatchRenderedOutput('Bye!');
13081294
});
13091295

1310-
// @gate enableCacheElement && enableCache
1296+
// @gate enableCacheElement
13111297
test('overlapping transitions after an initial mount use the same fresh cache', async () => {
13121298
const root = ReactNoop.createRoot();
13131299
await act(() => {
@@ -1375,7 +1361,7 @@ describe('ReactCache', () => {
13751361
expect(root).toMatchRenderedOutput('Bye!');
13761362
});
13771363

1378-
// @gate enableCacheElement && enableCache
1364+
// @gate enableCacheElement
13791365
test('overlapping updates after an initial mount use the same fresh cache', async () => {
13801366
const root = ReactNoop.createRoot();
13811367
await act(() => {
@@ -1438,7 +1424,7 @@ describe('ReactCache', () => {
14381424
expect(root).toMatchRenderedOutput('Bye!');
14391425
});
14401426

1441-
// @gate enableCacheElement && enableCache
1427+
// @gate enableCacheElement
14421428
test('cleans up cache only used in an aborted transition', async () => {
14431429
const root = ReactNoop.createRoot();
14441430
seedNextTextCache('A');
@@ -1493,7 +1479,7 @@ describe('ReactCache', () => {
14931479
expect(root).toMatchRenderedOutput('Bye!');
14941480
});
14951481

1496-
// @gate enableCacheElement && enableCache
1482+
// @gate enableCacheElement
14971483
test.skip('if a root cache refresh never commits its fresh cache is released', async () => {
14981484
const root = ReactNoop.createRoot();
14991485
let refresh;
@@ -1535,7 +1521,7 @@ describe('ReactCache', () => {
15351521
expect(root).toMatchRenderedOutput('Bye!');
15361522
});
15371523

1538-
// @gate enableCacheElement && enableCache
1524+
// @gate enableCacheElement
15391525
test.skip('if a cache boundary refresh never commits its fresh cache is released', async () => {
15401526
const root = ReactNoop.createRoot();
15411527
let refresh;

0 commit comments

Comments
 (0)