React jest+enzyme testing composite components with connect how to test?

this is my test file

/* eslint-disable */
import React from "react";
import PropTypes from "prop-types";
import configureStore from "redux-mock-store";
import DataPane from "client/components/DataPane";
import requester from "common/reduxMiddlewares/requester";
import { mountWithIntl, shallowWithIntl } from "tests/intl-enzyme-test-helper.js";
import OrderDetailsPane from "../shipping/outbound/tabpane/orderDetailsPane";

describe("orderDetailsPane", () => { // eslint-disable-line no-undef
  const initialState = {
    account: {
      loginId: "",
      loginName: "",
    },
    cwmOutbound: {
      outboundProducts: [],
      outboundFormHead: {},
      outboundReload: false,
      submitting: false,
      allocatingModal: {
        visible: false,
      },
      inventoryData: [],
      allocatedData: [],
      inventoryDataLoading: false,
      allocatedDataLoading: false,
    },
    cwmSku: {
      params: {
        units: [],
      },
    },
    cwmContext: {
      defaultWhse: {
        code: "",
        name: "",
      },
    },
    cwmWarehouse: {
      locations: [],
    },
  };
  const mockStore = configureStore([requester]);
  let store;
  let wrapper;
  beforeEach(() => {
    store = mockStore(initialState);
    wrapper = mountWithIntl( //  mountreact-intl
      <OrderDetailsPane />,
      {
        context: { store },
        childContextTypes: {
          store: PropTypes.any,
        },
      }
    );
  });
  it("render", () => { // eslint-disable-line no-undef
    expect(wrapper.find("DataPane").length).toBe(1);
  });
});

this component has multiple descendant components, one of which makes a request after DidMount

componentDidMount() {
    this.props.loadLimitLocations(this.props.defaultWhse.code, "").then((result) => {
      if (!result.error) {
        this.setState({
          options: result.data,
        });
      }
    });
    this.props.loadZones(this.props.defaultWhse.code).then((result) => {
      if (!result.error && result.data.length !== 0) {
        this.setState({
          zones: result.data,
        });
      }
    });
  }

the error reported during the test is as follows

TypeError: this.props.loadLimitLocations(...).then is not a function

how to deal with this situation

Feb.28,2021

pass a loadLimitLocations method to props

Menu