feat: allow opting out of stubbed transition and transition-group

Author: lmiller1990

src/stubs.ts

@@ -36,12 +36,15 @@ const createStub = ({ name, props }: StubOptions): ComponentOptions => {
   return defineComponent({ name: name || anonName, render, props })
 }
 
-const createTransitionStub = ({ props }: StubOptions): ComponentOptions => {
+const createTransitionStub = ({
+  name,
+  props
+}: StubOptions): ComponentOptions => {
   const render = (ctx: ComponentPublicInstance) => {
-    return h('transition-stub', {}, ctx.$slots)
+    return h(name, {}, ctx.$slots)
   }
 
-  return defineComponent({ name: 'transition-stub', render, props })
+  return defineComponent({ name, render, props })
 }
 
 const resolveComponentStubByName = (
@@ -93,11 +96,22 @@ export function stubComponents(
     // 2. An object of component options, such as { name: 'foo', render: [Function], props: {...} }
     // Depending what it is, we do different things.
     if (type === Transition && stubs['transition']) {
-      return [createTransitionStub({ props: undefined }), undefined, children]
+      return [
+        createTransitionStub({ name: 'transition-stub', props: undefined }),
+        undefined,
+        children
+      ]
     }
 
     if (type === TransitionGroup && stubs['transition-group']) {
-      return [createTransitionStub({ props: undefined }), undefined, children]
+      return [
+        createTransitionStub({
+          name: 'transition-group-stub',
+          props: undefined
+        }),
+        undefined,
+        children
+      ]
     }
 
     if (

tests/mountingOptions/stubs.global.spec.ts

@@ -6,12 +6,13 @@ import ComponentWithoutName from '../components/ComponentWithoutName.vue'
 import ComponentWithSlots from '../components/ComponentWithSlots.vue'
 
 describe('mounting options: stubs', () => {
+  let configStubsSave = config.global.stubs
   beforeEach(() => {
-    config.global.stubs = {}
+    config.global.stubs = configStubsSave
   })
 
   afterEach(() => {
-    config.global.stubs = {}
+    config.global.stubs = configStubsSave
   })
 
   it('handles Array syntax', () => {
@@ -308,6 +309,59 @@ describe('mounting options: stubs', () => {
     expect(wrapper.html()).toBe('<foo-bar-stub></foo-bar-stub>')
   })
 
+  it('stubs transition by default', () => {
+    const Comp = {
+      template: `<transition><div id="content" /></transition>`
+    }
+    const wrapper = mount(Comp)
+
+    expect(wrapper.html()).toBe(
+      '<transition-stub><div id="content"></div></transition-stub>'
+    )
+  })
+
+  it('opts out of stubbing transition by default', () => {
+    const Comp = {
+      template: `<transition><div id="content" /></transition>`
+    }
+    const wrapper = mount(Comp, {
+      global: {
+        stubs: {
+          transition: false
+        }
+      }
+    })
+
+    // Vue removes <transition> at run-time and does it's magic, so <transition> should not
+    // appear in the html when it isn't stubbed.
+    expect(wrapper.html()).toBe('<div id="content"></div>')
+  })
+
+  it('opts out of stubbing transition-group by default', () => {
+    const Comp = {
+      template: `<transition-group><div key="content" id="content" /></transition-group>`
+    }
+    const wrapper = mount(Comp, {
+      global: {
+        stubs: {
+          'transition-group': false
+        }
+      }
+    })
+
+    // Vue removes <transition-group> at run-time and does it's magic, so <transition-group> should not
+    // appear in the html when it isn't stubbed.
+    expect(wrapper.html()).toBe('<div id="content"></div>')
+  })
+
+  it('stubs transition-group by default', () => {
+    const Comp = {
+      template: `<transition-group><div key="a" id="content" /></transition-group>`
+    }
+    const wrapper = mount(Comp)
+    expect(wrapper.find('#content').exists()).toBe(true)
+  })
+
   describe('stub slots', () => {
     const Component = {
       name: 'Parent',