javascript - 尝试测试异步操作时出现 `TypeError: store.dispatch(...).then is not a function`

Question

尝试使用此示例测试我的异步操作创建者:http://redux.js.org/docs/recipes/WritingTests.html#async-action-creators我想我做的一切都是一样的，但我有一个错误:

async actions › creates FETCH_BALANCE_SUCCEESS when fetching balance has been done

    TypeError: store.dispatch(...).then is not a function

不明白为什么会这样，因为我从示例中一步步完成了所有操作。

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

我的测试用例:

import nock from 'nock';
import configureMockStore from 'redux-mock-store';
import thunk from 'redux-thunk';
import * as actions from './';
import * as types from '../constants';

const middlewares = [thunk];
const mockStore = configureMockStore(middlewares);

describe('async actions', () => {
  afterEach(() => {
    nock.cleanAll();
  });

  it('creates FETCH_BALANCE_SUCCEESS when fetching balance has been done', () => {
    const store = mockStore({});

    const balance = {};

    nock('http://localhost:8080')
      .get('/api/getbalance')
      .reply(200, { body: { balance } });

    const expectedActions = [
      { type: types.FETCH_BALANCE_REQUEST },
      { type: types.FETCH_BALANCE_SUCCEESS, body: { balance } },
    ];

    return store.dispatch(actions.fetchBalanceRequest()).then(() => {
      // return of async actions
      expect(store.getActions()).toEqual(expectedActions);
    });
  });
});

我正在尝试测试的我的行为。

import 'whatwg-fetch';
import * as actions from './actions';
import * as types from '../constants';

export const fetchBalanceRequest = () => ({
  type: types.FETCH_BALANCE_REQUEST,
});

export const fetchBalanceSucceess = balance => ({
  type: types.FETCH_BALANCE_SUCCEESS,
  balance,
});

export const fetchBalanceFail = error => ({
  type: types.FETCH_BALANCE_FAIL,
  error,
});


const API_ROOT = 'http://localhost:8080';

const callApi = url =>
  fetch(url).then(response => {
    if (!response.ok) {
      return Promise.reject(response.statusText);
    }
    return response.json();
  });

export const fetchBalance = () => {
  return dispatch => {
    dispatch(actions.fetchBalanceRequest());
    return callApi(`${API_ROOT}/api/getbalance`)
      .then(json => dispatch(actions.fetchBalanceSucceess(json)))
      .catch(error =>
        dispatch(actions.fetchBalanceFail(error.message || error))
      );
  };
};

Answer 1

在你的测试中你有

return store.dispatch(actions.fetchBalanceRequest()).then(() => { ... })

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