Procházet zdrojové kódy

test(ssr): computed with onServerPrefetch

As noted in https://github.com/vuejs/core/issues/5300#issuecomment-1790432852
Eduardo San Martin Morote před 2 roky
rodič
revize
2ee8cf0842

+ 47 - 1
packages/server-renderer/__tests__/ssrComputed.spec.ts

@@ -1,4 +1,11 @@
-import { createSSRApp, defineComponent, h, computed, reactive } from 'vue'
+import {
+  createSSRApp,
+  defineComponent,
+  h,
+  computed,
+  reactive,
+  onServerPrefetch
+} from 'vue'
 import { renderToString } from '../src/renderToString'
 
 // #5208 reported memory leak of keeping computed alive during SSR
@@ -45,3 +52,42 @@ test('computed reactivity during SSR', async () => {
   // during the render phase
   expect(getterSpy).toHaveBeenCalledTimes(2)
 })
+
+test('computed reactivity during SSR with onServerPrefetch', async () => {
+  const store = {
+    // initial state could be hydrated
+    state: reactive({ items: null as null | string[] }),
+
+    // pretend to fetch some data from an api
+    async fetchData() {
+      this.state.items = ['hello', 'world']
+    }
+  }
+
+  const getterSpy = vi.fn()
+
+  const App = defineComponent(() => {
+    const msg = computed(() => {
+      getterSpy()
+      return store.state.items?.join(' ')
+    })
+
+    onServerPrefetch(() => store.fetchData())
+
+    // simulate the read from a composable (e.g. filtering a list of results)
+    msg.value
+
+    return () => h('div', null, msg.value)
+  })
+
+  const app = createSSRApp(App)
+
+  // in real world serve this html and append store state for hydration on client
+  const html = await renderToString(app)
+
+  expect(html).toMatch('hello world')
+
+  // should only be called twice since access should be cached
+  // during the render phase
+  expect(getterSpy).toHaveBeenCalledTimes(2)
+})