Feature Request: ComponentStub helper

[chrisnicola]

I've added this helper in my own codebase, but if useful to this project I'm happy to submit a PR. The code is below.

export function ComponentStub(name) {
  this.rendered = false;
  this.name = name;
  this.render = (h) => {
    this.rendered = true;
    return h();
  };
}

export default function componentStub(component, ...components) {
  const stubs = {};
  components.forEach((name) => {
    stubs[name] = new ComponentStub(name);
  });
  component.components = { ...component.components, ...stubs };
}

Usage is simple:

import { shallow } from 'avoriaz';
import { componentStub } from '@/lib/avoriaz';
import Component from './Component';

componentStub(Component, 'router-link', 'router-view');

As a small bonus it provides stub telemetry for the render function.

[eddyerburgh]

@chrisnicola this looks good, although I would call it stubComponents rather than componentStub, to indicate that it's stubbing the components of Component.

I'd be happy to accept a PR for this feature, if you add it to the docs, and includes tests in your PR

Right now I'm in the process of writing the official vue-test-utils library, which is nearly complete. I've added a stub option to mount/shallow which stubs the Component's components. So your example would look something like this:

const wrapper = mount(Component, {
  stub: {
    'router-link': '<div />',
    'router-view': '<div />'
  }
})

Although I'm planning on adding the option to just pass true, so that a standard stub is used (similar to what your ComponentStub. So it would look like this:

const wrapper = mount(Component, {
  stub: {
    'router-link': '<div />',
    'router-view': '<div />'
  }
})

You can see the code here - https://github.com/vuejs/vue-test-utils/blob/master/src/lib/create-instance.js#L34

[chrisnicola]

Sorry you're right on the name, initially I named it based on just exporting single stub, but realized that was kind of verbose in the tests and I could add a nice helper function. Failed to rename it afterwards.

I really like that API for vue-test-utils looking forward to using it soon. Can I suggest that <div /> be a default, so if you simply pass an array of component names it will work and reduce repetition. Though, as far as I know for testing purposes it isn't really necessary to render anything, but correct me if I'm wrong about that.

[eddyerburgh]

@chrisnicola yes good idea on the array for options.stub. I'll add it to the todo

[ndabAP]

@eddyerburgh, so, this library will soon be deprecated?

[eddyerburgh]

@ndabAP no I'll continue to support and evolve it, but most of my time will be spent on vue-test-utils