不会触发自定义事件

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了不会触发自定义事件相关的知识,希望对你有一定的参考价值。

我正在使用Jest和vue测试工具为vueJS组件编写单元测试,我的问题如下

我有一个输入组件,它触发输入元素的2路数据绑定数据道具值的自定义事件,但当我尝试通过wrapper.setData(value:x)设置我的测试用例中的数据道具来验证自定义事件是通过wrapper.emitted()触发的,但似乎没有发生wrapper.emitted()总是返回一个空对象!

零件

<template>
  <input v-model="value" 
    :type="type"
    :id="id"
    :class="className"
    :maxlength="maxlength"
    :minlength="minlength"
    :pattern="pattern"
    :placeholder="placeholder"
    @input="handleInput"
  />
</template>
<script>
export default  
    name   : "inputText",
    props  : 
        maxlength: 
            type      : Number,
            // lock it to 100 chars 
            validator : (maxlength) => 
                return maxlength < 100 ? maxlength : 100
            
        ,
        minlength: 
            type: Number 
        ,
        // regex pattern can be supplied to match
        pattern: 
            type: String
        ,
        placeholder: 
            type    : String,
            default : "Type it hard"
        ,
        type: 
            type      : String,
            required  : true,
            validator : (type) => 
                return [ "text","tel","password","email","url" ].indexOf(type) !== -1
            
        
    ,
    methods: 
        handleInput (e) 
            this.$emit("text-input" , e.target.value )
        
    ,
    data: function() 
        return 
            value: "initial"
        
    

</script>

测试用例

import  mount  from "@vue/test-utils"
import  InputText  from "../InputText.vue"


describe("InputText Component" , () => 
    const wrapper = mount(InputText , 
        propsData:  maxlength: 10, type: "text" 
    )

    it("component should have a type" , () => 
        expect(wrapper.props()).toHaveProperty("type")
    )
    it("component type should be of text siblings" , () => 
        expect(wrapper.vm.$options.props.type.validator(wrapper.props("type"))).toBe(true)
    )
    it("component renders an input element" , () => 
        expect(wrapper.html()).toContain("input")
    )
    it("component handles new input value" , () => 
        const inputVal = "koko"
        wrapper.setData( value: inputVal )
        expect(wrapper.vm.$data.value).toBe(inputVal)
        console.log(wrapper)

    )
)
答案

这里的原因是setData方法不是更新v模型连接组件。您应该使用setValue来测试此行为。

以上是关于不会触发自定义事件的主要内容,如果未能解决你的问题,请参考以下文章

自定义事件

Branch.io 自定义事件计数不会增加快速链接

jQuery 添加自定义事件以及触发自定义事件

mui.fire()触发自定义事件

使用 Select2 而不是实际选择时不会触发 WooCommerce 事件

java 自定义事件的触发及监听