ReferenceError：selectedView 不是从 React 中的 Jest 测试中定义的

问题描述

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

 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:[],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:[],selectedMerchdivision: null,selectedMerchSubDivision: null,selectedProductGroup: null,selectedAssortment: null,selectedItemmerchandising: null,selectedItemGroup: null,selectedItem: 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,sales_UNITS: 203},{fsc_WK_NBR: 13,sales_UNITS: 172},{fsc_WK_NBR: 14,sales_UNITS: 170},{fsc_WK_NBR: 15,sales_UNITS: 249},{fsc_WK_NBR: 16,sales_UNITS: 166},{fsc_WK_NBR: 17,sales_UNITS: 108},{fsc_WK_NBR: 18,sales_UNITS: 207},{fsc_WK_NBR: 19,forecast_UNITS_BY: 153,forecast_UNITS_LIFT:190}
    ],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 的模拟数据。任何建议表示赞赏。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）