title: How to test DOM update in Vue.js with Mocha?
body: <p>I'm struggling to understand some basic concepts of unit testing in Vue.js using Karma, Mocha and Chai.</p>
  
  <p>This is my component:</p>
  
  <p><strong><code>VueExample.vue</code></strong></p>
  
  <pre><code>&lt;template&gt;
      &lt;div&gt;
          &lt;p&gt;{{ name }}&lt;/p&gt;
          &lt;input v-model="name"&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      export default {
          name: 'VueExample',
          data () {
              return {
                  name: 'Bruce Lee'
              };
          }
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>This is how I'm trying to test it:</p>
  
  <p><strong><code>VueExample.spec.js</code></strong></p>
  
  <pre><code>import Vue from 'vue';
  import VueExample from "../../../components/VueExample";
  
  describe('VueExample.vue', () =&gt; {
      let vm;
  
      beforeEach(() =&gt; {
          const Constructor = Vue.extend(VueExample);
          vm = new Constructor().$mount();
      });
  
      it('should change the name', done =&gt; {
          const input = vm.$el.querySelector('input');
          input.value = 'Chuck Norris';
          expect(vm.$el.querySelector('p').textContent).to.equal('Bruce Lee');
          Vue.nextTick(() =&gt;{
              expect(vm.$el.querySelector('p').textContent).to.equal('Chuck Norris');
              console.log(vm.$el.querySelector('p').textContent);
              done();
          });
      });
  });
  </code></pre>
  
  <p>I use Karma to run the tests and Chai as assertion library. Everything is properly configured in <code>karma.conf.js</code>. When I run this test, it fails. The text inside the tag <code>&lt;p&gt;</code> doesn't change. The <code>console.log</code> command outputs <em>Bruce Lee</em>.</p>
  
  <p>The tests are run with Firefox.</p>