不会触发自定义事件
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来测试此行为。
以上是关于不会触发自定义事件的主要内容,如果未能解决你的问题,请参考以下文章