Loading sub-components in VUE utils test

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.