javascript - 你如何测试 Vue.js mixin 的模板？

Question

所以我们有一个在各个组件中继承的 Vue.js mixin。 mixin 有一个由少数组件继承的模板，它可以正常工作。但是，我不知道如何使用 vue-test-utils 测试模板。

这是我正在做的一个简化示例:

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

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

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

当我运行它时，我收到消息:

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

如果我向挂载的 Vue 组件添加一个渲染函数，它只会渲染我返回的任何标记(如预期的那样)。但是，当没有 render 方法(因此没有模板)时，组件的 html 是未定义的。

---

问题:

1. 为什么“查找”函数找不到混合宏的模板？
2. 单独测试 mixin 是否正确，还是在真实组件中测试它更好？

---

注意:模板似乎确实存在于 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

您可以使用您需要的任何模板传入模拟组件:

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')
    })
})