mocking api call in vuex action - unit-testing

Question

I have a vuex store with an action.
//actions.js
import api from '#/api.js'
export default {
getAllProducts ({commit}) {
// call the api and return a promise with the products
api.fetchAllProducts().then((products) => {
commit('getAllProducts', products)
})
}
Now to test it!
// actions.spec.js
import actions from './actions.js'
import api from './api.js'
describe('shop actions', () => {
it('calls api and fetches products', () => {
let state = {items: []}
let commit = sinon.spy()
let stub = sinon.stub(api, 'fetchAllProducts')
stub.resolves('a product')
actions.getAllProducts({commit, state})
expect(commit.args).to.deep.equal([
['SET_ALL_PRODUCTS', 'a product']
])
})
})
This is my attempt so far. It doesn't work for a few reasons.
The sinon stub on the api function will not also stub the imported api on actions.js.
The api function returns a promise, so the test instead of waiting for it to resolve just returns the assertion, so commit.args will always be [ ]
Any advice on how I could test the vuex action. I think the main difficulty is in stubbing the api module, and I'm quite stuck. Any advice is appreciated :)

Answer 1

The action getAllProducts should return the promise.
getAllProducts ({ commit }) {
return api.fetchAllProducts().then((products) => {
commit('SET_ALL_PRODUCTS', products)
})
}
Then your test code should be like this:
describe('shop actions', () => {
it('calls api and fetches products', done => {
let state = {items: []}
let commit = sinon.spy()
let stub = sinon.stub(api, 'fetchAllProducts')
stub.resolves('a product')
actions.getAllProducts({commit, state}).then(() => {
expect(commit.args).to.deep.equal([
['SET_ALL_PRODUCTS', 'a product']
])
done()
})
stub.restore()
})
})
Also, we can use async/await if you are not returning promise from the action.
it('calls api and fetches products', async () => {
let state = {items: []}
let commit = sinon.spy()
let stub = sinon.stub(api, 'fetchAllProducts')
stub.resolves('a product')
await actions.getAllProducts({commit, state})
expect(commit.args).to.deep.equal([
['SET_ALL_PRODUCTS', 'a product']
])
stub.restore()
})