Jestjs 如何触发v-自动完成；输入“；具有vue测试utils的事件？

我试图在单元测试中触发Vuetify

v-autocomplete

组件的“输入”事件。据我所知，单元测试与之非常相似，但出于某种原因，从未调用mock方法

factory方法只返回通过

mount

生成的组件实例，并添加本地存储、vue和vueLoading实例

我很想在这里有点洞察力，已经为此失去了几个小时，我开始有点疯狂

Vuetify版本：1.4.3

组成部分

<template>
    <span> <!-- span (or the other HTML element) around <v-autocomplete> is important -->
        <v-autocomplete
            :items="options"
            :value="selectedId"
            :label="$t('user.filter')"
            :menu-props="{ contentClass }"
            :loading="false"
            item-text="email"
            item-value="id"
            name="search_by_user"
            hide-details
            single-line
            clearable
            @input="updateValue($event)"
            @click.native="fetchUsers"
        />
    </span>
</template>


<script lang="ts">
    import { Component } from 'vue-property-decorator';
    import Vue from 'vue';

    @Component
    export default class AppAutocomplete extends Vue {
        private options: any[] = [{email: 'box1@gmail.com', id: 1}];
        private selectedId: string|undefined = undefined;
        private contentClass = 'user-search';

        private fetchUsers() {
        }

        public updateValue(event: any) {
        }
    }
</script>

从“vuex”导入{mapGetters}
导出默认值{
道具：{
价值：{
类型：字符串，
必填项：false，
默认值：null
},
标签：{
类型：字符串，
必填项：false，
默认值：null
},
黑暗：{
类型：布尔型，
必填项：false，
默认值：true
},
fieldClass：{
类型：字符串，
必填项：false，
默认设置：“选择用户搜索”
},
contentClass：{
类型：字符串，
必填项：false，
默认值：“用户搜索”
},
空白项：{
类型：对象，
必填项：false，
默认值：null
}
},
数据（）{
返回{
选择edid:this.value
}
},
计算：{
…映射获取程序（['users']），
选项（）{返回this.blankItem？[this.blankItem].concat（this.users）：this.users}
},
已创建（）{
if（this.value）this.fetchUsers（）
},
方法：{
获取用户（）{
如果（this.users.length）返回
此.$store.dispatch（'FETCH_USERS'{
字段：['id'，'email']，
筛选器：{active:'true'}
})
},
updateValue（值）{
this.selectedId=value
此.$emit（'input'，value）
}
}
}
。选择用户搜索{
溢出：隐藏；
垫底：1px；
}
.选择用户搜索。v-选择所选内容{
溢出：隐藏；
}
.选择用户搜索。v-选择\u选择{
空白：nowrap；
溢出：隐藏；
文本溢出：省略号；
}

单元测试

从'@vue/test-utils'导入{mount，shallowMount，createLocalVue}
从“Vuex”导入Vuex
从“vuex加载”导入VueLoading
从“Vuetify”导入Vuetify
从“manager/components/user/search.vue”导入UserSearch
常量工厂=（值，浅值=真）=>{
如果（！浅）{
返回装载（UserSearch，{…values}）
}
返回shallowMount（UserSearch，{…values}）
}
const localVue=createLocalVue（）
localVue.use（Vuex）
localVue.use（VueLoading）
localVue.use（Vuetify）
描述（'UserSearch'，（）=>{
让操作、获取、存储、vueLoading
在每个之前（（）=>{
行动={
FETCH_用户：jest.fn（）
}
吸气剂={
用户：（）=>[]
}
vueLoading=新的vueLoading（{useVuex:true}）
store=新的Vuex.store({
行动，
吸气剂
})
})
它（'在触发输入时调用“updateValue”方法'，异步（）=>{
常量方法={
updateValue:jest.fn（）
}
const wrapper=factory（{methods，store，localVue，vueload}，false）
const input=wrapper.find（'input'）
input.element.value='value'
触发器（'input'）
wait wrapper.vm.$nextTick（）
expect（方法['updateValue']）。toBeCalledWith（'value'））
})
})

