насмешливый вызов API в vuex action

Question

У меня есть магазин Vuex с действием.

//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)
    })  
}

Теперь, чтобы проверить это!

// 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']
    ])  
  })
})

Пока это моя попытка. Это не работает по нескольким причинам.

1. Заглушка sinon в функции api также не заглушает импортированный api в файле actions.js.
2. Функция api возвращает обещание, поэтому тест вместо ожидания его разрешения просто возвращает утверждение, поэтому commit.args всегда будет []

Любой совет о том, как я могу проверить действие vuex. Я думаю, что основная трудность заключается в том, чтобы заглушить модуль API, и я довольно застрял. Любой совет приветствуется:)

Answer 1

Акция getAllProducts должна вернуть обещание.

getAllProducts ({ commit }) {
  return api.fetchAllProducts().then((products) => {
    commit('SET_ALL_PRODUCTS', products)
  })
}

Тогда ваш тестовый код должен быть таким:

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()
   })
})

Кроме того, мы можем использовать async / await, если вы не возвращаете обещание от действия.

 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()
 })