feat: add options.attachTo

README.md

@@ -61,6 +61,7 @@ component | ✅ | (new!) nested in [`global`](https://vuejs.github.io/vue-test-u
 directives | ✅ | (new!) nested in [`global`](https://vuejs.github.io/vue-test-utils-next-docs/api/#global)
 stubs | ✅ 
 attachToDocument | ❌| will rename to `attachTo`. See [here](https://github.com/vuejs/vue-test-utils/pull/1492)
+attachTo | ✅ 
 attrs | ❌ |
 scopedSlots | ⚰️ | scopedSlots are merged with slots in Vue 3
 context | ⚰️ | different from Vue 2, may not make sense anymore.

src/mount.ts

@@ -26,6 +26,7 @@ import {
   MOUNT_PARENT_NAME
 } from './constants'
 import { stubComponents } from './stubs'
+import { isString } from './utils'
 
 type Slot = VNode | string | { render: Function }
 
@@ -47,6 +48,7 @@ interface MountingOptions<Props> {
     directives?: Record<string, Directive>
   }
   stubs?: Record<string, any>
+  attachTo?: HTMLElement | string
 }
 
 // Component declared with defineComponent
@@ -87,10 +89,21 @@ export function mount(
 ): VueWrapper<any> {
   const component = { ...originalComponent }
 
-  // Reset the document.body
-  document.getElementsByTagName('html')[0].innerHTML = ''
   const el = document.createElement('div')
   el.id = MOUNT_ELEMENT_ID
+
+  if (options?.attachTo) {
+    const to = isString(options.attachTo)
+      ? document.querySelector(options.attachTo)
+      : options.attachTo
+
+    el.appendChild(to)
+  }
+  if (el.children.length === 0) {
+    // Reset the document.body
+    document.getElementsByTagName('html')[0].innerHTML = ''
+  }
+
   document.body.appendChild(el)
 
   // handle any slots passed via mounting options

src/utils.ts

@@ -5,4 +5,8 @@ import flow from 'lodash/flow'
 
 const pascalCase = flow(camelCase, upperFirst)
 
-export { kebabCase, pascalCase }
+function isString(val: unknown): val is String {
+  return typeof val === 'string'
+}
+
+export { kebabCase, pascalCase, isString }

tests/mountingOptions/attachTo.spec.ts

@@ -0,0 +1,69 @@
+import { mount } from '../../src'
+
+const innerHTML = '<input><span>Hello world</span>'
+const outerHTML = `<div id="attach-to">${innerHTML}</div>`
+const ssrHTML = `<div id="attach-to" data-server-rendered="true">${innerHTML}</div>`
+const template = '<div id="attach-to"><input /><span>Hello world</span></div>'
+const TestComponent = { template }
+
+describe('options.attachTo', () => {
+  it('attaches to a provided HTMLElement', () => {
+    const div = document.createElement('div')
+    div.id = 'root'
+    document.body.appendChild(div)
+    expect(document.getElementById('root')).not.toBeNull()
+    expect(document.getElementById('attach-to')).toBeNull()
+    const wrapper = mount(TestComponent, {
+      attachTo: div
+    })
+
+    const root = document.getElementById('root')
+    const rendered = document.getElementById('attach-to')
+    expect(wrapper.vm.$el.parentNode).not.toBeNull()
+    expect(root).toBeNull()
+    expect(rendered).not.toBeNull()
+    expect(rendered.outerHTML).toBe(outerHTML)
+    wrapper.unmount()
+    expect(document.getElementById('attach-to')).toBeNull()
+  })
+  it('attaches to a provided CSS selector string', () => {
+    const div = document.createElement('div')
+    div.id = 'root'
+    document.body.appendChild(div)
+    expect(document.getElementById('root')).not.toBeNull()
+    expect(document.getElementById('attach-to')).toBeNull()
+    const wrapper = mount(TestComponent, {
+      attachTo: '#root'
+    })
+
+    const root = document.getElementById('root')
+    const rendered = document.getElementById('attach-to')
+    expect(wrapper.vm.$el.parentNode).not.toBeNull()
+    expect(root).toBeNull()
+    expect(rendered).not.toBeNull()
+    expect(rendered.outerHTML).toBe(outerHTML)
+    wrapper.unmount()
+    expect(document.getElementById('attach-to')).toBeNull()
+  })
+
+  it('correctly hydrates markup', () => {
+    expect(document.getElementById('attach-to')).toBeNull()
+
+    const div = document.createElement('div')
+    div.id = 'attach-to'
+    div.setAttribute('data-server-rendered', 'true')
+    div.innerHTML = innerHTML
+    document.body.appendChild(div)
+    expect(div.outerHTML).toBe(ssrHTML)
+    const wrapper = mount(TestComponent, {
+      attachTo: '#attach-to'
+    })
+
+    const rendered = document.getElementById('attach-to')
+    expect(wrapper.vm.$el.parentNode).not.toBeNull()
+    expect(rendered).not.toBeNull()
+    expect(rendered.outerHTML).toBe(outerHTML)
+    wrapper.unmount()
+    expect(document.getElementById('attach-to')).toBeNull()
+  })
+})