Update text field in vue test utils (jest) not working

Question

Hi i am new in jest and unit testing. i want to ask how to set value text input using vue test utils.

shortly I have custom component for text input, its 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"
  />

and it's 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 known solution for this problem, thank you for your time

alextrastero · Accepted Answer · 2022-03-02 09:30:43Z

1

As far as I know, setValue is async, so you might need to set it with await input.setValue('sample text')

answered Mar 2, 2022 at 9:30

alextrastero

4,3503 gold badges26 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Anne · Accepted Answer · 2022-04-04 05:30:23Z

If you're setting the vm's local_value value, you'd want to set it as:

const wrapper = shallowMount(TextInput)
await wrapper.setData({
   local_value: 'sample text'
})

.... if the local_value is declared in data(), or:

const wrapper = shallowMount(TextInput)
await wrapper.setProps({
   local_value: 'sample text'
})

... if the local_value is declared in props() in your component.

Then check it with:

expect(wrapper.vm.local_value).toBe('sample text')

Although that's just the vm value and not rendered value on DOM.

If you'd like to check including the rendered value, you have to declare first the property value on your component for it to be testable:

<input
    v-model="local_value"
    // ... rest of the properties
    :value="local_value"
/>

and test it with:

const input = await wrapper.findComponent({ ref: "my_input" })
expect(input.attributes('value').toBe('sample text')

Ideally, your test will look like this:

it('should have input value' async () => {
  const wrapper = shallowMount(TextInput)
  await wrapper.setProps({  local_value: 'sample text' })
  
  const input = await wrapper.findComponent({ ref: 'my_input' })
  expect(wrapper.vm.local_value).toBe('sample text')
  expect(input.attributes('value').toBe('sample text')
})

👍 Some tip:

You can check the rendered attributes input by commenting all expect and put:

expect(input.attributes('').toBe('random chars here to force an error')

Console will display the errors with the expected attributes output

Collectives™ on Stack Overflow

Update text field in vue test utils (jest) not working

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related