在单元测试期间无法将对象添加到Redux状态

时间:2018-01-12 17:39:08

标签: unit-testing redux react-redux jestjs enzyme

我试图在单元测试期间将对象添加到我的Redux存储中,以确保我的Reducer和操作正常工作。看起来显示的状态是reducer文件中的INITIAL_STATE。但是,每当我将新项添加到reducer状态时,都不会发生任何事情。我假设它是因为它添加得太慢而且它是异步的。不太确定如何处理这个问题。

减速器/动作测试

/***********************
TESTING THE REDUX STORE
***********************/
describe('>>>Redux Store for Budget Functionality', () => {
  beforeEach(() => {
    store = configureStore();
  })

  it('Should successfully add a new budget into the store', () => {
    let budgetCategory = testHelper.testBudgetCategory;

    //Will auto dispatch since we are using redux-actions
    const action = addBudgetCategoryRequest(budgetCategory);
    const actual = store.getState().getIn(['budget', 'budgetCategories']).toJS()
    const expected = [testHelper.testBudgetCategory];

    expect(actual).toEqual(expected);
  })

存储文件

import {createStore, applyMiddleware, compose} from 'redux';
import thunk from 'redux-thunk';
import reducers from './reducers';

export function configureStore(){
  // Use redux dev tools if available, otherwise use default composition;
  const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

  const store = createStore(reducers, composeEnhancers(
    applyMiddleware(thunk)
  ));

  return store;
}

我的整个reducer / action创建文件

import Immutable from 'immutable'
import { createAction } from 'redux-actions';
import axios from 'axios';
import moment from 'moment';

/**************
INITIAL STATE
***************/
export const INITIAL_STATE = Immutable.fromJS({
  budgetCategories: [],
  budgetFormEditable: {errors: [{budgetNameError: false, monthlyCostError: false}] },
});

/**************
TYPES
***************/
export const ADD_BUDGET = 'src/Budget/ADD_BUDGET';
export const ADD_EDITABLE_FIELD_ERRORS = 'src/Budget/ADD_EDITABLE_FIELD_ERRORS';
export const UPDATE_BUDGET_ENTRY = 'src/Budget/UPDATE_BUDGET_ENTRY';

/**************
REDUCER LOGIC FLOW
***************/
export default function (state = INITIAL_STATE, action) {
  switch (action.type) {
    case ADD_BUDGET:
      return state.updateIn(['budgetCategories'], arr => arr.push(Immutable.fromJS(action.payload)))

    case ADD_EDITABLE_FIELD_ERRORS:
      return state.setIn(['budgetFormEditable', 'errors', 0], Immutable.fromJS(action.payload))

    case UPDATE_BUDGET_ENTRY:
      console.log("The field that we are editing is " + action.payload.editedStateIndex);
      return state.setIn(
        [
          'budgetCategories',
          action.payload.editedStateIndex,
        ], Immutable.fromJS(action.payload.newBudget));

    default:
      return state;
  }
}

/**************
ACTIONS CREATORS
***************/
export const addBudget = createAction(ADD_BUDGET);
export const addEditableFieldErrors = createAction(ADD_EDITABLE_FIELD_ERRORS);
export const updateBudgetEntry = createAction(UPDATE_BUDGET_ENTRY);

/**************
ACTION REQUESTS
***************/
//TODO: Honestly, this is pretty unnecessary as I am not resolving promises
export function addBudgetCategoryRequest(data) {
  return (dispatch) => {
    dispatch(addBudget(data));
  }
}

0 个答案:

没有答案