我使用以下变量

组成部分

<template>
    <span> <!-- span (or the other HTML element) around <v-autocomplete> is important -->
        <v-autocomplete
            :items="options"
            :value="selectedId"
            :label="$t('user.filter')"
            :menu-props="{ contentClass }"
            :loading="false"
            item-text="email"
            item-value="id"
            name="search_by_user"
            hide-details
            single-line
            clearable
            @input="updateValue($event)"
            @click.native="fetchUsers"
        />
    </span>
</template>


<script lang="ts">
    import { Component } from 'vue-property-decorator';
    import Vue from 'vue';

    @Component
    export default class AppAutocomplete extends Vue {
        private options: any[] = [{email: 'box1@gmail.com', id: 1}];
        private selectedId: string|undefined = undefined;
        private contentClass = 'user-search';

        private fetchUsers() {
        }

        public updateValue(event: any) {
        }
    }
</script>

从“vue属性装饰器”导入{Component}；
从“Vue”导入Vue；
@组成部分
导出默认类AppAutocomplete扩展Vue{
私人选项：任意[]=[{电子邮件：'box1@gmail.com，id:1}]；
private selectedId:string |未定义=未定义；
私有内容类='用户搜索'；
私有用户（）{
}
公共更新值（事件：任意）{
}
}

单元测试

import { Wrapper, createLocalVue, mount } from '@vue/test-utils';
import Vue from 'vue';
import Vuetify from 'vuetify';

// @ts-ignore
import AppAutocomplete from '@/components/AppAutocomplete.vue';


describe('AppAutocomplete', () => {
    Vue.use(Vuetify);

    let wrapper: Wrapper<Vue>;
    let vm: any;

    beforeEach(() => {

        wrapper = mount(AppAutocomplete, {
            localVue: createLocalVue(),
            vuetify: new Vuetify({
                mocks: { $vuetify: { lang: { t: (val: string) => val } } },
            }),
            mocks: { $t: () => { /** */ } },
        });

        vm = wrapper.vm;
    });


    afterEach(() => wrapper.destroy());


    it(`calls "updateValue" method when input triggered`, ()  => {

        jest.spyOn(vm, 'updateValue');

        const autocompleteElem = wrapper.find('.v-autocomplete');

        autocompleteElem.vm.$emit('input', 'box1');

        expect(vm.updateValue).toBeCalledTimes(1);
        expect(vm.updateValue).toHaveBeenCalledWith('box1');

    });

});

从'@vue/test-utils'导入{Wrapper，createLocalVue，mount}；
从“Vue”导入Vue；
从“Vuetify”导入Vuetify；
//@ts忽略
从“@/components/AppAutocomplete.vue”导入AppAutocomplete；
描述（'AppAutocomplete'，（）=>{
Vue.use（Vuetify）；
让包装器：包装器；
让vm：任何；
在每个之前（（）=>{
包装=安装（安装完成{
localVue:createLocalVue（），
vuetify：新的vuetify({
mock:{$vuetify:{lang:{t:（val:string）=>val}}，
}),
模拟：{$t:（）=>{/***/}}，
});
vm=wrapper.vm；
});
每次（（）=>wrapper.destroy（））之后；
它（`在触发输入时调用“updateValue”方法'，（）=>{
jest.spyOn（vm，'updateValue'）；
const autocompletelem=wrapper.find（'.v-autocomplete'）；
autocompletelem.vm.$emit（'input'，'box1'）；
expect（vm.updateValue）.tobeCalledTime（1）；
expect（vm.updateValue）.toHaveBeenCalledWith（'box1'）；
});
});

用其他HTML元素包围v-autocomplete是很重要的。没有它，测试就会失败

---

Vuetify版本：2.1.12

能否添加有关

factory

返回的具体内容的详细信息？这只是用其他默认值安装组件吗？在每个块之前更新了问题以包含工厂定义-认为问题可能太吵了，但现在已经添加了它。