Vue 检查动作是不是使用 spyOn 调用其他动作

Posted 2023-02-22

【中文标题】Vue 检查动作是不是使用 spyOn 调用其他动作

【英文标题】：Vue checking if action calls other action with spyOnVue 检查动作是否使用 spyOn 调用其他动作

【发布时间】：2019-05-09 04:30:26

【问题描述】：

在 Vue 中，我想使用 Jest 的 spyOn 检查商店中的某个操作是否正确调用另一个操作，我尝试了不同的方法，但它似乎不起作用，这是我的代码：

// index.js

getRecipes ( dispatch ) 
  const fruits = ['apple', 'banana', 'pear']
  fruits.forEach((fruit) => 
    dispatch('getRecipe', fruit)
  )
,
async getRecipe ( commit ) 
  const recipe = await recipesService.fetchRecipe(payload)

  commit(SET_RECIPE,  recipe )
,

// index.spec.js

test('getRecipes calls getRecipe 3 times, each with the right fruit', () => 
  const commit = jest.fn()
  const dispatch = jest.fn()
  const spy = spyOn(actions, 'getRecipe')
  const result = actions.getRecipes( commit, dispatch )

  expect(spy).toHaveBeenCalledTimes(3)
  expect(spy).toHaveBeenCalledWith('apple')
)

但是当我运行测试时，这是我得到的输出：

Expected spy to have been called three times, but it was called zero times.

我想在其他地方测试此类集成（一个操作调用另一个集成），但它仍然给我这个错误。

【参考方案1】：

只测试你的代码，而不是 vuex 的

这种测试的问题在于，您正在测试 vuex 是否按预期工作，这可能毫无价值。

我不会直接监视actions，并断言当dispatch('getRecipe', fruit) 被调用时vuex 正确调用getRecipe 操作，我会测试getRecipes 操作是否正确调用dispatch：

test('getRecipes dispatches 3 "getRecipe" actions, each with the right fruit', () => 
  const commit = jest.fn()
  const dispatch = jest.fn()
  const result = actions.getRecipes( commit, dispatch )

  expect(dispatch).toHaveBeenCalledTimes(3)
  expect(dispatch.mock.calls[0][0]).toBe('apple')
  expect(dispatch.mock.calls[1][0]).toBe('banana')
  expect(dispatch.mock.calls[2][0]).toBe('pear')
)

如果你还想测试 vuex 集成怎么办

你并没有真正展示你是如何导入和导出模块的，但我猜在你的代码中，动作文件只是导出一个带有动作的普通对象，而测试只是导入它。

在您的应用程序代码中，您可能会将这些操作添加到 vuex，然后将 vuex 加载到您的应用程序中：

new Vue(store)

因此，在您的测试中，actions 模块确实对 vuex 本身一无所知（我猜是真的，无法从您发布的代码中真正看出，但很有可能）。

这就是为什么你的测试没有按预期工作的原因，因为在测试中 getRecipes 方法只是获取一个 dispatch 参数并调用它，但是 vuex 并没有真正在那里做任何事情，所以没有办法 @987654332 @call 会调用另一个动作。

现在，如果你还想用 jest 测试这个，你应该从一个组件中做，所以你在 vue 和 vuex 的上下文中测试动作。

关于这个in the vue test utils documentation有一个很好的教程。

【参考方案2】：

当您尝试测试async 功能时，您需要使用await

const getAsyncWithSpyOn = spyOn(actions, 'getRecipe');
expect(await getAsyncWithSpyOn()).toHaveBeenCalledTimes(3)