fix: disable stubs for built-in components on shallow (#1409)

* fix: disable stubs for built-in components on shallow * fix: wrong import of BaseTransition
vuejs · Apr 19, 2022 · eb82845 · eb82845
1 parent 3ce2443
commit eb82845
Show file tree

Hide file tree

Showing 2 changed files with 138 additions and 70 deletions.
diff --git a/src/stubs.ts b/src/stubs.ts
@@ -2,6 +2,7 @@ import {
   transformVNodeArgs,
   Transition,
   TransitionGroup,
+  BaseTransition,
   Teleport,
   h,
   defineComponent,
@@ -157,7 +158,12 @@ export function stubComponents(
     const type = nodeType as VNodeTypes | typeof Teleport
 
     // stub transition by default via config.global.stubs
-    if (type === Transition && 'transition' in stubs && stubs['transition']) {
+    if (
+      (type === Transition || type === BaseTransition) &&
+      'transition' in stubs
+    ) {
+      if (stubs.transition === false) return args
+
       return [
         createStub({
           name: 'transition',
@@ -169,11 +175,9 @@ export function stubComponents(
     }
 
     // stub transition-group by default via config.global.stubs
-    if (
-      type === TransitionGroup &&
-      'transition-group' in stubs &&
-      stubs['transition-group']
-    ) {
+    if (type === TransitionGroup && 'transition-group' in stubs) {
+      if (stubs['transition-group'] === false) return args
+
       return [
         createStub({
           name: 'transition-group',
@@ -185,7 +189,9 @@ export function stubComponents(
     }
 
     // stub teleport by default via config.global.stubs
-    if (type === Teleport && 'teleport' in stubs && stubs['teleport']) {
+    if (type === Teleport && 'teleport' in stubs) {
+      if (stubs.teleport === false) return args
+
       return [
         createStub({
           name: 'teleport',

diff --git a/tests/mountingOptions/global.stubs.spec.ts b/tests/mountingOptions/global.stubs.spec.ts
@@ -392,87 +392,149 @@ describe('mounting options: stubs', () => {
     )
   })
 
-  it('stubs transition by default', () => {
-    const Comp = {
-      template: `<transition><div id="content" /></transition>`
-    }
-    const wrapper = mount(Comp)
+  describe('transition', () => {
+    it('stubs transition by default', () => {
+      const Comp = {
+        template: `<transition><div id="content" /></transition>`
+      }
+      const wrapper = mount(Comp)
 
-    expect(wrapper.html()).toBe(
-      '<transition-stub>\n' +
-        '  <div id="content"></div>\n' +
-        '</transition-stub>'
-    )
-  })
+      expect(wrapper.html()).toBe(
+        '<transition-stub>\n' +
+          '  <div id="content"></div>\n' +
+          '</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
-        }
+    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>')
     })
 
-    // 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('does not stub transition on shallow with false', () => {
+      const Comp = {
+        template: `<transition><div id="content" /></transition>`
+      }
+      const wrapper = mount(Comp, {
+        shallow: true,
+        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
-        }
+  describe('transition-group', () => {
+    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)
     })
 
-    // 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('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
+          }
+        }
+      })
 
-  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)
-  })
+      // 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('does not stub teleport by default', () => {
-    const Comp = {
-      template: `<teleport to="body"><div id="content" /></teleport>`
-    }
-    const wrapper = mount(Comp)
+    it('does not stub transition-group on shallow with false', () => {
+      const Comp = {
+        template: `<transition-group><div key="content" id="content" /></transition-group>`
+      }
+      const wrapper = mount(Comp, {
+        shallow: true,
+        global: {
+          stubs: {
+            'transition-group': false
+          }
+        }
+      })
 
-    expect(wrapper.html()).toBe(
-      '<!--teleport start-->\n' + '<!--teleport end-->'
-    )
+      // 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('opts in to stubbing teleport ', () => {
-    const Comp = {
-      template: `<teleport to="body"><div id="content" /></teleport>`
-    }
-    const wrapper = mount(Comp, {
-      global: {
-        stubs: {
-          teleport: true
-        }
+  describe('teleport', () => {
+    it('does not stub teleport by default', () => {
+      const Comp = {
+        template: `<teleport to="body"><div id="content" /></teleport>`
       }
+      const wrapper = mount(Comp)
+
+      expect(wrapper.html()).toBe(
+        '<!--teleport start-->\n' + '<!--teleport end-->'
+      )
     })
 
-    expect(wrapper.html()).toBe(
-      '<teleport-stub>\n' + '  <div id="content"></div>\n' + '</teleport-stub>'
-    )
+    it('opts in to stubbing teleport ', () => {
+      const Comp = {
+        template: `<teleport to="body"><div id="content" /></teleport>`
+      }
+      const wrapper = mount(Comp, {
+        global: {
+          stubs: {
+            teleport: true
+          }
+        }
+      })
+
+      expect(wrapper.html()).toBe(
+        '<teleport-stub>\n' +
+          '  <div id="content"></div>\n' +
+          '</teleport-stub>'
+      )
+    })
+
+    it('does not stub teleport with shallow', () => {
+      const Comp = {
+        template: `<teleport to="body"><div id="content" /></teleport>`
+      }
+      const wrapper = mount(Comp, {
+        shallow: true,
+        global: {
+          stubs: {
+            teleport: false
+          }
+        }
+      })
+
+      expect(wrapper.html()).toBe(
+        '<!--teleport start-->\n' + '<!--teleport end-->'
+      )
+    })
   })
 
   it('stubs component by key prior before name', () => {