Question

我有一个连接组件，它执行此操作：

componentWillMount() {
        this.props.fetchMessage();
        this.props.fetchPlots();
    }

第一个函数返回一个字符串，第二个函数返回一个对象数组。

第一个功能：

export function fetchMessage() {
    return function (dispatch) {
        axios.get(ROOT_URL, {
            headers: {
                authorization: localStorage.getItem('token')}
            })
            .then(response => {
                dispatch({
                    type: FETCH_MESSAGE,
                    payload: response.data.message
                });
            });
    }
}

第二个功能非常相似。

类型是这样的：

export const FETCH_MESSAGE = 'fetch_message';

Reducers遵循以下格式：

case FETCH_MESSAGE:
            return { ...state, message: action.payload }
        case FETCH_PLOTS:
            return { ...state, plots: action.payload }

我想用Mocha和Chai测试它。我试图通过这样的状态：

beforeEach(() =>
    {
        component = renderComponent(Component, null, {
            message: 'teststring',
            plots: [
                {...},{...},{...}
            ]
        });
    });

此时，我收到以下错误：

  Error: Actions must be plain objects. Use custom middleware for async actions.
      at dispatch (C:...\node_modules\redux\lib\createStore.js:165:13)
      at Object.fetchMessage (C:...\node_modules\redux\lib\bindActionCreators.js:7:12)
      at Dashboard.componentWillMount (C:.../src/components/component.js:9:20)

如何模拟动作/将对象传递到状态而不会让我感到困惑？

使用Mocha / Chai通过Axios异步调用测试React-Redux应用程序

0 个答案: