Vue-test-utils: Dive inside ChildComponent to find SubChildComponent when shallowMount

[trollepierre]

What problem does this feature solve?

I have a Component with a Template

<template> <my-template> <child-component slot="header"/> <child-component-two/> <child-component-three/> <app-button slot="button"> send <v-icon slot="right"> keyboard_backspace </v-icon> </app-button> </my-template> </template>

---

I would like to stop stubbing all the sub-children in my snapshot tests

const wrapper = mount(Component, { localVue, stubs: ['ChildComponent', 'ChildComponentTwo', ChildComponentThree', 'AppButton'], }) expect(wrapper.element).toMatchSnapshot()

---

I propose to follow react => enzyme feature called 'dive'

https://github.com/airbnb/enzyme/blob/master/docs/api/ShallowWrapper/dive.md

---

const wrapper = shallowMount(Component) expect(wrapper.find(MyTemplate).dive().find('ChildComponent').length).toEqual(1);

What does the proposed API look like?

I don't know what to write here

[trollepierre]

We tried to use shallowMountbut it renders only <my-template> mock.

So it is mandatory for us to use mount... But it renders all the children, and sub-children, and sub-sub-children...
So I need to stub the SubChildren

---

We also tried to shallowMount(Component) + find(MyTemplate) + shallowMount but it doesn't work

[lmiller1990]

At the moment I don't think there is any way to accomplish this - Enzyme offers the ability to choose how "deep" to render.

This would be a really cool feature to work on but fairly sure it would be pretty complex. Is this something that vue-test-utils will look to support in the near future @eddyerburgh ?

[eddyerburgh]

We could look into adding this 👍

I prefer adding a depth option to shallow, instead of adding a dive method.

[lmiller1990]

Where would be a good place to start? I'd be interested in having a hack.

[eddyerburgh]

Most of the work is done in the add-stubs file

[trollepierre]

@eddyerburgh :
to me, when testing, it's better to use the minimum 'depth' => depth should be minimum, like 1 by default.

In Enzyme, they choose not to implement it:
https://github.com/airbnb/enzyme/issues/1138

What do you think about it?

[eddyerburgh]

We're not going to add a dive method, but we will a depth option to shallowMount.

[eddyerburgh]

Closing in favor of #867