title: How to test nested vuex actions that return promises?
body: <p>Here is the code from my component an the current test I have:</p>
  
  <pre><code>// component script
  import { mapActions } from 'vuex'
  
  export default {
    name: 'foo',
    mounted () {
      this.firstMethod()
        .then(() =&gt; {
          this.secondMethod()
        })
        .then(() =&gt; {
          this.thirdMethod()
        })
    },
    methods: {
      ...mapActions([
        'firstMethod',
        'secondMethod',
        'thirdMethod'
      ])
    }
  }
  
  // test
  import { shallow, createLocalVue } from 'vue-test-utils'
  import Vuex from 'vuex'
  import Foo from '../Foo.vue'
  
  const localVue = createLocalVue()
  
  localVue.use(Vuex)
  
  describe('Foo.vue', () =&gt; {
    let actions
    let store
    let wrapper
  
    beforeEach(() =&gt; {
      actions = {
        firstMethod: sinon.stub().resolves(),
        secondMethod: sinon.stub().resolves(),
        thirdMethod: sinon.stub(),
      }
  
      store = new Vuex.Store({
        actions
      })
  
      wrapper = shallow(Foo, { store, localVue })
    })
  
    it.only('calls store actions when mounted', () =&gt; {
      expect(actions.firstMethod.called).toBe(true) // succeedes
      expect(actions.secondMethod.called).toBe(true) // fails
      expect(actions.thirdMethod.called).toBe(true) // fails
    })
  })
  </code></pre>
  
  <p>I was expecting all three <code>expects</code> to succeed, since I understand that the <code>.resolves()</code> method makes the <code>stub</code> to return a resolved promise, and that would in turn trigger the next call under the <code>then</code> method on the component. But its not.</p>
  
  <p>How should I test that the Vuex actions are indeed called?</p>
  
  <p>I'm open to the idea of multiple tests instead of just one, if that makes sense. Or even to refactor the 3 calls to something else, as long as they are called in that order when successful.</p>
  
  <p>Thanks! </p>