{"patch":"diff --git a\/packages\/react-reconciler\/src\/__tests__\/ReactCache-test.js b\/packages\/react-reconciler\/src\/__tests__\/ReactCache-test.js\nindex 1574fc2228..ef14b6588e 100644\n--- a\/packages\/react-reconciler\/src\/__tests__\/ReactCache-test.js\n+++ b\/packages\/react-reconciler\/src\/__tests__\/ReactCache-test.js\n@@ -8,8 +8,8 @@ let useCacheRefresh;\n let startTransition;\n let useState;\n \n-let textService;\n-let textServiceVersion;\n+let caches;\n+let seededCache;\n \n describe('ReactCache', () => {\n beforeEach(() => {\n@@ -25,20 +25,57 @@ describe('ReactCache', () => {\n startTransition = React.unstable_startTransition;\n useState = React.useState;\n \n- \/\/ Represents some data service that returns text. It likely has additional\n- \/\/ caching layers, like a CDN or the local browser cache. It can be mutated\n- \/\/ or emptied independently of the React cache.\n- textService = new Map();\n- textServiceVersion = 1;\n+ caches = [];\n+ seededCache = null;\n });\n \n function createTextCache() {\n- return new Map();\n+ if (seededCache !== null) {\n+ \/\/ Trick to seed a cache before it exists.\n+ \/\/ TODO: Need a built-in API to seed data before the initial render (i.e.\n+ \/\/ not a refresh because nothing has mounted yet).\n+ const cache = seededCache;\n+ seededCache = null;\n+ return cache;\n+ }\n+\n+ const data = new Map();\n+ const version = caches.length + 1;\n+ const cache = {\n+ version,\n+ data,\n+ resolve(text) {\n+ const record = data.get(text);\n+ if (record === undefined) {\n+ const newRecord = {\n+ status: 'resolved',\n+ value: text,\n+ };\n+ data.set(text, newRecord);\n+ } else if (record.status === 'pending') {\n+ record.value.resolve();\n+ }\n+ },\n+ reject(text, error) {\n+ const record = data.get(text);\n+ if (record === undefined) {\n+ const newRecord = {\n+ status: 'rejected',\n+ value: error,\n+ };\n+ data.set(text, newRecord);\n+ } else if (record.status === 'pending') {\n+ record.value.reject();\n+ }\n+ },\n+ };\n+ caches.push(cache);\n+ return cache;\n }\n \n function readText(text) {\n const textCache = getCacheForType(createTextCache);\n- const record = textCache.get(text);\n+ const record = textCache.data.get(text);\n if (record !== undefined) {\n switch (record.status) {\n case 'pending':\n@@ -46,28 +83,17 @@ describe('ReactCache', () => {\n case 'rejected':\n throw record.value;\n case 'resolved':\n- return record.value;\n+ return textCache.version;\n }\n } else {\n Scheduler.unstable_yieldValue(`Cache miss! [${text}]`);\n \n- let request = textService.get(text);\n- if (request === undefined) {\n- let resolve;\n- let reject;\n- request = new Promise((res, rej) => {\n- resolve = res;\n- reject = rej;\n- });\n- request.resolve = resolve;\n- request.reject = reject;\n-\n- \/\/ Add the request to a backing cache. This may outlive the lifetime\n- \/\/ of the component that is currently reading the data.\n- textService.set(text, request);\n- }\n-\n- const thenable = request.then(\n+ let resolve;\n+ let reject;\n+ const thenable = new Promise((res, rej) => {\n+ resolve = res;\n+ reject = rej;\n+ }).then(\n value => {\n if (newRecord.status === 'pending') {\n newRecord.status = 'resolved';\n@@ -81,36 +107,19 @@ describe('ReactCache', () => {\n }\n },\n );\n+ thenable.resolve = resolve;\n+ thenable.reject = reject;\n \n const newRecord = {\n- ping: null,\n status: 'pending',\n value: thenable,\n };\n- textCache.set(text, newRecord);\n+ textCache.data.set(text, newRecord);\n \n throw thenable;\n }\n }\n \n- function mutateRemoteTextService() {\n- textService = new Map();\n- textServiceVersion++;\n- }\n-\n- function resolveText(text) {\n- const request = textService.get(text);\n- if (request !== undefined) {\n- request.resolve(textServiceVersion);\n- return request;\n- } else {\n- const newRequest = Promise.resolve(textServiceVersion);\n- newRequest.resolve = newRequest.reject = () => {};\n- textService.set(text, newRequest);\n- return newRequest;\n- }\n- }\n-\n function Text({text}) {\n Scheduler.unstable_yieldValue(text);\n return text;\n@@ -123,6 +132,23 @@ describe('ReactCache', () => {\n return fullText;\n }\n \n+ function seedNextTextCache(text) {\n+ if (seededCache === null) {\n+ seededCache = createTextCache();\n+ }\n+ seededCache.resolve(text);\n+ }\n+\n+ function resolveMostRecentTextCache(text) {\n+ if (caches.length === 0) {\n+ throw Error('Cache does not exist.');\n+ } else {\n+ \/\/ Resolve the most recently created cache. An older cache can by\n+ \/\/ resolved with `caches[index].resolve(text)`.\n+ caches[caches.length - 1].resolve(text);\n+ }\n+ }\n+\n \/\/ @gate experimental\n test('render Cache component', async () => {\n const root = ReactNoop.createRoot();\n@@ -148,7 +174,7 @@ describe('ReactCache', () => {\n expect(root).toMatchRenderedOutput('Loading...');\n \n await ReactNoop.act(async () => {\n- await resolveText('A');\n+ resolveMostRecentTextCache('A');\n });\n expect(Scheduler).toHaveYielded(['A']);\n expect(root).toMatchRenderedOutput('A');\n@@ -168,7 +194,7 @@ describe('ReactCache', () => {\n expect(root).toMatchRenderedOutput('Loading...');\n \n await ReactNoop.act(async () => {\n- await resolveText('A');\n+ resolveMostRecentTextCache('A');\n });\n expect(Scheduler).toHaveYielded(['A']);\n expect(root).toMatchRenderedOutput('A');\n@@ -207,7 +233,7 @@ describe('ReactCache', () => {\n expect(root).toMatchRenderedOutput('Loading...Loading...');\n \n await ReactNoop.act(async () => {\n- await resolveText('A');\n+ resolveMostRecentTextCache('A');\n });\n expect(Scheduler).toHaveYielded(['A', 'A']);\n expect(root).toMatchRenderedOutput('AA');\n@@ -239,7 +265,7 @@ describe('ReactCache', () => {\n expect(root).toMatchRenderedOutput('Loading...');\n \n await ReactNoop.act(async () => {\n- await resolveText('A');\n+ resolveMostRecentTextCache('A');\n });\n expect(Scheduler).toHaveYielded(['A', 'A']);\n expect(root).toMatchRenderedOutput('AA');\n@@ -265,22 +291,14 @@ describe('ReactCache', () => {\n \n const root = ReactNoop.createRoot();\n await ReactNoop.act(async () => {\n- await resolveText('A');\n+ seedNextTextCache('A');\n root.render();\n });\n- expect(Scheduler).toHaveYielded([\n- 'Cache miss! [A]',\n- 'Loading...',\n- 'A [v1]',\n- ]);\n+ expect(Scheduler).toHaveYielded(['A [v1]']);\n expect(root).toMatchRenderedOutput('A [v1]');\n \n- \/\/ Simulate a server mutation.\n- mutateRemoteTextService();\n-\n \/\/ Add a new cache boundary\n await ReactNoop.act(async () => {\n- await resolveText('A');\n root.render();\n });\n expect(Scheduler).toHaveYielded([\n@@ -314,22 +332,14 @@ describe('ReactCache', () => {\n \n const root = ReactNoop.createRoot();\n await ReactNoop.act(async () => {\n- await resolveText('A');\n+ seedNextTextCache('A');\n root.render();\n });\n- expect(Scheduler).toHaveYielded([\n- 'Cache miss! [A]',\n- 'Loading...',\n- 'A [v1]',\n- ]);\n+ expect(Scheduler).toHaveYielded(['A [v1]']);\n expect(root).toMatchRenderedOutput('A [v1]');\n \n- \/\/ Simulate a server mutation.\n- mutateRemoteTextService();\n-\n \/\/ Add a new cache boundary\n await ReactNoop.act(async () => {\n- await resolveText('A');\n root.render();\n });\n expect(Scheduler).toHaveYielded([\n@@ -337,8 +347,12 @@ describe('ReactCache', () => {\n \/\/ New tree should load fresh data.\n 'Cache miss! [A]',\n 'Loading...',\n- 'A [v2]',\n ]);\n+ expect(root).toMatchRenderedOutput('A [v1]Loading...');\n+ await ReactNoop.act(async () => {\n+ resolveMostRecentTextCache('A');\n+ });\n+ expect(Scheduler).toHaveYielded(['A [v2]']);\n expect(root).toMatchRenderedOutput('A [v1]A [v2]');\n });\n \n@@ -389,7 +403,7 @@ describe('ReactCache', () => {\n expect(root).toMatchRenderedOutput('Loading shell...');\n \n await ReactNoop.act(async () => {\n- await resolveText('A');\n+ resolveMostRecentTextCache('A');\n });\n expect(Scheduler).toHaveYielded([\n 'Shell',\n@@ -406,7 +420,7 @@ describe('ReactCache', () => {\n );\n \n await ReactNoop.act(async () => {\n- await resolveText('B');\n+ resolveMostRecentTextCache('B');\n });\n expect(Scheduler).toHaveYielded(['Content']);\n expect(root).toMatchRenderedOutput(\n@@ -440,13 +454,12 @@ describe('ReactCache', () => {\n expect(root).toMatchRenderedOutput('Loading...');\n \n await ReactNoop.act(async () => {\n- await resolveText('A');\n+ resolveMostRecentTextCache('A');\n });\n expect(Scheduler).toHaveYielded(['A [v1]']);\n expect(root).toMatchRenderedOutput('A [v1]');\n \n- \/\/ Mutate the text service, then refresh for new data.\n- mutateRemoteTextService();\n+ \/\/ Fefresh for new data.\n await ReactNoop.act(async () => {\n startTransition(() => refresh());\n });\n@@ -454,7 +467,7 @@ describe('ReactCache', () => {\n expect(root).toMatchRenderedOutput('A [v1]');\n \n await ReactNoop.act(async () => {\n- await resolveText('A');\n+ resolveMostRecentTextCache('A');\n });\n \/\/ Note that the version has updated\n expect(Scheduler).toHaveYielded(['A [v2]']);\n@@ -482,13 +495,12 @@ describe('ReactCache', () => {\n expect(root).toMatchRenderedOutput('Loading...');\n \n await ReactNoop.act(async () => {\n- await resolveText('A');\n+ resolveMostRecentTextCache('A');\n });\n expect(Scheduler).toHaveYielded(['A [v1]']);\n expect(root).toMatchRenderedOutput('A [v1]');\n \n- \/\/ Mutate the text service, then refresh for new data.\n- mutateRemoteTextService();\n+ \/\/ Refresh for new data.\n await ReactNoop.act(async () => {\n startTransition(() => refresh());\n });\n@@ -496,7 +508,7 @@ describe('ReactCache', () => {\n expect(root).toMatchRenderedOutput('A [v1]');\n \n await ReactNoop.act(async () => {\n- await resolveText('A');\n+ resolveMostRecentTextCache('A');\n });\n \/\/ Note that the version has updated\n expect(Scheduler).toHaveYielded(['A [v2]']);\n@@ -526,25 +538,20 @@ describe('ReactCache', () => {\n expect(root).toMatchRenderedOutput('Loading...');\n \n await ReactNoop.act(async () => {\n- await resolveText('A');\n+ resolveMostRecentTextCache('A');\n });\n expect(Scheduler).toHaveYielded(['A [v1]']);\n expect(root).toMatchRenderedOutput('A [v1]');\n \n- \/\/ Mutate the text service, then refresh for new data.\n- mutateRemoteTextService();\n+ \/\/ Refresh for new data.\n await ReactNoop.act(async () => {\n \/\/ Refresh the cache with seeded data, like you would receive from a\n \/\/ server mutation.\n \/\/ TODO: Seeding multiple typed caches. Should work by calling `refresh`\n \/\/ multiple times with different key\/value pairs\n- const seededCache = new Map();\n- seededCache.set('A', {\n- ping: null,\n- status: 'resolved',\n- value: textServiceVersion,\n- });\n- startTransition(() => refresh(createTextCache, seededCache));\n+ const cache = createTextCache();\n+ cache.resolve('A');\n+ startTransition(() => refresh(createTextCache, cache));\n });\n \/\/ The root should re-render without a cache miss.\n expect(Scheduler).toHaveYielded(['A [v2]']);\n@@ -579,36 +586,26 @@ describe('ReactCache', () => {\n \n const root = ReactNoop.createRoot();\n await ReactNoop.act(async () => {\n- await resolveText('A');\n+ seedNextTextCache('A');\n root.render();\n });\n- expect(Scheduler).toHaveYielded([\n- 'Cache miss! [A]',\n- 'Loading...',\n- 'A [v1]',\n- ]);\n+ expect(Scheduler).toHaveYielded(['A [v1]']);\n expect(root).toMatchRenderedOutput('A [v1]');\n \n- \/\/ Simulate a server mutation.\n- mutateRemoteTextService();\n-\n \/\/ Add a new cache boundary\n await ReactNoop.act(async () => {\n- await resolveText('A');\n+ seedNextTextCache('A');\n root.render();\n });\n expect(Scheduler).toHaveYielded([\n 'A [v1]',\n \/\/ New tree should load fresh data.\n- 'Cache miss! [A]',\n- 'Loading...',\n 'A [v2]',\n ]);\n expect(root).toMatchRenderedOutput('A [v1]A [v2]');\n \n \/\/ Now refresh the shell. This should also cause the \"Show More\" contents to\n \/\/ refresh, since its cache is nested inside the outer one.\n- mutateRemoteTextService();\n await ReactNoop.act(async () => {\n startTransition(() => refreshShell());\n });\n@@ -620,7 +617,7 @@ describe('ReactCache', () => {\n expect(root).toMatchRenderedOutput('A [v1]A [v2]');\n \n await ReactNoop.act(async () => {\n- await resolveText('A');\n+ resolveMostRecentTextCache('A');\n });\n expect(Scheduler).toHaveYielded(['A [v3]', 'A [v3]']);\n expect(root).toMatchRenderedOutput('A [v3]A [v3]');\n@@ -679,21 +676,20 @@ describe('ReactCache', () => {\n expect(root).toMatchRenderedOutput('Loading...Loading...');\n \n await ReactNoop.act(async () => {\n- await resolveText('A');\n+ resolveMostRecentTextCache('A');\n });\n expect(Scheduler).toHaveYielded(['A [v1]', 'A [v1]']);\n expect(root).toMatchRenderedOutput('A [v1]A [v1]');\n \n \/\/ Refresh the first boundary. It should not refresh the second boundary,\n \/\/ even though they previously shared the same underlying cache.\n- mutateRemoteTextService();\n await ReactNoop.act(async () => {\n await refreshFirstBoundary();\n });\n expect(Scheduler).toHaveYielded(['Cache miss! [A]', 'Loading...']);\n \n await ReactNoop.act(async () => {\n- await resolveText('A');\n+ resolveMostRecentTextCache('A');\n });\n expect(Scheduler).toHaveYielded(['A [v2]']);\n expect(root).toMatchRenderedOutput('A [v2]A [v1]');\n@@ -738,10 +734,8 @@ describe('ReactCache', () => {\n \n await ReactNoop.act(async () => {\n \/\/ This will resolve the content in the first cache\n- resolveText('A');\n- resolveText('B');\n- \/\/ Now let's simulate a mutation\n- mutateRemoteTextService();\n+ resolveMostRecentTextCache('A');\n+ resolveMostRecentTextCache('B');\n \/\/ And mount the second tree, which includes new content\n root.render();\n });\n@@ -757,7 +751,7 @@ describe('ReactCache', () => {\n \n \/\/ Now resolve the second tree\n await ReactNoop.act(async () => {\n- resolveText('A');\n+ resolveMostRecentTextCache('A');\n });\n expect(Scheduler).toHaveYielded(['A [v2]']);\n expect(root).toMatchRenderedOutput('A [v2] A [v1] B [v1]');\n@@ -769,7 +763,7 @@ describe('ReactCache', () => {\n function Child({text}) {\n return (\n \n- \n+ \n <\/Cache>\n );\n }\n@@ -813,10 +807,10 @@ describe('ReactCache', () => {\n \n \/\/ Resolve the request\n await ReactNoop.act(async () => {\n- await resolveText('A');\n+ resolveMostRecentTextCache('A');\n });\n- expect(Scheduler).toHaveYielded(['A', 'A']);\n- expect(root).toMatchRenderedOutput('AA');\n+ expect(Scheduler).toHaveYielded(['A [v1]', 'A [v1]']);\n+ expect(root).toMatchRenderedOutput('A [v1]A [v1]');\n \n \/\/ Now do another transition\n await ReactNoop.act(async () => {\n@@ -832,16 +826,19 @@ describe('ReactCache', () => {\n });\n expect(Scheduler).toHaveYielded([\n \/\/ First two children use the old cache because they already finished\n- 'A',\n- 'A',\n+ 'A [v1]',\n+ 'A [v1]',\n \/\/ The new child uses a fresh cache\n 'Cache miss! [A]',\n 'Loading...',\n- 'A',\n- 'A',\n- 'A',\n ]);\n- expect(root).toMatchRenderedOutput('AAA');\n+ expect(root).toMatchRenderedOutput('A [v1]A [v1]');\n+\n+ await ReactNoop.act(async () => {\n+ resolveMostRecentTextCache('A');\n+ });\n+ expect(Scheduler).toHaveYielded(['A [v1]', 'A [v1]', 'A [v2]']);\n+ expect(root).toMatchRenderedOutput('A [v1]A [v1]A [v2]');\n });\n \n \/\/ @gate experimental\n@@ -907,8 +904,7 @@ describe('ReactCache', () => {\n expect(root).toMatchRenderedOutput('1');\n \n await ReactNoop.act(async () => {\n- resolveText('A');\n- mutateRemoteTextService();\n+ resolveMostRecentTextCache('A');\n });\n expect(Scheduler).toHaveYielded(['A']);\n expect(root).toMatchRenderedOutput('A1');\n","parents":["af0bb68e87476c0d72ceb5ffed7263924ee18c10"],"files":[{"path":"packages\/react-reconciler\/src\/__tests__\/ReactCache-test.js","status":"M"}],"body":"Some rearranging to make it easier to write tests that assert on the\r\noutput of multiple caches.","commit":{"authorName":"Andrew Clark","revision":"9043626f09c7d02a81b1ed89236e8f88d44fdc7e","authorEmail":"git@andrewclark.io","authoredAt":"2021-01-19T15:54:45-06:00","subject":"Cache tests: Make it easier to test many caches (#20600)","shortRevision":"9043626f09"}}

dillon1000/react

Files changed