Textfield update not working in Vue testing utility (just kidding)

Question

Hi, I'm new to jest and unit testing. I want to ask how to set value text input using vue test utils.

Soon I have a custom component for text input, here is my code

<input
    v-model="local_value"
    @keyup.enter="submitToParent"
    :class="input_class"
    :id="id"
    :disabled="is_disabled"
    :maxlength="max_length"
    :placeholder="placeholder"
    :autocomplete="(is_autocomplete) ? 'on' : 'off'"
    :name="id"
    :ref="id"
  />

This is my test

it("type something on field", async () => {
        const wrapper = shallowMount(TextInput, {
            propsData: {
                id: "my_input",
            }
        })

        // find component (its work properly) and I want to try inserting some text
        const input = wrapper.findComponent({ref: "my_input"})
        input.element.value = "sample text"
        input.setValue("sample text")

        // the value still empty string (""), idk what happens with my code
        console.log(wrapper.vm.local_value)
        expect(wrapper.vm.local_value).toBe("sample text")

Please tell me if you know the solution to this problem, thank you for your time

Answer 1

As far as I know, setValue is asynchronous, so you may need to set it await input.setValue('Sample text')