尝试测试异步操作时,`TypeError: store.dispatch(...).then 不是函数`

rel*_*l1x 3 javascript reactjs redux react-redux

尝试使用以下示例测试我的异步操作创建者:http://redux.js.org/docs/recipes/WritingTests.html#async-action-creators,我认为我做了所有相同的事情,但我遇到了错误:

\n\n
async actions \xe2\x80\xba creates FETCH_BALANCE_SUCCEESS when fetching balance has been done\n\n    TypeError: store.dispatch(...).then is not a function\n
Run Code Online (Sandbox Code Playgroud)\n\n

不明白为什么会发生这种情况,因为我一步一步完成了示例中的所有操作。

\n\n

我还发现了这个例子http://arnaudbenard.com/redux-mock-store/但无论如何,某个地方存在错误,不幸的是,我找不到它。我的错误在哪里,为什么我会出错,即使我的测试用例看起来与示例相同

\n\n

我的测试用例:

\n\n
import nock from \'nock\';\nimport configureMockStore from \'redux-mock-store\';\nimport thunk from \'redux-thunk\';\nimport * as actions from \'./\';\nimport * as types from \'../constants\';\n\nconst middlewares = [thunk];\nconst mockStore = configureMockStore(middlewares);\n\ndescribe(\'async actions\', () => {\n  afterEach(() => {\n    nock.cleanAll();\n  });\n\n  it(\'creates FETCH_BALANCE_SUCCEESS when fetching balance has been done\', () => {\n    const store = mockStore({});\n\n    const balance = {};\n\n    nock(\'http://localhost:8080\')\n      .get(\'/api/getbalance\')\n      .reply(200, { body: { balance } });\n\n    const expectedActions = [\n      { type: types.FETCH_BALANCE_REQUEST },\n      { type: types.FETCH_BALANCE_SUCCEESS, body: { balance } },\n    ];\n\n    return store.dispatch(actions.fetchBalanceRequest()).then(() => {\n      // return of async actions\n      expect(store.getActions()).toEqual(expectedActions);\n    });\n  });\n});\n
Run Code Online (Sandbox Code Playgroud)\n\n

我正在尝试测试的行为。

\n\n
import \'whatwg-fetch\';\nimport * as actions from \'./actions\';\nimport * as types from \'../constants\';\n\nexport const fetchBalanceRequest = () => ({\n  type: types.FETCH_BALANCE_REQUEST,\n});\n\nexport const fetchBalanceSucceess = balance => ({\n  type: types.FETCH_BALANCE_SUCCEESS,\n  balance,\n});\n\nexport const fetchBalanceFail = error => ({\n  type: types.FETCH_BALANCE_FAIL,\n  error,\n});\n\n\nconst API_ROOT = \'http://localhost:8080\';\n\nconst callApi = url =>\n  fetch(url).then(response => {\n    if (!response.ok) {\n      return Promise.reject(response.statusText);\n    }\n    return response.json();\n  });\n\nexport const fetchBalance = () => {\n  return dispatch => {\n    dispatch(actions.fetchBalanceRequest());\n    return callApi(`${API_ROOT}/api/getbalance`)\n      .then(json => dispatch(actions.fetchBalanceSucceess(json)))\n      .catch(error =>\n        dispatch(actions.fetchBalanceFail(error.message || error))\n      );\n  };\n};\n
Run Code Online (Sandbox Code Playgroud)\n

idj*_*adj 5

在你的测试中你有

return store.dispatch(actions.fetchBalanceRequest()).then(() => { ... })
Run Code Online (Sandbox Code Playgroud)

您正在尝试 test fetchBalanceRequest,它返回一个对象,因此您无法调用.then()该对象。在您的测试中,您实际上想要 test fetchBalance,因为这是一个异步操作创建者(这就是您发布的 redux 文档中解释的内容)。