所以我们有一个在单个组件中继承的 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>'