Mounting only the slots of stubbed child components

Original: https://github.com/vuejs/vue-test-utils/issues/1216

---

What problem does this feature solve?

We currently have a helper file in our codebase we pull in to testing files, it contains this beauty:

/**
 * Create a component stub that will render all included slots from the
 * parent component. This lets you test the slots you've included in child component
 * without having to fully mount the child component.
 *
 * * Notes on implementation *
 * There is no one place this is clearly laid out. This thread gave the starting point:
 *
 * https://github.com/vuejs/vue-test-utils/issues/85
 *
 * but modifying the function requires understanding Vue's functional components
 * and the `render` function:
 *
 * https://vuejs.org/v2/guide/render-function.html
 *
 * especially the arguments that `createElement` can take:
 *
 * https://vuejs.org/v2/guide/render-function.html#createElement-Arguments
 *
 * In short, this produces a <div> with only the child components slots, but none of
 * its other functionality.
 *
 * @return {object} The functional component definition
 */
componentStubWithSlots: function () {
  return {
    render: function (createElement) {
      return createElement('div', [Object.values(this.$slots)]);
    }
  };
}

It would be nice if there was a more elegant way of handling this, or at least better documented (not requiring links to 3 different places).

What does the proposed API look like?

That helper function gets used like so:

test('Show only mine checkbox adds showOnlyMine to the query params', async () => {
  const wrapper = shallow(reservationsList, {
    store,
    localVue,
    stubs: {
      RouterLink: RouterLinkStub,
      'base-table': helpers.componentStubWithSlots()
    },
    mocks: { $ga }
  });

  let checkbox = wrapper.find('[data-test="showOnlyMineCheckbox"]');
  checkbox.trigger('click');

  expect(wrapper.vm.paramsForGettingListItems)
    .toEqual({ showOnlyMine: true });
});

I think it would be nicer if there was something like that built in, so we could just do this:

test('Show only mine checkbox adds showOnlyMine to the query params', async () => {
  const wrapper = shallow(reservationsList, {
    store,
    localVue,
    stubs: {
      RouterLink: RouterLinkStub
    },
    stubComponentSlots: [
      'base-table'
    ],
    mocks: { $ga }
  });

  let checkbox = wrapper.find('[data-test="showOnlyMineCheckbox"]');
  checkbox.trigger('click');

  expect(wrapper.vm.paramsForGettingListItems)
    .toEqual({ showOnlyMine: true });
});

We use this helper a lot, it seems like the kind of common “utility” that would be in Vue-Test-Utils.

[TheJaredWilcurt]

Another use case for this to shallow mount a view/component that contains a 3rd-party component. Where you don’t want to load the complexity of that 3rd party component, but you do want to test your code being passed into the slot. It can make snapshots more useful and less cluttered.

[lmiller1990]

@dobromir-hristov is looking into this. The idea is looking to be to provide this as a config users can enable, so you can have the behavior you like. eg config.shallowMount = { renderSlots: true } or something, since the default is stubbing them.