fix: delete any recursive components in shallow

Author: eddyerburgh

src/lib/util.js

@@ -7,3 +7,17 @@ export function throwError (msg: string): void {
 export function warn (msg: string): void {
   console.error(`[vue-test-utils]: ${msg}`)
 }
+
+const camelizeRE = /-(\w)/g
+export const camelize = (str: string): string => str.replace(camelizeRE, (_, c) => c ? c.toUpperCase() : '')
+
+/**
+ * Capitalize a string.
+ */
+export const capitalize = (str: string): string => str.charAt(0).toUpperCase() + str.slice(1)
+
+/**
+ * Hyphenate a camelCase string.
+ */
+const hyphenateRE = /\B([A-Z])/g
+export const hyphenate = (str: string): string => str.replace(hyphenateRE, '-$1').toLowerCase()

src/shallow.js

@@ -8,15 +8,27 @@ import {
 } from './lib/stub-components'
 import mount from './mount'
 import type VueWrapper from './wrappers/vue-wrapper'
+import {
+  camelize,
+  capitalize,
+  hyphenate
+} from './lib/util'
 
 export default function shallow (
   component: Component,
   options: Options = {}
 ): VueWrapper {
   const vue = options.localVue || Vue
+
+  // remove any recursive components added to the constructor
+  // in vm._init from previous tests
+  if (component.name && component.components) {
+    delete component.components[capitalize(camelize(component.name))]
+    delete component.components[hyphenate(component.name)]
+  }
+
   const stubbedComponents = createComponentStubsForAll(component)
   const stubbedGlobalComponents = createComponentStubsForGlobals(vue)
-
   return mount(component, {
     ...options,
     components: {

test/resources/components/recursive-component.vue

@@ -0,0 +1,21 @@
+<template>
+  <div>
+    <recursive-component
+    v-for="item in items"
+    :key="item"
+    :items="items ? items[0] : []"
+    >{{something}}</recursive-component>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'recursive-component',
+  props: ['items'],
+  computed: {
+    something () {
+      return 'value'
+    }
+  }
+}
+</script>

test/unit/specs/shallow.spec.js

@@ -6,6 +6,7 @@ import ComponentWithChild from '~resources/components/component-with-child.vue'
 import ComponentWithNestedChildren from '~resources/components/component-with-nested-children.vue'
 import ComponentWithLifecycleHooks from '~resources/components/component-with-lifecycle-hooks.vue'
 import ComponentWithoutName from '~resources/components/component-without-name.vue'
+import RecursiveComponent from '~resources/components/recursive-component.vue'
 
 describe('shallow', () => {
   let info
@@ -108,6 +109,28 @@ describe('shallow', () => {
     expect(wrapper.findAll(Component).length).to.equal(1)
   })
 
+  it('works correctly with find on recursive components', () => {
+    // this is for a bug that I've been unable to replicate.
+    // Sometimes components mutate their components, in this line—
+    RecursiveComponent.components = {
+      RecursiveComponent: { render: h => h('div') }
+    }
+
+    expect(shallow(RecursiveComponent, {
+      propsData: {
+        items: ['', '']
+      }
+    }).findAll(RecursiveComponent).length).to.equal(2)
+    RecursiveComponent.components = {
+      'recursive-component': { render: h => h('div') }
+    }
+    expect(shallow(RecursiveComponent, {
+      propsData: {
+        items: ['', '']
+      }
+    }).findAll(RecursiveComponent).length).to.equal(2)
+  })
+
   it('throws an error when the component fails to mount', () => {
     expect(() => shallow({
       template: '<div></div>',