title: How to find input and simulate change value in vue-test-utils with jest, the best practices
body: <p>I am using Vue, Vuex, Jest.</p>
  
  <p>I have an input which has the <strong>v-model</strong> and <strong>@input</strong> vue attributes.
  Testing a component in my tests, I want to find the input and simulate a user's editing.</p>
  
  <p>I've tried <code>wrapper.setData({myModel: 'new value'})</code>
  and it does not solves the problem since it doesn't trigger <strong>@input</strong>.</p>
  
  <p>Here is what I am doing right now:</p>
  
  <pre class="lang-js prettyprint-override"><code>const inputWrapper = wrapper.find(".first.second .some-child input");
  inputWrapper.setValue('new value');
  </code></pre>
  
  <p>OR</p>
  
  <pre class="lang-js prettyprint-override"><code>const inputWrapper = wrapper.find(".special-class-for-testing-purposes1 input");
  inputWrapper.setValue('new value');
  </code></pre>
  
  <p>And this works fine. Except that I don't really want to use that combination of classes to find the input neither want to modify DOM for tests adding special <code>class</code> or <code>id</code>.</p>
  
  <blockquote>
    <p>Actually, in my case, I am using custom InputField component, so adding new attributes would cause changes of its implementation.</p>
  </blockquote>
  
  <p>That would be great if I could find my input like so:</p>
  
  <pre class="lang-js prettyprint-override"><code>wrapper.find({vModel: 'myModel'})
  // or
  wrapper.findByVModel('myModel')
  </code></pre>
  
  <p>Because in that case, I would not care about</p>
  
  <ol>
  <li>How DOM was built</li>
  <li>What attributes my input has</li>
  <li>How DOM may change in future</li>
  </ol>