mirror of https://github.com/vuejs/core.git
test(ssr): computed with onServerPrefetch
As noted in https://github.com/vuejs/core/issues/5300#issuecomment-1790432852
This commit is contained in:
parent
9fa82414eb
commit
2ee8cf0842
|
@ -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)
|
||||
})
|
||||
|
|
Loading…
Reference in New Issue