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