feat: renderToString implementation

src/index.ts

@@ -1,7 +1,7 @@
 import { DOMWrapper } from './domWrapper'
 import { VueWrapper } from './vueWrapper'
 import BaseWrapper from './baseWrapper'
-import { mount, shallowMount } from './mount'
+import { mount, shallowMount, renderToString } from './mount'
 import { MountingOptions } from './types'
 import { RouterLinkStub } from './components/RouterLinkStub'
 import { createWrapperError } from './errorWrapper'
@@ -12,6 +12,7 @@ import { enableAutoUnmount, disableAutoUnmount } from './utils/autoUnmount'
 export {
   mount,
   shallowMount,
+  renderToString,
   enableAutoUnmount,
   disableAutoUnmount,
   RouterLinkStub,

src/mount.ts

@@ -26,6 +26,7 @@ import {
   ConcreteComponent,
   Prop
 } from 'vue'
+import { renderToString as baseRenderToString } from 'vue/server-renderer'
 
 import { MountingOptions, Slot } from './types'
 import {
@@ -54,7 +55,8 @@ const MOUNT_OPTIONS: Array<keyof MountingOptions<any>> = [
   'props',
   'slots',
   'global',
-  'shallow'
+  'shallow',
+  'renderToString'
 ]
 
 function getInstanceOptions(
@@ -516,6 +518,10 @@ export function mount(
     }
   }
 
+  if (options?.renderToString) {
+    return baseRenderToString(app) as any
+  }
+
   // mount the app!
   const vm = app.mount(el)
 
@@ -538,3 +544,7 @@ export function mount(
 export const shallowMount: typeof mount = (component: any, options?: any) => {
   return mount(component, { ...options, shallow: true })
 }
+
+export const renderToString: typeof mount = (component: any, options?: any) => {
+  return mount(component, { ...options, renderToString: true })
+}

src/types.ts

@@ -84,6 +84,12 @@ export interface MountingOptions<Props, Data = {}> {
    * @see https://next.vue-test-utils.vuejs.org/api/#slots
    */
   shallow?: boolean
+  /**
+   * Renders a component to HTML.
+   * @default false
+   * @see https://next.vue-test-utils.vuejs.org/api/#renderToString
+   */
+  renderToString?: boolean
 }
 
 export type Stub = boolean | Component

tests/renderToString.spec.ts

@@ -0,0 +1,55 @@
+import { defineComponent, onMounted, onServerPrefetch, ref } from 'vue'
+import { renderToString } from '../src'
+
+describe('renderToString', () => {
+  it('returns a promise', async () => {
+    const Component = defineComponent({
+      template: '<div>{{ text }}</div>',
+      setup() {
+        return { text: 'Text content' }
+      }
+    })
+
+    const wrapper = await renderToString(Component)
+
+    expect(wrapper).toBe('<div>Text content</div>')
+  })
+
+  it('returns correct html on multi root nodes', async () => {
+    const Component = defineComponent({
+      template: '<div>foo</div><div>bar</div>'
+    })
+
+    const wrapper = await renderToString(Component)
+
+    expect(wrapper).toBe('<!--[--><div>foo</div><div>bar</div><!--]-->')
+  })
+
+  it('returns correct html when onServerPrefetch is used', async () => {
+    const Component = defineComponent({
+      template: '<div>{{ text }}</div>',
+      setup() {
+        const text = ref('')
+
+        onServerPrefetch(() => {
+          return new Promise((resolve) => {
+            setTimeout(() => {
+              text.value = 'Text content'
+              resolve(true)
+            }, 100)
+          })
+        })
+
+        onMounted(() => {
+          text.value = 'Text content'
+        })
+
+        return { text }
+      }
+    })
+
+    const wrapper = await renderToString(Component)
+
+    expect(wrapper).toBe('<div>Text content</div>')
+  })
+})