test: add key matching test for keyed composables (#6372)

test/basic.test.ts

@@ -344,6 +344,9 @@ describe('automatically keyed composables', () => {
     expect(html).toContain('true')
     expect(html).not.toContain('false')
   })
+  it('should match server-generated keys', async () => {
+    await expectNoClientErrors('/keyed-composables')
+  })
 })
 
 describe('dynamic paths', () => {

test/fixtures/basic/pages/keyed-composables.vue

@@ -1,17 +1,31 @@
 <script setup lang="ts">
-const useLocalState = () => useState(() => ({ foo: Math.random() }))
+const useLocalState = () => useState(() => {
+  if (process.client) { console.error('running usestate') }
+  return { foo: Math.random() }
+})
 const useStateTest1 = useLocalState()
 const useStateTest2 = useLocalState()
 
-const useLocalAsyncData = () => useAsyncData(() => Promise.resolve({ foo: Math.random() }), { transform: data => data.foo })
+const useLocalAsyncData = () => useAsyncData(() => {
+  if (process.client) { console.error('running asyncdata') }
+  return Promise.resolve({ foo: Math.random() })
+}, { transform: data => data.foo })
 const { data: useAsyncDataTest1 } = await useLocalAsyncData()
 const { data: useAsyncDataTest2 } = await useLocalAsyncData()
 
-const useLocalLazyAsyncData = () => useLazyAsyncData(() => Promise.resolve({ foo: Math.random() }), { transform: data => data.foo })
+const useLocalLazyAsyncData = () => useLazyAsyncData(() => {
+  if (process.client) { console.error('running asyncdata') }
+  return Promise.resolve({ foo: Math.random() })
+}, { transform: data => data.foo })
 const { data: useLazyAsyncDataTest1 } = await useLocalLazyAsyncData()
 const { data: useLazyAsyncDataTest2 } = await useLocalLazyAsyncData()
 
-const useLocalFetch = () => useFetch('/api/counter', { transform: data => data.count })
+const useLocalFetch = () => useFetch('/api/counter', {
+  transform: (data) => {
+    if (process.client) { console.error('running client-side transform') }
+    return data.count
+  }
+})
 const { data: useFetchTest1 } = await useLocalFetch()
 const { data: useFetchTest2 } = await useLocalFetch()
 
@@ -21,11 +35,11 @@ const { data: useLazyFetchTest2 } = await useLocalLazyFetch()
 </script>
 
 <template>
-  <pre>
+  <div>
     {{ useStateTest1 === useStateTest2 }}
     {{ useAsyncDataTest1 === useAsyncDataTest2 }}
     {{ useLazyAsyncDataTest1 === useLazyAsyncDataTest2 }}
     {{ useFetchTest1 === useFetchTest2 }}
     {{ useLazyFetchTest1 === useLazyFetchTest2 }}
-  </pre>
+  </div>
 </template>