1

测试 Redux 连接组件：我尝试从特定 Action FETCH_COUNTRY_LIST 测试预期结果失败的情况。我是否需要在我的 mockStore 中添加自定义中间件。

  REACT-REDUX (Mount + wrapping in <Provider>) ClearAll Component
    ✓ +++ contains ClearAll component
    ✓ +++ contains clear All text
    ✓ +++ check action on dispatching 
    ✓ +++ check reducer INITIAL_STATE
    1) +++ check reducer FETCH_COUNTRY_LIST

我不确定为什么 countryList 和 selectedCountries 的状态为“未定义”。我添加了一个 wrapper.Update()。在下面的测试用例中我做错了什么。

import React from 'react';
import expect from 'expect';
import { mount } from 'enzyme';
import { Provider } from "react-redux";
import configureMockStore from 'redux-mock-store';
import ClearAllFilters from './ClearAllFilters';
import { deselectAllCountry, deselectAllRegion, deselectAllSector } from '../../actions/filterActions';
import filtersReducer from '../../reducers/filtersReducer/filtersReducer';
//import { COUNTRY_LIST } from '../../constants/filterConstants';

const mockStore = configureMockStore();

const store = mockStore({filters:
{
  countryList: [],
  regionList: [],
  sectorList: [],
  isAllSelected: false,
  isAllSelectedR: false,
  isAllSelectedS: false,
  selectedCountries: [],
  selectedRegions: [],
  selectedSectors: []
}
});

const initialState = {
  countryList: [],
  regionList: [],
  sectorList: [],
  isAllSelected: false,
  isAllSelectedR: false,
  isAllSelectedS: false,
  selectedCountries: [],
  selectedRegions: [],
  selectedSectors: []
};

const wrapper = mount(<Provider store={store}><ClearAllFilters /></Provider>);

//*************Testing for ClearAllFilters React Component**********
describe('REACT-REDUX (Mount + wrapping in <Provider>) ClearAll Component',()=>{

  //Ensures it clears out all actions from our mockStore before each test suite.
  beforeEach(() => {
    store.clearActions();
  });

  it('+++ contains ClearAll component', () => {
    expect(wrapper.find(ClearAllFilters).length).toEqual(1)
  });

  it('+++ contains clear All text', () => {
    expect(wrapper.text()).toEqual('Clear All')
  });

  //Unit tests for Redux Action Creators.
  it('+++ check action on dispatching ', () => {
    let action
    store.dispatch(deselectAllCountry())
    store.dispatch(deselectAllRegion())
    store.dispatch(deselectAllSector())
    action = store.getActions()
    expect(action[0].type).toBe('COUNTRIES_DESELECT_ALL')
    expect(action[1].type).toBe('REGIONS_DESELECT_ALL')
    expect(action[2].type).toBe('SECTORS_DESELECT_ALL')
  });

  //Unit test for Redux Reducers.
  it('+++ check reducer INITIAL_STATE', () => {
    expect(filtersReducer(undefined, { type: 'dummy_action' })).toEqual(initialState);
  });

   it('+++ check reducer FETCH_COUNTRY_LIST', () => {
     const expectedState = {
     countryList: COUNTRY_LIST,
     selectedCountries: COUNTRY_LIST
     };
    wrapper.update();
    expect(filtersReducer(initialState, { type: 'FETCH_COUNTRY_LIST' })).toEqual(...initialState, expectedState);
   });

});

Test Results :
Expected value to equal:
  {"countryList": [{"checked": false, "name": "United States", "value": "USA"}, {"checked": false, "name": "United Kingdom", "value": "GBR"}, {"checked": false, "name": "India", "value": "IND"}, {"checked": false, "name": "Singapore", "value": "SNG"}, {"checked": false, "name": "Japan", "value": "JPN"}, {"checked": false, "name": "South Africa", "value": "ZAF"}, {"checked": false, "name": "Germany", "value": "DEU"}, {"checked": false, "name": "China", "value": "CHN"}, {"checked": false, "name": "France", "value": "FRA"}], "selectedCountries": [{"checked": false, "name": "United States", "value": "USA"}, {"checked": false, "name": "United Kingdom", "value": "GBR"}, {"checked": false, "name": "India", "value": "IND"}, {"checked": false, "name": "Singapore", "value": "SNG"}, {"checked": false, "name": "Japan", "value": "JPN"}, {"checked": false, "name": "South Africa", "value": "ZAF"}, {"checked": false, "name": "Germany", "value": "DEU"}, {"checked": false, "name": "China", "value": "CHN"}, {"checked": false, "name": "France", "value": "FRA"}]}
Received:
  {"countryList": **undefined**, "isAllSelected": false, "isAllSelectedR": false, "isAllSelectedS": false, "regionList": [], "sectorList": [], "selectedCountries": **undefined**, "selectedRegions": [], "selectedSectors": []}

这是我的商店的代码：

import { createStore, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension'
import rootReducer from '../reducers/rootReducer'
import gridQueryMiddleware from "../services/gridQueryMiddleware";

export const configureStore = (preloadedState) => {
  const middlewares = [gridQueryMiddleware];
  const middlewareEnhancer = applyMiddleware(...middlewares);

  const storeEnhancers = [middlewareEnhancer];

  const composedEnhancer  = composeWithDevTools(...storeEnhancers);

  const store = createStore(
    rootReducer,
    preloadedState,
    composedEnhancer
  );

  if (process.env.NODE_ENV !== 'production') {
    if (module.hot) {
      module.hot.accept('./reducers/rootReducer', () => {
        const newRootReducer = require('./reducers/rootReducer').default;
        store.replaceReducer(newRootReducer)
      })
    }
  }

  return store;
};
4

0 回答 0