fix(renderToString): Remove document usage on SSR render

vuejs · Apr 8, 2023 · 0a3b619 · 0a3b619
1 parent a2ee3d4
commit 0a3b619
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 24 deletions.
diff --git a/src/createInstance.ts b/src/createInstance.ts
@@ -111,24 +111,6 @@ export function createInstance(
   // Let's register it as a stub so user can find it
   registerStub({ source: originalComponent, stub: component })
 
-  const el = document.createElement('div')
-
-  if (options?.attachTo) {
-    let to: Element | null
-    if (typeof options.attachTo === 'string') {
-      to = document.querySelector(options.attachTo)
-      if (!to) {
-        throw new Error(
-          `Unable to find the element matching the selector ${options.attachTo} given as the \`attachTo\` option`
-        )
-      }
-    } else {
-      to = options.attachTo
-    }
-
-    to.appendChild(el)
-  }
-
   function slotToFunction(slot: Slot) {
     switch (typeof slot) {
       case 'function':
@@ -359,7 +341,6 @@ export function createInstance(
 
   return {
     app,
-    el,
     props,
     componentRef
   }

diff --git a/src/mount.ts b/src/mount.ts
@@ -248,10 +248,7 @@ export function mount(
   inputComponent: any,
   options?: MountingOptions<any> & Record<string, any>
 ): VueWrapper<any> {
-  const { app, props, el, componentRef } = createInstance(
-    inputComponent,
-    options
-  )
+  const { app, props, componentRef } = createInstance(inputComponent, options)
 
   const setProps = (newProps: Record<string, unknown>) => {
     for (const [k, v] of Object.entries(newProps)) {
@@ -272,6 +269,23 @@ export function mount(
   }
 
   // mount the app!
+  const el = document.createElement('div')
+
+  if (options?.attachTo) {
+    let to: Element | null
+    if (typeof options.attachTo === 'string') {
+      to = document.querySelector(options.attachTo)
+      if (!to) {
+        throw new Error(
+          `Unable to find the element matching the selector ${options.attachTo} given as the \`attachTo\` option`
+        )
+      }
+    } else {
+      to = options.attachTo
+    }
+
+    to.appendChild(el)
+  }
   const vm = app.mount(el)
 
   if (errorOnMount) {

diff --git a/tests/__snapshots__/shallowMount.spec.ts.snap b/tests/__snapshots__/shallowMount.spec.ts.snap
@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`shallowMount > renders props for stubbed component in a snapshot 1`] = `
 <div>

diff --git a/tests/renderToString.spec.ts b/tests/renderToString.spec.ts
@@ -1,3 +1,8 @@
+/**
+ * Run SSR tests in node environment
+ * @vitest-environment node
+ */
+
 import { describe, it, expect } from 'vitest'
 import { defineComponent, onMounted, onServerPrefetch, ref } from 'vue'
 import { renderToString } from '../src'