Automatically stub nested components with their names instead of `<!---->`

[orels1]

What problem does this feature solve?

In my workflow it is a pretty common use case to have a unit test that checks if some nested component is being rendered conditionally.

For example i have a component with a template like this (I use pug for templating, just so there won't be any confusion):

.container
  MyCustomComponent(v-if="condition" :title="cog.title")

And I want to have a unit test that makes sure that MyCustomComponent is only rendered when that condition is satisfied.

I'm coming from React background, where enzyme's shallow render passes component's display name by default. So if I would shallow render the setup above - the wrapper.html() would look something like this (if the v-if condition was met):

<div class="container">
  <MyCustomComponent title="something from cog.title" />
</div>

But in vue-test-utils the result would actually look like this:

<div class="container">
  <!---->
</div>

There is currently an option to supply a stubs object to shallow render method, but that requires you to manually write a list of components and their respective stubs, which is not time-efficient.

Currently I wrote a simple stub-generator, which acts somewhat like identity-object-proxy, and basically looks at the list of components in options of the component we want to render, and generates an object of stubs.

That allows me to achieve a result like this:

<div class="container">
  <mycustomcomponent title="something from cog.title" />
</div>

Which is basically what I need.

I can see more people that might want this kind of behaviour to speed up the unit testing, as this is a pretty common approach in other systems.

My stubs generator code for context:

// Using custom proxy to automatically stub with proper component names
const idObj = new Proxy({}, {
  get: function getter(target, key) {
    return `<${key} />`;
  },
});

// Generate the object of stubs with proxy
const genStubs = component => Object.keys(component.options.components).reduce((acc, comp) => {
  acc[comp] = idObj[comp];
  return acc;
}, {});

Pretty basic, but it allows me to simply use wrapper.find('<component name>'); to conditionally check if something was rendered, without manually supplying the stubs object every time, since I have a custom wrapper around shallow that passes my generator to the stubs option.

What does the proposed API look like?

I'm not sure if this should be the default behaviour, since people might rely on current way of stubbing in the existing code, but I can see something like a flag "useNamedStubs" for shallow options, or something similar.

[eddyerburgh]

This is a great idea! We could make it an option, and also have it as an option you can set in the config, so you only need to set it once:

VueTestUtils.config.shallowStubsAsText = true

Would you like to add a PR? I'm happy to if you're not able to

By the way, are you aware you can check a component has been rendered with shallow?

import MyCustomComponent from '~/MyCustomComponent.vue'

const wrapper = shallow(TestComponent)
wrapper.find(MyCustomComponent).exists()

This is sort of a clone of #28. When we add this feature, we can close #28

[orels1]

Sadly, I have too much on my hands atm to make a PR.

I was unaware that you can check if a component is included that way, but I think the text stubs will still help when you’re debugging stuff (logging out wrapper.html()) and it will make it a generally more streamlined experience.

Thanks for a quick response! :)

[orels1]

Actually, I think I'll look into it. Have some more time this week. Shouldn't be that complicated

[orels1]

So, yeah, that took more than a week :) I played around with the concept, and I'm a bit concerned about all the warnings in the console about using non-registered components with an approach like that. Was unable to get around them.

I will try to make a PR sometime this week, so maybe someone else can take a look as well.

[iztsv]

This feature will be useful for snapshot testing also.
@orels1 could you please explain in more details how you use your "stubs generator" for render stubs as string?

[orels1]

Hey @ilyaztsv you want me to share my current solution?
If so, you can find it used here: https://github.com/orels1/v3.cogs.red/blob/feature/%2326/unit-tests/test/unit/utils.js

The above is a set of handy utils I use to have better time testing. This approach drops a lot of warnings about "unregistered components", but if those are not a big deal for you - this setup works quite well. I was emulating the way shallow rendering works in enzyme

[eddyerburgh]

@orels1 You can ignore custom elements by adding them to the ignoredElements array—https://vuejs.org/v2/api/#ignoredElements. That should stop warnings

[iztsv]

@orels1 thanks for your solution. I'll try it with jest today.

[iztsv]

@orels1 @eddyerburgh Unfortunately, "stub-generator" solution does not work for me. May be because of I use jest + vue-test-utils.
I've already created the issue for that #465

[orels1]

@ilyaztsv my solution uses jest as well

[iztsv]

@orels1 yes. I was wrong about jest. I wrote about the reason here #465

[AlbertBrand]

I've written a stub generator that works with jest and vue-test-utils:

export function generateStubs(cmp) {
  return Object.values(cmp.components).reduce((stubs, stubCmp) => {
    const dashName = stubCmp.name
      .replace(/([a-z])([A-Z])/g, '$1-$2')
      .toLowerCase();
    stubs[dashName] = {
      render(createElement) {
        return createElement(dashName, this.$slots.default);
      },
    };
    return stubs;
  }, {});
}

This requires all components to have their name option set, be it in camel case or kebab case (see https://vuejs.org/v2/api/#name). It creates a stub component render function that renders the element and its children (if you're passing children you can see those in your snapshot as well).

Use it like this:

// components
export default {
  name: 'MyComponent',
  components: {
    FooBar,
  },
}

export default {
  name: 'FooBar',
}

// test
const component = shallow(MyComponent, {
  stubs: generateStubs(MyComponent),
});