I am using Vue, Vuex, Jest.

I have an input which has the v-model and @input vue attributes. Testing a ponent in my tests, I want to find the input and simulate a user's editing.

I've tried wrapper.setData({myModel: 'new value'}) and it does not solves the problem since it doesn't trigger @input.

Here is what I am doing right now:

const inputWrapper = wrapper.find(".first.second .some-child input");
inputWrapper.setValue('new value');

OR

const inputWrapper = wrapper.find(".special-class-for-testing-purposes1 input");
inputWrapper.setValue('new value');

And this works fine. Except that I don't really want to use that bination of classes to find the input neither want to modify DOM for tests adding special class or id.

Actually, in my case, I am using custom InputField ponent, so adding new attributes would cause changes of its implementation.

That would be great if I could find my input like so:

wrapper.find({vModel: 'myModel'})
// or
wrapper.findByVModel('myModel')

Because in that case, I would not care about

1. How DOM was built
2. What attributes my input has
3. How DOM may change in future

I am using Vue, Vuex, Jest.

I have an input which has the v-model and @input vue attributes. Testing a ponent in my tests, I want to find the input and simulate a user's editing.

I've tried wrapper.setData({myModel: 'new value'}) and it does not solves the problem since it doesn't trigger @input.

Here is what I am doing right now:

const inputWrapper = wrapper.find(".first.second .some-child input");
inputWrapper.setValue('new value');

OR

const inputWrapper = wrapper.find(".special-class-for-testing-purposes1 input");
inputWrapper.setValue('new value');

And this works fine. Except that I don't really want to use that bination of classes to find the input neither want to modify DOM for tests adding special class or id.

Actually, in my case, I am using custom InputField ponent, so adding new attributes would cause changes of its implementation.

That would be great if I could find my input like so:

wrapper.find({vModel: 'myModel'})
// or
wrapper.findByVModel('myModel')

Because in that case, I would not care about

1. How DOM was built
2. What attributes my input has
3. How DOM may change in future

• javascript
• vue.js
• jestjs
• vue-test-utils

3 Answers 3

The best way to simulate the typing is:

const input =  wrapper.find('input')
input.element.value = newValue
input.trigger('input')

You can't simulate a user's editing by bypassing the DOM and editing model data. User editing happens in the DOM. You have to find the DOM element in which you want the editing to happen and manipulate it to cause it to emit events.

If you use @change="xxx" in your input ponent, then you can use:

const input =  wrapper.find('input')
input.element.value = newValue
input.trigger('change')

Edit:

As asked by @Sagid, as far as I know, we have limited set of find methods. So findByVModel is not available apparently.

You can use one of below:

1. wrapper.find(xxx) - if you want to find class '.classname' or by ID find('#myid')

2. wrapper.findComponent(MyComponent) I believe this is the closest you can use to find specific custom ponent. But you must import MyComponent at the beginning.

I hope this would answer your question.