Тестирование компонента React, связанного с Redux

Question

Мои тесты работают, но я просто знаю, что делаю это неправильно. Мои основные проблемы:

Мне нужно было добавить те же свойства в mockStore и props (allData и т. Д.).

Компонент My 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, который получает доступ к контейнеру через реквизит. Вот проверяемая функция как минимум:

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