How can I test a React component that relies on Redux Toolkit useSelectors?

Question

I'm trying to write tests for my React component that works with Redux Toolkit. I'm currently getting an error that states

TypeError: Cannot read property 'map' of undefined
      666 |       const fraudValuesByCategory = stateReport.fraud_types
    > 667 |         .map(fraudTypeId => fraudCategoryDescById[fraudTypeId])
          |          ^
      668 |         .reduce((aggregator, {description, category}) => {
      669 |           const x = { [category]: [description].concat(aggregator[category] || []) };
      670 |           return ({

I've mocked the store and render it like so in my describe function

const props = {
  index: 0,
  // setActiveTab={ i => setActiveTab(i)}
  entityToken: 'abc1234',
  entity: '',
  featureFlags,
  domainToken,
  customerAgentId: 1,
  caseToken: 'C-M7EOZfrdCBjEMnO3p9JQ"',
};

const initialState = {
    report: {
      fraud_types: [2, 4, 7, 15, 19, 22, 43],
    },
    wizard: {},
    prefill: {},
    status: true,
    error: false,
    isDraft: null,
    fraudTypes: {
      ACH: {
        fraud_category: 'fraud',
        fraud_subcategory: 'a',
        fraud_type_id: '7',
      },
      'Account takeover': {
        fraud_category: 'misc',
        fraud_subcategory: 'a',
        fraud_type_id: '43',
      },
    },
    suspiciousActivity: null,
  };
  const mockStore = configureStore();
  const store = mockStore(initialState);

  const spy = jest.spyOn(redux, 'useSelector');
  spy.mockReturnValue({ username: 'test' });


  const setup = (prop: typeof props) => {
    render(<Provider store={store}><FormGroup {...prop} /></Provider>);
  };

test('IP Address should be at index 29', () => {
    props.index = 1;
    setup(props);
    expect(FORM_CONTROLS.steps[props.index].controls[29].label).toEqual('43. IP Address (enter the IP address/date/timestamp of the subject\'s electronic internet based contact with the financial institution, if known)');
  });

My impression is that I haven't mocked the store correctly and so when it tries to map stateReport.fraud_types it's not able to? What am I doing wrong?

How can I test a React component that relies on Redux Toolkit useSelectors?

0 Answers0