鍍金池/ 問答/網(wǎng)絡(luò)安全  HTML/ react jest+enzyme測(cè)試 復(fù)合組件 有connect的如何測(cè)試?

react jest+enzyme測(cè)試 復(fù)合組件 有connect的如何測(cè)試?

這是我的測(cè)試文件

/* 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( // 這個(gè)時(shí)封裝了 mount和react-intl的方法
      <OrderDetailsPane />,
      {
        context: { store },
        childContextTypes: {
          store: PropTypes.any,
        },
      }
    );
  });
  it('render', () => { // eslint-disable-line no-undef
    expect(wrapper.find('DataPane').length).toBe(1);
  });
});

這個(gè)組件有多級(jí)子孫組件 其中一個(gè)組件會(huì)在DidMount之后進(jìn)行請(qǐng)求

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,
        });
      }
    });
  }

在進(jìn)行測(cè)試時(shí)的報(bào)錯(cuò)如下

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

這種情況如何處理

回答
編輯回答
心上人

給props里傳一個(gè)loadLimitLocations方法

2017年10月15日 18:09