Skip to content

Commit bb080b9

Browse files
committed
Merge branch 'main' into fix/1162/stub-recursive-component
# Conflicts: # src/mount.ts
2 parents 1392c4a + 52b25f4 commit bb080b9

File tree

12 files changed

+921
-544
lines changed

12 files changed

+921
-544
lines changed

docs/.vitepress/config.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,8 @@ export default defineConfig({
9393
{
9494
text: 'Stubs and Shallow Mount',
9595
link: '/guide/advanced/stubs-shallow-mount'
96-
}
96+
},
97+
{ text: 'Server-side rendering', link: '/guide/advanced/ssr' }
9798
]
9899
},
99100
{

docs/guide/advanced/ssr.md

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
# Testing Server-side Rendering
2+
3+
Vue Test Utils provides `renderToString` to test Vue applications that use server-side rendering (SSR).
4+
This guide will walk you through the process of testing a Vue application that uses SSR.
5+
6+
## `renderToString`
7+
8+
`renderToString` is a function that renders a Vue component to a string.
9+
It is an asynchronous function that returns a Promise,
10+
and accepts the same parameters as `mount` or `shallowMount`.
11+
12+
Let's consider a simple component that uses the `onServerPrefetch` hook:
13+
14+
```ts
15+
function fakeFetch(text: string) {
16+
return Promise.resolve(text)
17+
}
18+
19+
const Component = defineComponent({
20+
template: '<div>{{ text }}</div>',
21+
setup() {
22+
const text = ref<string | null>(null)
23+
24+
onServerPrefetch(async () => {
25+
text.value = await fakeFetch('onServerPrefetch')
26+
})
27+
28+
return { text }
29+
}
30+
})
31+
```
32+
33+
You can write a test for this component using `renderToString`:
34+
35+
```ts
36+
import { renderToString } from '@vue/test-utils'
37+
38+
it('renders the value returned by onServerPrefetch', async () => {
39+
const contents = await renderToString(Component)
40+
expect(contents).toBe('<div>onServerPrefetch</div>')
41+
})
42+
```

package.json

+7-4
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@vue/test-utils",
3-
"version": "2.2.10",
3+
"version": "2.3.0",
44
"license": "MIT",
55
"main": "dist/vue-test-utils.cjs.js",
66
"unpkg": "dist/vue-test-utils.browser.js",
@@ -40,6 +40,7 @@
4040
"@vue/compat": "3.2.47",
4141
"@vue/compiler-dom": "3.2.47",
4242
"@vue/compiler-sfc": "3.2.47",
43+
"@vue/server-renderer": "3.2.47",
4344
"c8": "7.12.0",
4445
"eslint": "8.34.0",
4546
"eslint-config-prettier": "8.6.0",
@@ -53,22 +54,24 @@
5354
"rollup": "3.15.0",
5455
"tslib": "2.5.0",
5556
"typescript": "4.9.5",
56-
"unplugin-vue-components": "0.23.0",
57+
"unplugin-vue-components": "0.24.0",
5758
"vite": "4.1.1",
5859
"vitepress": "0.22.4",
5960
"vitest": "0.28.5",
6061
"vue": "3.2.47",
6162
"vue-class-component": "8.0.0-rc.1",
6263
"vue-router": "4.1.6",
63-
"vue-tsc": "1.0.24",
64+
"vue-tsc": "1.1.0",
6465
"vuex": "4.1.0"
6566
},
6667
"peerDependencies": {
6768
"@vue/compiler-dom": "^3.0.1",
69+
"@vue/server-renderer": "^3.0.1",
6870
"vue": "^3.0.1"
6971
},
7072
"optionalDependencies": {
71-
"@vue/compiler-dom": "^3.0.1"
73+
"@vue/compiler-dom": "^3.0.1",
74+
"@vue/server-renderer": "^3.0.1"
7275
},
7376
"author": {
7477
"name": "Lachlan Miller",

0 commit comments

Comments
 (0)