feat: add renderToString function (#1971)

It is now possible to use `renderToString` to test the SSR rendering of a component.

To do so, use `renderToString(MyComponent)`.
`renderToString` returns a `Promise<string>` with the HTML rendered.

```ts
  it('returns correct html with pre-fetched data on server', async () => {
    const Component = defineComponent({
      template: '<div>{{ text }}</div>',
      setup() {
        const text = ref<string | null>(null)
        onServerPrefetch(async () => {
          text.value = await fakeFetch('onServerPrefetch')
        })
        return { text }
      }
    })

    const contents = await renderToString(Component)

    expect(contents).toBe('<div>onServerPrefetch</div>')
  })
```

Co-authored-by: Robert Soriano <[email protected]>

Author: cexbrayat

docs/.vitepress/config.ts

@@ -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' }
         ]
       },
       {

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>')
+})
+```

package.json

@@ -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",
@@ -65,10 +66,12 @@
   },
   "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",

pnpm-lock.yaml

@@ -25,7 +25,10 @@ function createEntry(options) {
       'vue',
       isEsmBrowser
         ? '@vue/compiler-dom/dist/compiler-dom.esm-browser'
-        : '@vue/compiler-dom'
+        : '@vue/compiler-dom',
+      isEsmBrowser
+        ? '@vue/server-renderer/dist/compiler-dom.esm-browser'
+        : '@vue/server-renderer'
     ],
     plugins: [
       replace({
@@ -47,7 +50,8 @@ function createEntry(options) {
       format,
       globals: {
         vue: 'Vue',
-        '@vue/compiler-dom': 'VueCompilerDOM'
+        '@vue/compiler-dom': 'VueCompilerDOM',
+        '@vue/server-renderer': 'VueServerRenderer'
       }
     }
   }