Testing Child Component's input field with Jest (Vue)

Question

I am implementing unit test cases for my vue application with jest

I have a situation where i need to test a input field in a child component.

<parent-component>
    <child-component>
       <input type="text" v-model="inputValue" />
    </child-component>
</parent-component>

My test goes like below

it('check empty validation', () => {
   const wrapper = mount(parentComponent, {
            propsData: {
             test:test
            }
   });
   wrapper.find(childComponent).vm.inputValue = "";
   expect(wrapper.vm.errorMessage).toBe("cannot be empty");
});

But setting model doesnt seems to be working.

How to set value to text box and test the same is my question

Thanks

Edd Edd · Accepted Answer · 2018-11-23T17:20:56

You can use the Vue Test Utils setValue method on the element:

it('check empty validation', () => {
  const wrapper = mount(parentComponent, {
    propsData: {
      test: test
    }
  })

  wrapper.find('input').setValue('')

  expect(wrapper.vm.errorMessage).toBe('cannot be empty')
})

This sets the element value property and forces the model to update.

Testing Child Component's input field with Jest (Vue)

2 Answers