Custom event is not triggered

Question

I'm writing a unit test for a vueJS component using Jest and vue test utils , my problem is as follows

i have an input component where it triggers a custom event on 2 way data binding data prop value of input element but when i try to set the data prop in my test case through wrapper.setData({value : x}) to validate the custom event is triggered via wrapper.emitted() but it doesn't seem to happened the wrapper.emitted() is always returning an empty object !!

Component

<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>

Test Case

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)

    })
})

Sergey Shapirenko Sergey Shapirenko · Accepted Answer · 2019-04-19T07:59:52

The reason here is that setData method ain't update v-model connected component. You should use setValue to test this behavior.

Custom event is not triggered

1 Answers