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

Posted 2023-02-16

【中文标题】如何测试 Vue.js mixin 的模板？

【英文标题】：How do you test a Vue.js mixin's template?

【发布时间】：2018-08-08 08:56:57

【问题描述】：

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

---

问题：

为什么 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>'

【问题讨论】：

我认为您需要一个示例组件来测试 mixin。这是我见过的唯一用例（以及文档如何提到 mixins）。如果你传递一个超级简单的组件，那么它几乎只是 mixin 代码。

据我所知，当前代码确实创建了一个继承 mixin 的空组件。因为它是 vue-test-util 的 'mount' 的第一个参数，所以该对象应该创建一个新的 Vue 组件。如果我错了，请纠正我。

【参考方案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')
    )
)