diff --git a/docs/api/options.md b/docs/api/options.md
index fcd76acd7..1bbdd2ae0 100644
--- a/docs/api/options.md
+++ b/docs/api/options.md
@@ -302,6 +302,10 @@ HTMLElement, to which your component will be fully mounted in the document.
When attaching to the DOM, you should call `wrapper.destroy()` at the end of your test to
remove the rendered elements from the document and destroy the component instance.
+::: tip
+When using `attachTo: document.body` new `div` instead of replacing entire body new `
` will be appended. This is designed to mimic Vue3 behavior and simplify future migration. See [this comment](https://github.com/vuejs/vue-test-utils/issues/1578#issuecomment-674652747) for details
+:::
+
```js
const div = document.createElement('div')
div.id = 'root'
diff --git a/packages/test-utils/src/mount.js b/packages/test-utils/src/mount.js
index 4d3b8a6ce..4398e51b8 100644
--- a/packages/test-utils/src/mount.js
+++ b/packages/test-utils/src/mount.js
@@ -32,7 +32,9 @@ export default function mount(component, options = {}) {
const parentVm = createInstance(component, mergedOptions, _Vue)
const el =
- options.attachTo || (options.attachToDocument ? createElement() : undefined)
+ options.attachToDocument || options.attachTo instanceof HTMLBodyElement
+ ? createElement()
+ : options.attachTo
const vm = parentVm.$mount(el)
component._Ctor = {}
diff --git a/test/specs/mounting-options/attachTo.spec.js b/test/specs/mounting-options/attachTo.spec.js
index 65852724c..7df27d7f7 100644
--- a/test/specs/mounting-options/attachTo.spec.js
+++ b/test/specs/mounting-options/attachTo.spec.js
@@ -32,6 +32,19 @@ describeWithShallowAndMount('options.attachTo', mountingMethod => {
wrapper.destroy()
expect(document.getElementById('attach-to')).toBeNull()
})
+ it('appends new node when attached to document.body', () => {
+ const unrelatedDiv = document.createElement('div')
+ unrelatedDiv.id = 'unrelated'
+ document.body.appendChild(unrelatedDiv)
+ const wrapper = mountingMethod(TestComponent, {
+ attachTo: document.body
+ })
+ expect(document.body.contains(unrelatedDiv)).toBe(true)
+ expect(wrapper.vm.$el.parentNode).toBe(document.body)
+ expect(wrapper.options.attachedToDocument).toEqual(true)
+ wrapper.destroy()
+ unrelatedDiv.remove()
+ })
it('attaches to a provided CSS selector string', () => {
const div = document.createElement('div')
div.id = 'root'