Description
What problem does this feature solve?
I'm using Vue Test Utils v1 along with Vue 2. I often mock $route and $router, but in some cases, I use a localVue on which Vue Router has been installed, then pass the router when mounting. Vue Router will do some cleanup when all the components into which it has been injected have been destroyed. For example, it will reset the current route to VueRouter.START_LOCATION. This cleanup is useful in testing, because without it, navigation may fail: if two consecutive tests navigate to the same location, that will result in an error unless the route has been reset.
I was calling the destroy() method of the VTU wrapper, but Vue Router didn't seem to be doing this cleanup. I realized that (I think) Vue Test Utils will usually create a parent component when mounting. When I pass router when mounting, the router seems to be injected into the component and into the parent component: router.apps.length === 2. That means that if I destroy the component, Vue Router won't do the cleanup. However, if I destroy the parent component, Vue Router will do the cleanup.
What does the proposed API look like?
I'm able to destroy the parent component by calling wrapper.vm.$parent.$destroy(). However, it took me a while to figure out that that's what I needed to do given my use of Vue Router.
Would it be possible for the destroy() method of the VTU wrapper to destroy the parent component? Is there a downside to having destroy() always destroy the parent component as well? If there is, how about adding an option to destroy() to destroy the parent component? Even if the default is not to destroy it, I think it'd be helpful to have that option: that would be a way to document that there is a parent component and that there are cases where it may be helpful to destroy it.