title: Vue test utils is updating the component data but not re-rendering the dom
body: <p>I'm trying to test the template of my Vue app after making an ajax request which is changing one variable of the component' data. This variable (books) is use to conditional render the gallery</p>
  
  <p><strong>CONTEXT</strong>: I want to create a gallery in order to show the books I have stored in my back end. For this, I fetching my books on mounting the component. The result of this is set in the variable <strong>books</strong>. What I'm trying to test is that, after the ajax call, the component renders the gallery with the books</p>
  
  <p><strong>PROBLEM</strong>: When the books variable is set, the div <code>&lt;div v-else-if='books.length &gt; 0'&gt;SHOW GALLERY&lt;/div&gt;</code> should be rendered, but the "else" div (<code>&lt;div v-else class='loader'&gt;Loading&lt;/div&gt;</code>) is still rendered</p>
  
  <p>The next two blocks of code are the component and the test itself:</p>
  
  <p><strong>BookGallery.vue</strong> (component I'm testing)</p>
  
  <pre><code> &lt;template&gt;
        &lt;v-content&gt;
            &lt;v-container fluid&gt;
  
                 /*** Conditional rendering: After the ajax request books &gt; 0, so this div should be rendered ***/
                &lt;div v-if='books.length &gt; 0'&gt;SHOW GALLERY&lt;/div&gt;
  
                &lt;div v-else class='loader'&gt;Loading&lt;/div&gt;
            &lt;/v-container&gt;
        &lt;/v-content&gt;
      &lt;/template&gt;
  
      &lt;script lang='ts'&gt;
        import {Component} from 'vue-property-decorator';
        import {MyMixin} from '../mixin';
  
        @Component({components: {BookInformation}})
        export default class BookGallery extends MyMixin {
            public books: string[] = [];
  
            public async mounted() {
  
                 /*** books is set as the result of the ajax request ***/
  
                 this.books = (await this.$http.get(this.host + '/books')).data;
            }
        }
      &lt;/script&gt;
  
      &lt;style scoped lang='scss'&gt;&lt;/style&gt;
  </code></pre>
  
  <p><strong>TEST</strong></p>
  
  <pre><code>    @test
      public async 'after calling the books, the gallery show all of them'() {
  
          /*** MOCKING THE RESPONSE ***/
          TestCase.OK_200({
              books: [
                  { uri: 'img/covers/1.jpg', title: 'El Prinicipito'},
                  { uri: 'img/covers/2.jpeg', title: 'The Lord of the Rings'},
              ],
          });
  
  
          /*** MOUNTING MY COMPONENT ***/
          const wrapper = TestCase.shallowMount(BookGallery);
  
  
          /** ASSERTING **/
          await flushPromises().then(() =&gt; {
  
              /**  the first "expect" passes, so books &gt; 0 = true **/
              expect(wrapper.vm.$data.books).to.eqls({
                  books: [
                      { uri: 'img/covers/1.jpg', title: 'El Prinicipito'},
                      { uri: 'img/covers/2.jpeg', title: 'The Lord of the Rings'},
                  ],
              });
  
              /** This is failing. The application should read 'SHOW GALLERY' when books &gt; 0 (something tested in the previous assert), as explained in the first comment of the component's template, but is not updating the dom, only the data **/
              see('SHOW GALLERY');
          });
      }
  </code></pre>
  
  <blockquote>
    <p><strong>The QUIESTION</strong>: How can I update my DOM for my very last assert -<code>see("SHOW GALLERY")</code>-?</p>
  </blockquote>
  
  <p><strong>UPDATE</strong></p>
  
  <p><strong>see Function</strong>
  The function only searches for a HTML element in the wrapper that vue-test-utils is using for mounting the application. In this case, as I have left it null, it is searching the text "SHOW GALLERY" over the whole HTML file</p>
  
  <pre><code>export const see = (text: string, selector?: string) =&gt; {
      const wrap = selector ? wrapper.find(selector) : wrapper;
  
      expect(wrap.html()).contains(text);
  };
  </code></pre>