Vuex Action中API调用的模拟测试实现指导问询

我有一个包含Action的Vuex Store，其Action代码如下：

// actions.js
import api from '@/api.js'
export default {
  getAllProducts ({commit}) {
    // 调用API并返回包含产品的Promise
    api.fetchAllProducts().then((products) => {
      commit('getAllProducts', products)
    })
  }
}

现需对该Action进行测试，已编写部分测试代码：

// 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 stu...

请指导完成这段Vuex Action中模拟API调用的完整测试实现。

完整测试实现（基于Sinon） #

我们可以用Sinon来模拟API调用，确保Action的逻辑符合预期，同时避免触发真实的网络请求。下面是补全后的测试代码：

// actions.spec.js
import actions from './actions.js'
import api from './api.js'
import sinon from 'sinon'

describe('shop actions', () => {
  it('calls api and fetches products', async () => {
    // 1. 预设测试用的模拟产品数据
    const mockProducts = [{ id: 1, name: 'Test Product 1' }, { id: 2, name: 'Test Product 2' }]
    
    // 2. 模拟API的fetchAllProducts方法，让它返回预设数据的Promise
    const fetchStub = sinon.stub(api, 'fetchAllProducts').resolves(mockProducts)

    // 3. 创建Sinon间谍函数，跟踪commit的调用情况
    const commit = sinon.spy()

    // 4. 调用要测试的Action，传入包含commit的context对象
    await actions.getAllProducts({ commit })

    // 5. 断言验证逻辑是否正确
    // 验证API方法被调用了一次
    sinon.assert.calledOnce(fetchStub)
    // 验证commit被传入正确的mutation名称和产品数据
    sinon.assert.calledWith(commit, 'getAllProducts', mockProducts)

    // 6. 恢复被模拟的API方法，避免影响其他测试用例
    fetchStub.restore()
  })
})

关键步骤说明 #

• 模拟API方法：用sinon.stub替换真实的api.fetchAllProducts，通过resolves让它返回一个已完成状态的Promise，这样就不会触发真实的网络请求。
• 跟踪commit调用：sinon.spy创建的间谍函数会记录commit的调用次数、传入参数等信息，方便后续断言。
• 异步处理：因为Action中的API调用是异步的，所以测试函数要标记为async，并await Action的执行，确保所有异步逻辑完成后再进行断言。
• 清理模拟：测试结束后调用restore()恢复被修改的API方法，防止对其他测试用例造成污染。

替代方案（使用Jest模拟，无需Sinon） #

如果你的项目用Jest作为测试框架，也可以直接用Jest的内置模拟能力实现：

// actions.spec.js
import actions from './actions.js'
import api from './api.js'

// 自动模拟整个api模块
jest.mock('./api.js')

describe('shop actions', () => {
  it('calls api and fetches products', async () => {
    const mockProducts = [{ id: 1, name: 'Test Product' }]
    // 设置模拟方法的返回值
    api.fetchAllProducts.mockResolvedValue(mockProducts)

    // 创建Jest的mock函数跟踪commit
    const commit = jest.fn()

    await actions.getAllProducts({ commit })

    // Jest风格的断言
    expect(api.fetchAllProducts).toHaveBeenCalledTimes(1)
    expect(commit).toHaveBeenCalledWith('getAllProducts', mockProducts)
  })
})

这个方案不需要额外引入Sinon，用Jest原生的mock能力就能完成同样的测试。

内容的提问来源于stack exchange，提问作者pip36