Question

我的测试有效，但是我只是知道我做的不正确。我的主要担忧：

我需要向mockStore和props（allData等）添加相同的属性。

我的React组件调用容器中存在的props函数（updateRowBeingEdited等）。为了使这些功能可用，我不得不在这里将它们添加到props中。我包括了type和payload。这似乎很麻烦而且是错误的，因此是我的帖子。

describe('invoking the filter', () => {
  let instance;
  let wrapper;
  let store;

  const allData = getDummyData();

  beforeEach(() => {
    const mockStore = configureStore();
    store = mockStore({
      allData: allData,
      filteredData: allData,
      dataInitialized: true,
      filter: ''
    });

    store.dispatch = jest.fn();

    const props = {
      allData: allData,
      filteredData: allData,
      dataInitialized: true,
      filter: '',
      updateRowBeingEdited: (row) => store.dispatch({ type: actionTypes.SET_CREDIT_CARD_ACCOUNT_EDITED_ROW, payload: row }),
      setInitialData: (data) => store.dispatch({ type: actionTypes.SET_CREDIT_CARD_ACCOUNT_INITIAL_DATA, payload: data }),
      setFilter: (filter) => store.dispatch({ type: actionTypes.SET_CREDIT_CARD_ACCOUNT_GRID_FILTER, payload: filter }),
      setFilteredData: (data) => store.dispatch({ type: actionTypes.SET_CREDIT_CARD_ACCOUNT_FILTERED_DATA, payload: data })
    };

    wrapper = shallow(<CreditCardAccountGridComponent {...props} store={store} />);
    instance = wrapper.instance();
  })  

  it('should return all records when filter is an empty string', () => {    
    instance.onFilterChange('xx', '');
    const expected = allData;
    expect(store.dispatch).toHaveBeenCalledWith({
      type: actionTypes.SET_CREDIT_CARD_ACCOUNT_FILTERED_DATA,
      payload: expected
    });
  });

这是容器：

    import { connect } from 'react-redux';
    import CreditCardAccountGridComponent from './creditCardAccountGridComponent';
    import { setFilter, setInitialData, setFilteredData, updateRowBeingEdited }
      from './../../../actions/configuration/creditCardAccountGridActions';

    function mapStateToProps(state) {
      return {
        rowBeingEdited: state.creditCardAccountGrid.rowBeingEdited,
        allData: state.creditCardAccountGrid.allData,
        filteredData: state.creditCardAccountGrid.filteredData,
        filter: state.creditCardAccountGrid.filter,
        dataInitialized: state.creditCardAccountGrid.dataInitialized
      };
    }

    const mapDispatchToProps = (dispatch) => {
      return {
        updateRowBeingEdited: (row) => dispatch(updateRowBeingEdited(row)),
        setFilter: (filter) => dispatch(setFilter(filter)),
        setInitialData: (data) => dispatch(setInitialData(data)),
        setFilteredData: (data) => dispatch(setFilteredData(data))
      };
    }

    const CreditCardListingContainer = connect(mapStateToProps, mapDispatchToProps)(
      CreditCardAccountGridComponent
    );

export default CreditCardListingContainer;

我无法包含该组件，因为其中包含公司特定的内容。这是一个标准的React Component，可以通过props访问容器。至少要测试以下功能：

  onFilterChange = (id, value) => {
    if (value === '') {
      this.props.setFilter(value);
    }

    const filteredData = this.props.allData.filter(account => 
      account.bankAccount.endsWith(value) ||
      account.paymentMethod.toUpperCase().startsWith(value.toUpperCase())
    );

    this.props.setFilter(value);
    this.props.setFilteredData(filteredData);
  }

测试Redux连接的React组件

0 个答案: