2

所以我们有一个在单个组件中继承的 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 是未定义的。

问题：

  1. 为什么'find'函数找不到mixin的模板？
  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>'
4

1 回答 1

6

您可以使用所需的任何模板传入一个模拟组件：

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')
    })
})
于 2019-06-23T20:49:32.750 回答