CODEWITHSUNDEEP
vuejs2jestjs
Frontend developer
Frontend developer

Reputation: 489

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

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

Upvotes: 1

Views: 4649

Answers (2)

Edward
Edward

Reputation: 5248

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.

Upvotes: 3

Benjamin Friedman
Benjamin Friedman

Reputation: 31

Try using setData from vue-test-utils:

https://vue-test-utils.vuejs.org/api/wrapper/#setdata-data

Upvotes: 0

Related Questions