您如何测试Vue.js mixin的模板？

Question

So we have a Vue.js mixin which is inherited in individual components. The mixin has a template that is inherited by a handful of components and it works without problems. However, I can't work out how to test the template with vue-test-utils.

This is a simplified example of what I'm doing:

describe('MiMixin', () => {
    let wrapper

    wrapper = mount({
        mixins: [MiMixin]
    })

    it('should set the mixin template as the markup', () => {
        wrapper.find('.mi-component').trigger('click')
    })
})

When I run this I get the message:

[vue-test-utils]: find did not return .mi-component, cannot call trigger() on empty Wrapper

If I add a render function to the mounted Vue component, it just renders any markup that I return (as expected). However, when there is no render method (and therefore no template), the html of the component is undefined.

---

Questions:

1. Why does the 'find' function not find the template for the mixin?
2. Is it correct to test the mixin in isolation, or is it better to test it in a real component?

---

NOTE: The template does seem to exist in the wrapper under VueComponent:

VueWrapper {
    vnode: [Getter/Setter],
    element: [Getter/Setter],
    update: [Function: bound update],
    options: { attachedToDocument: false },
    version: 2.5,
    vm: 
    VueComponent {
     _uid: 0,
     _isVue: true,
     '$options': 
      { components: [Object],
        directives: {},
        filters: {},
        _base: [Object],
        _Ctor: [Object],
        beforeCreate: [Object],
        template: '<div class="mi-component"> // Template is here </div>'

Answer 1

You could pass in a mocked component with whatever template you need:

const Component = {
  template: '<div class="mi-component"></div>'
};

describe('MiMixin', () => {
    let wrapper

    wrapper = mount(Component, {
        mixins: [MiMixin]
    })

    it('should set the mixin template as the markup', () => {
        wrapper.find('.mi-component').trigger('click')
    })
})