0

目前，当我尝试使用状态模拟数据时遇到问题，而在测试时数据的初始状态下，我没有遇到任何问题。我不确定为什么会发生这种情况，如果有人能告诉我为什么吗？以下是错误以及我的测试文件的代码：

 TypeError: Cannot read property 'view' of undefined

      14 |     const dispatch = useDispatch();
      15 |     const pageConfigurationReducer = useSelector(state => state.pageConfigurationReducer);
    > 16 |     const selectedView = pageConfigurationReducer.view;
         |                                                   ^
      17 |
      18 |     const mainApiResponseReducer = useSelector(state => state.mainApiResponseReducer);
      19 |     const mechandisingTabledata = mainApiResponseReducer.accuracy_table_merchandising_data;

      at AccuracyTable (src/common/components/common/AccuracyTab/AccuracyTable/index.jsx:16:51)
      at renderWithHooks (node_modules/react-dom/cjs/react-dom.development.js:14803:18)
      at mountIndeterminateComponent (node_modules/react-dom/cjs/react-dom.development.js:17482:13)
      at beginWork (node_modules/react-dom/cjs/react-dom.development.js:18596:16)
      at Object.invokeGuardedCallbackImpl (node_modules/react-dom/cjs/react-dom.development.js:113:10)
      at invokeGuardedCallback (node_modules/react-dom/cjs/react-dom.development.js:292:31)
      at beginWork$1 (node_modules/react-dom/cjs/react-dom.development.js:23203:7)
      at performUnitOfWork (node_modules/react-dom/cjs/react-dom.development.js:22157:12)
      at workLoopSync (node_modules/react-dom/cjs/react-dom.development.js:22130:22)
      at performSyncWorkOnRoot (node_modules/react-dom/cjs/react-dom.development.js:21756:9)

测试文件代码：

import React from 'react';
import configureMockStore from 'redux-mock-store';
import thunk from 'redux-thunk';
import TestRenderer from 'react-test-renderer';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import { mount ,shallow } from 'enzyme';
import jsdom from 'jsdom-global/register';
import AccuracyTable from '../../../src/common/components/common/AccuracyTab/AccuracyTable';

const mockStore = configureMockStore([thunk]);

describe('<Accuracy />', () => {

    let wrapper;
    let useEffect;
    //let useSelector;
    let store;
    let storeconditional;


    const initialmainapiresponseState = {
      isRequest: false,
      data: [],
      requestBody: null,
      year: null,
      week: null
  
};

const initialpageconfigurationState = {
  currentTab: "forecast",
    view:"Merchandising",
    productHierarchy: 'Merch Division',
    locations: 'National',
    lastUpdateDate: null,
    isRequest: false,
    error: null, 
  }
  const initialFilterMappingStringState = {
    viewFilterString: "Merch",
    prodHierFilterString: "MerchDivision",
    locationFilterString: "Natl",
    selectedLocationFilterString: "",

    merchandisingProdHierFilterString: "",
    itemGroupProdHierFilterString: "",
    merchandisingLocationFilterString: "",
    itemGroupLocationFilterString: ""

};

const initialLocationOptionState = {
  isRequest: false,
  Divisiondata:[],
  GeozoneData:[],
  RegionData:[],
  DistrictData:[],
  NodesData:[],
  LocationGroupData:[],
  NodeItemGroupData:[],
  error: null,
  selectedDivision: null,
  selectedGeozone: null,
  selectedRegion: null,
  selectedDistrict: null,
  selectedNodes:null,
  selectedLocationGroup: null,
  selectedNodeItemGroup: null,

  selectionValue: null,
  merchandisingSelectionValue: null,
  itemGroupSelectionValue: null,

  merchandisingSelectedLocation: "National",
  itemGroupSelectedLocation: null
};

const initialProductHierarchyOptionState = {
  isRequest: false,
  MerchDivdata:[],
  MerchSubDivData:[],
  ProductGroupData:[],
  AssortmentData:[],
  ItemMerchandisingData:[],
  ItemGroupData:[],
  ItemData:[],
  error: null,
  selectedMerchDivision: null,
  selectedMerchSubDivision: null,
  selectedProductGroup: null,
  selectedAssortment: null,
  selectedItemMerchandising: null,
  selectedItemGroup: null,
  selectedItem: null,

  selectionValue: null,
  merchandisingSelectionValue: null,
  itemGroupSelectionValue: null,

  merchandisingSelectedProductHierarchy: null,
  itemGroupSelectedProductHierarchy: null
};

const withDataState = {
    isRequest: false,
    data: [ 
        {fsc_WK_NBR: 11, fsc_YR_NBR: 2021, sales_UNITS: 160},
        {fsc_WK_NBR: 12, fsc_YR_NBR: 2021, sales_UNITS: 203},
        {fsc_WK_NBR: 13, fsc_YR_NBR: 2021, sales_UNITS: 172},
        {fsc_WK_NBR: 14, fsc_YR_NBR: 2021, sales_UNITS: 170},
        {fsc_WK_NBR: 15, fsc_YR_NBR: 2021, sales_UNITS: 249},
        {fsc_WK_NBR: 16, fsc_YR_NBR: 2021, sales_UNITS: 166},
        {fsc_WK_NBR: 17, fsc_YR_NBR: 2021, sales_UNITS: 108},
        {fsc_WK_NBR: 18, fsc_YR_NBR: 2021, sales_UNITS: 207},
        {fsc_WK_NBR: 19, fsc_YR_NBR: 2021, forecast_UNITS_BY: 153 ,forecast_UNITS_LIFT:190}
    ],
    requestBody: null,
    year:2021,
    week: 18
};

store = mockStore({
    mainApiResponseReducer: initialmainapiresponseState ,
    pageConfigurationReducer : initialpageconfigurationState ,
    filterMappingStringReducer : initialFilterMappingStringState , 
    productHierarchyOptionReducer : initialProductHierarchyOptionState ,
    locationOptionReducer : initialLocationOptionState 
});

storeconditional = mockStore({
  mainApiResponseReducer: withDataState
});

const setState = jest.fn();

const useStateSpy = jest.spyOn(React, 'useState')
useStateSpy.mockImplementation((init) => [init, setState]);

let mockUseEffect = () => {
  useEffect.mockImplementationOnce(f => f());
};

describe('AccuracyTable testcases', () => {
    it('testing AccuracyTable component with initialState ', () => {
        expect(AccuracyTable).toBeDefined()
        wrapper = mount(
          <Provider store={store}>
            <AccuracyTable store={store}/>
          </Provider>)
          expect(wrapper.find('AccuracyTable')).toHaveLength(1);      
          expect(wrapper.find('Paper')).toHaveLength(0);
          expect(wrapper.find('table')).toHaveLength(1);
          expect(wrapper.find('thead')).toHaveLength(1);
          expect(wrapper.find('tr')).toHaveLength(2);
    });

    it('testing AccuracyTable component withState ', () => {
      expect(AccuracyTable).toBeDefined()
      wrapper = mount(
        <Provider store={storeconditional}>
          <AccuracyTable store={storeconditional}/>
        </Provider>)
        expect(wrapper.find('AccuracyTable')).toHaveLength(1);      
    });
});
});

我想要做的是相应地设置 selectedView 并能够进一步测试来自 const withState 的模拟数据。任何建议表示赞赏。

4

0 回答 0