Skip to content

Commit

Permalink
Merge branch 'main' into fix/1162/stub-recursive-component
Browse files Browse the repository at this point in the history
# Conflicts:
#	src/mount.ts
  • Loading branch information
freakzlike committed Feb 20, 2023
2 parents 1392c4a + 52b25f4 commit bb080b9
Show file tree
Hide file tree
Showing 12 changed files with 921 additions and 544 deletions.
3 changes: 2 additions & 1 deletion docs/.vitepress/config.ts
Expand Up @@ -93,7 +93,8 @@ export default defineConfig({
{
text: 'Stubs and Shallow Mount',
link: '/guide/advanced/stubs-shallow-mount'
}
},
{ text: 'Server-side rendering', link: '/guide/advanced/ssr' }
]
},
{
Expand Down
42 changes: 42 additions & 0 deletions docs/guide/advanced/ssr.md
@@ -0,0 +1,42 @@
# Testing Server-side Rendering

Vue Test Utils provides `renderToString` to test Vue applications that use server-side rendering (SSR).
This guide will walk you through the process of testing a Vue application that uses SSR.

## `renderToString`

`renderToString` is a function that renders a Vue component to a string.
It is an asynchronous function that returns a Promise,
and accepts the same parameters as `mount` or `shallowMount`.

Let's consider a simple component that uses the `onServerPrefetch` hook:

```ts
function fakeFetch(text: string) {
return Promise.resolve(text)
}

const Component = defineComponent({
template: '<div>{{ text }}</div>',
setup() {
const text = ref<string | null>(null)

onServerPrefetch(async () => {
text.value = await fakeFetch('onServerPrefetch')
})

return { text }
}
})
```

You can write a test for this component using `renderToString`:

```ts
import { renderToString } from '@vue/test-utils'

it('renders the value returned by onServerPrefetch', async () => {
const contents = await renderToString(Component)
expect(contents).toBe('<div>onServerPrefetch</div>')
})
```
11 changes: 7 additions & 4 deletions package.json
@@ -1,6 +1,6 @@
{
"name": "@vue/test-utils",
"version": "2.2.10",
"version": "2.3.0",
"license": "MIT",
"main": "dist/vue-test-utils.cjs.js",
"unpkg": "dist/vue-test-utils.browser.js",
Expand Down Expand Up @@ -40,6 +40,7 @@
"@vue/compat": "3.2.47",
"@vue/compiler-dom": "3.2.47",
"@vue/compiler-sfc": "3.2.47",
"@vue/server-renderer": "3.2.47",
"c8": "7.12.0",
"eslint": "8.34.0",
"eslint-config-prettier": "8.6.0",
Expand All @@ -53,22 +54,24 @@
"rollup": "3.15.0",
"tslib": "2.5.0",
"typescript": "4.9.5",
"unplugin-vue-components": "0.23.0",
"unplugin-vue-components": "0.24.0",
"vite": "4.1.1",
"vitepress": "0.22.4",
"vitest": "0.28.5",
"vue": "3.2.47",
"vue-class-component": "8.0.0-rc.1",
"vue-router": "4.1.6",
"vue-tsc": "1.0.24",
"vue-tsc": "1.1.0",
"vuex": "4.1.0"
},
"peerDependencies": {
"@vue/compiler-dom": "^3.0.1",
"@vue/server-renderer": "^3.0.1",
"vue": "^3.0.1"
},
"optionalDependencies": {
"@vue/compiler-dom": "^3.0.1"
"@vue/compiler-dom": "^3.0.1",
"@vue/server-renderer": "^3.0.1"
},
"author": {
"name": "Lachlan Miller",
Expand Down

0 comments on commit bb080b9

Please sign in to comment.