I have been testing sub-components recently where you would be wrapping them within the slots. Such as:
<wrapper> <slot><slot> </wrapper>
And parsing through other subcomponents like so:
<wrapper> <Slide>...content...</Slide> <Slide>...content...</Slide> <Slide>...content...</Slide> </wrapper>
Now in your jest test file you need to load your component that you’re testing as well as the sub-component.
Then with the sub-component imported you need to parse it through createLocalVue
like so:
import { createLocalVue, mount, } from "@vue/test-utils"; import wrap from "~/components/Theme/light/tabs/wrapper"; import tab from "~/components/Theme/light/tabs/tab"; const localVue = createLocalVue(); localVue.component('tab', tab) const wrapper = mount(wrap, { //register components this way first using stubgs components: {tab}, slots: { default: `<tab name="first" :active="true">this is a test</tab><tab name="second">This is a tests</tab>` }, localVue });
once you import it and add it to the localVue.component
you then load it up the mount options on line 19. Check the code above to see how I imported my sub-component tab
Using the createLocalVue
creates a wrapper that you can just import into the mount so that you can use the Tab
component inside the main wrapper component to test it. It works and renders properly with access to the $parent
properties in the child element.