title: How to test async method in Vuejs's component when using jest and avoriaz
body: <p>For instance, I have a component looks like this.</p>
  
  <pre><code>&lt;template&gt;
  &lt;div id="app"&gt;
    &lt;button class="my-btn" @click="increment"&gt;{{ val }}&lt;/button&gt;
  &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    data() {
      return {
        val: 1,
      };
    },
    methods: {
      increment() {
        fetch('httpstat.us/200').then((response) =&gt; {
          this.val++;
        }).catch((error) =&gt; {
          console.log(error);
        });
      },
    },
  }
  &lt;/script&gt;
  </code></pre>
  
  <p><em>You can also check <a href="https://jsfiddle.net/ua7d1bzg/" rel="noreferrer">this fiddle</a> as a simplified demo</em></p>
  
  <p>In order to do unit test for this component, I wrote code like this.</p>
  
  <pre><code>// Jest used here
  test('should work', () =&gt; {
    // wrapper was generated by using avoriaz's mount API
    // `val` was 1 when mounted.
    expect(wrapper.data().val).toBe(1);
    // trigger click event for testing
    wrapper.find('.my-btn')[0].trigger('click');
    // `val` should be 2 when the button clicked.
    // But how can I force jest to wait until `val` was set?
    expect(wrapper.data().val).toBe(2);
  });
  </code></pre>
  
  <p>It didn't work since <code>expect</code> ran before <code>fetch</code>'s done, but I've no idea how to let jest wait until promise function done.<br>
  So how can I test in this use case?</p>
  
  <p><strong>Update</strong> I tried nextTick but got no luck.</p>
  
  <pre><code> PASS  src/Sample.spec.js
    Sample.vue
      ✓ should work (31ms)
  
  Test Suites: 1 passed, 1 total
  Tests:       1 passed, 1 total
  Snapshots:   0 total
  Time:        1.46s
  Ran all test suites.
    console.error node_modules/vue/dist/vue.runtime.common.js:477
      [Vue warn]: Error in nextTick: "Error: expect(received).toBe(expected)
  
      Expected value to be (using ===):
        2
      Received:
        1"
  
    console.error node_modules/vue/dist/vue.runtime.common.js:564
      { Error: expect(received).toBe(expected)
  
      Expected value to be (using ===):
        2
      Received:
        1
          at /path/to/sample-project/src/Sample.spec.js:16:30
          at Array.&lt;anonymous&gt; (/path/to/sample-project/node_modules/vue/dist/vue.runtime.common.js:699:14)
          at nextTickHandler (/path/to/sample-project/node_modules/vue/dist/vue.runtime.common.js:646:16)
          at &lt;anonymous&gt;
          at process._tickCallback (internal/process/next_tick.js:188:7)
        matcherResult: 
         { actual: 1,
           expected: 2,
           message: [Function],
           name: 'toBe',
           pass: false } }
  </code></pre>
  
  <p>Here's the complete test code.</p>
  
  <pre><code>import { mount } from 'avoriaz';
  import Sample from './Sample.vue';
  import Vue from 'vue';
  
  /* eslint-disable */
  
  describe('Sample.vue', () =&gt; {
  
    test('should work', () =&gt; {
      const wrapper = mount(Sample);
      // console.log(wrapper.data().val);
      expect(wrapper.data().val).toBe(1);
      wrapper.find('.my-btn')[0].trigger('click');
      Vue.nextTick(() =&gt; {
          // console.log(wrapper.data().val);
          expect(wrapper.vm.val).toBe(2);
          done();
      })
    });
  
  })
  </code></pre>
  
  <p><strong>Update 2</strong> I added <code>done</code>, but it still doesn't work. Here's the error message.  </p>
  
  <pre><code>  console.error node_modules/vue/dist/vue.runtime.common.js:477
      [Vue warn]: Error in nextTick: "Error: expect(received).toBe(expected)
  
      Expected value to be (using ===):
        2
      Received:
        1"
  
    console.error node_modules/vue/dist/vue.runtime.common.js:564
      { Error: expect(received).toBe(expected)
  
      Expected value to be (using ===):
        2
      Received:
        1
          at /path/to/sample-project/src/Sample.spec.js:16:30
          at Array.&lt;anonymous&gt; (/path/to/sample-project/node_modules/vue/dist/vue.runtime.common.js:699:14)
          at nextTickHandler (/path/to/sample-project/node_modules/vue/dist/vue.runtime.common.js:646:16)
          at &lt;anonymous&gt;
          at process._tickCallback (internal/process/next_tick.js:188:7)
        matcherResult: 
         { actual: 1,
           expected: 2,
           message: [Function],
           name: 'toBe',
           pass: false } }
  
   FAIL  src/Sample.spec.js (7.262s)
    ● Sample.vue › should work
  
      Timeout - Async callback was not invoked within timeout specified by jasmine.DEFAULT_TIMEOUT_INTERVAL.
  
        at pTimeout (node_modules/jest-jasmine2/build/queueRunner.js:53:21)
        at Timeout.callback [as _onTimeout] (node_modules/jsdom/lib/jsdom/browser/Window.js:523:19)
        at ontimeout (timers.js:469:11)
        at tryOnTimeout (timers.js:304:5)
        at Timer.listOnTimeout (timers.js:264:5)
  
    Sample.vue
      ✕ should work (5032ms)
  
  Test Suites: 1 failed, 1 total
  Tests:       1 failed, 1 total
  Snapshots:   0 total
  Time:        8.416s
  Ran all test suites.
  </code></pre>