fix: clear static tree for slots render (#862)

Author: eddyerburgh

packages/create-instance/create-slot-vnodes.js

@@ -8,13 +8,12 @@ function createVNodes (
 ): Array<VNode> {
   const el = compileToFunctions(`<div>${slotValue}</div>`)
   const _staticRenderFns = vm._renderProxy.$options.staticRenderFns
-  // version < 2.5
-  if (!vm._renderProxy._staticTrees) {
-    vm._renderProxy._staticTrees = []
-  }
+  const _staticTrees = vm._renderProxy._staticTrees
+  vm._renderProxy._staticTrees = []
   vm._renderProxy.$options.staticRenderFns = el.staticRenderFns
   const vnode = el.render.call(vm._renderProxy, vm.$createElement)
   vm._renderProxy.$options.staticRenderFns = _staticRenderFns
+  vm._renderProxy._staticTrees = _staticTrees
   return vnode.children
 }
 

test/specs/mounting-options/attachToDocument.spec.js

@@ -1,11 +1,15 @@
-import { compileToFunctions } from 'vue-template-compiler'
 import { describeWithShallowAndMount, isRunningJSDOM } from '~resources/utils'
 import { renderToString } from '@vue/server-test-utils'
 
 describeWithShallowAndMount('options.attachToDocument', mountingMethod => {
-  it('returns VueWrapper with attachedToDocument set to true when passed attachToDocument in options', () => {
-    const compiled = compileToFunctions('<div><input /></div>')
-    const wrapper = mountingMethod(compiled, { attachToDocument: true })
+  it('attaches root node to document', () => {
+    const TestComponent = {
+      template: '<div class="attached"><input /></div>'
+    }
+    const wrapper = mountingMethod(TestComponent, {
+      attachToDocument: true
+    })
+    expect(document.querySelector('.attached')).to.not.equal(null)
     expect(wrapper.options.attachedToDocument).to.equal(true)
   })
 })
@@ -16,8 +20,10 @@ describe('options.attachToDocument with renderToString', () => {
     if (!isRunningJSDOM) {
       return
     }
-    const compiled = compileToFunctions('<div><input /></div>')
-    const fn = () => renderToString(compiled, { attachToDocument: true })
+    const TestComponent = {
+      template: '<div class="attached"><input /></div>'
+    }
+    const fn = () => renderToString(TestComponent, { attachToDocument: true })
     const message =
       '[vue-test-utils]: you cannot use attachToDocument with renderToString'
     expect(fn)

test/specs/mounting-options/slots.spec.js

@@ -223,11 +223,25 @@ describeWithMountingMethods('options.slots', mountingMethod => {
     }
   })
 
+  it('mounts component with default and named slots', () => {
+    const wrapper = mountingMethod(ComponentWithSlots, {
+      slots: {
+        default: '<span>hello</span>',
+        footer: '<p>world</p>'
+      }
+    })
+    const HTML = mountingMethod.name === 'renderToString'
+      ? wrapper
+      : wrapper.html()
+    expect(HTML).to.contain('<span>hello</span>')
+    expect(HTML).to.contain('<p>world</p>')
+  })
+
   it('mounts component with default and named text slot', () => {
     const wrapper = mountingMethod(ComponentWithSlots, {
       slots: {
         default: 'hello,',
-        header: 'world'
+        footer: '<template>world</template>'
       }
     })
     if (mountingMethod.name === 'renderToString') {

test/specs/wrapper/destroy.spec.js

@@ -1,4 +1,3 @@
-import { compileToFunctions } from 'vue-template-compiler'
 import { describeWithShallowAndMount } from '~resources/utils'
 import sinon from 'sinon'
 
@@ -25,9 +24,8 @@ describeWithShallowAndMount('destroy', mountingMethod => {
     expect(spy.calledOnce).to.equal(true)
   })
 
-  it.skip('removes element from document.body', () => {
-    const compiled = compileToFunctions('<div></div>')
-    const wrapper = mountingMethod(compiled, { attachToDocument: true })
+  it('removes element from document.body', () => {
+    const wrapper = mountingMethod({ template: '<div />' }, { attachToDocument: true })
     expect(wrapper.vm.$el.parentNode).to.equal(document.body)
     wrapper.destroy()
     expect(wrapper.vm.$el.parentNode).to.be.null