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组件添加渲染功能，它只会呈现我返回的任何标记（如预期的那样）。但是，当没有渲染方法（因此没有模板）时，组件的html是未定义的。

问题：

为什么'find'功能找不到mixin的模板？
单独测试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')
    })
})

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

1 个答案: