fix: Stub instance of the same component

src/mount.ts

@@ -342,7 +342,8 @@ export function mount(
     component = originalComponent
   }
 
-  addToDoNotStubComponents(component)
+  // Don't stub component only on root level, but still stub if used inside
+  addToDoNotStubComponents(component, true)
   // We've just replaced our component with its copy
   // Let's register it as a stub so user can find it
   registerStub({ source: originalComponent, stub: component })

src/vnodeTransformers/stubComponentsTransformer.ts

@@ -36,10 +36,14 @@ interface StubOptions {
   renderStubDefaultSlot?: boolean
 }
 
-const doNotStubComponents: WeakSet<ConcreteComponent> = new WeakSet()
+const doNotStubComponents = new WeakMap<ConcreteComponent, boolean>()
 const shouldNotStub = (type: ConcreteComponent) => doNotStubComponents.has(type)
-export const addToDoNotStubComponents = (type: ConcreteComponent) =>
-  doNotStubComponents.add(type)
+const shouldNotStubRoot = (type: ConcreteComponent) =>
+  !!doNotStubComponents.get(type)
+export const addToDoNotStubComponents = (
+  type: ConcreteComponent,
+  onlyRoot?: boolean
+) => doNotStubComponents.set(type, !!onlyRoot)
 
 const normalizeStubProps = (props: ComponentPropsOptions) => {
   // props are always normalized to object syntax
@@ -163,7 +167,10 @@ export function createStubComponentsTransformer({
     }
 
     if (shouldNotStub(type)) {
-      return type
+      // Either don't stub everytime or only on root level
+      if (!instance?.parent || !shouldNotStubRoot(type)) {
+        return type
+      }
     }
 
     const registeredName = getComponentRegisteredName(instance, type)

tests/components/RecursiveComponent.vue

@@ -0,0 +1,14 @@
+<template>
+  <div>
+    <Hello />
+    <RecursiveComponent v-if="first" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import Hello from './Hello.vue'
+
+defineProps<{
+  first?: boolean
+}>()
+</script>

tests/shallowMount.spec.ts

@@ -4,6 +4,7 @@ import { mount, shallowMount, VueWrapper } from '../src'
 import ComponentWithChildren from './components/ComponentWithChildren.vue'
 import ScriptSetupWithChildren from './components/ScriptSetupWithChildren.vue'
 import DynamicComponentWithComputedProperty from './components/DynamicComponentWithComputedProperty.vue'
+import RecursiveComponent from './components/RecursiveComponent.vue'
 
 describe('shallowMount', () => {
   it('renders props for stubbed component in a snapshot', () => {
@@ -73,6 +74,21 @@ describe('shallowMount', () => {
     )
   })
 
+  it('stub instance of same component', () => {
+    const wrapper = mount(RecursiveComponent, {
+      shallow: true,
+      props: {
+        first: true
+      }
+    })
+    expect(wrapper.html()).toEqual(
+      '<div>\n' +
+        '  <hello-stub></hello-stub>\n' +
+        '  <recursive-component-stub first="false"></recursive-component-stub>\n' +
+        '</div>'
+    )
+  })
+
   it('correctly renders slot content', () => {
     const ComponentWithSlot = defineComponent({
       template: '<div><slot></slot></div>'