我们如何模拟 Redux 异步操作的 fetch？答案

【问题标题】：How do we mock fetch for Redux Async Actions?我们如何模拟 Redux 异步操作的 fetch？
【发布时间】：2015-12-29 21:03:43
【问题描述】：

在 Redux 的 Writing Tests 部分，如果 store.dispatch 字面意思是调用 actions.fetchTodos，store.dispatch(actions.fetchTodos()) 如何不调用 fetch 方法？

it('creates FETCH_TODOS_SUCCESS when fetching todos has been done', (done) => {
    nock('http://example.com/')
      .get('/todos')
      .reply(200, { todos: ['do something'] })

    const expectedActions = [
      { type: types.FETCH_TODOS_REQUEST },
      { type: types.FETCH_TODOS_SUCCESS, body: { todos: ['do something']  } }
    ]
    const store = mockStore({ todos: [] }, expectedActions, done)
    store.dispatch(actions.fetchTodos())
})

【问题讨论】：

标签： javascript unit-testing reactjs redux nock

【解决方案1】：

它正在调用fetch 方法，但是nock 行：

nock('http://example.com/')
  .get('/todos')
  .reply(200, { todos: ['do something'] })

存根 HTTP 请求，以便 fetch 简单地返回正确的数据（而不实际到达端点）。

另一种选择是将对fetch 的调用提取到另一个模块中——比如api——并在你的动作创建器中使用它。在测试中，您只需在 api 模块上模拟出适当的方法即可。

【讨论】：

所以如果我的 fetch 在另一个模块中，那么我会模拟（间谍？）actions.fetchTodos() 吗？（因为目前 actions.fetchTodos 里面有 fetch。）那么就不需要 nock 了吗？
@Tai 如果您将对fetch 的调用移至api.fetchTodos，然后您的动作创建者调用api.fetchTodos，那么您只需模拟/监视api.fetchTodos 和fetch永远不会被调用。 Redux 文档中的版本可能是一个更好的测试，因为它实际上是在测试是否调用了正确的 URL，等等。
谢谢。这有助于澄清我遇到的整个问题。我认为这只是对单元测试范围的误解。
在同一个测试文件中调度 actions.fetchTodos() 时是否可以模拟 api.fetchTodos，或者这完全是一个单独的测试？
@Tai Sure，为什么不呢？（也许我遗漏了一些东西。）在这种情况下，您将删除 api.fetchTodos，特别是因为您正在尝试测试 actions.fetchTodos