test(ssr): computed with onServerPrefetch

As noted in https://github.com/vuejs/core/issues/5300#issuecomment-1790432852
This commit is contained in:
Eduardo San Martin Morote 2023-12-20 17:09:13 +01:00
parent 9fa82414eb
commit 2ee8cf0842
No known key found for this signature in database
GPG Key ID: 4C2F0033B36AEE47
1 changed files with 47 additions and 1 deletions

View File

@ -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' import { renderToString } from '../src/renderToString'
// #5208 reported memory leak of keeping computed alive during SSR // #5208 reported memory leak of keeping computed alive during SSR
@ -45,3 +52,42 @@ test('computed reactivity during SSR', async () => {
// during the render phase // during the render phase
expect(getterSpy).toHaveBeenCalledTimes(2) 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)
})