Question

我在组件末尾有这段代码：

export default compose(
  connect(
    store => ({
      softlayerAccountId: store.global.softlayerAccountId,
      pagination: store.shipments.pagination,
      isFiltersModalOpened: store.shipments.filtersModalOpened,
      filters: store.shipments.filters,
      shipmentsCSV: store.shipments.shipmentsCSV,
    }),
    dispatch => ({
      removeFilterHandler: filterKey => {
        dispatch(removeFilter(filterKey));
      },
      shipmentsPaginationHandler: pagination => {
        dispatch(shipmentsPagination(pagination)); // LINE NEEDS COVERAGE
      },
      toggleFiltersModalHandler: () => {
        dispatch(toggleFiltersModal()); // LINE NEEDS COVERAGE
      },
      setFiltersHandler: filters => {
        dispatch(setFilters(filters)); // LINE NEEDS COVERAGE
      },
      setCSVDataHandler: data => {
        dispatch(setCSVDataAction(data)); // LINE NEEDS COVERAGE
      },
    }),
  ),
  translate(),
)(GetShipments);

笑话报告说它需要测试。每个动作的dispatch(...)部分。像带有// LINE NEEDS COVERAGE的人一样。

我已经为每个动作和减速器创建了一个测试。但这是要我测试组件compose部分。

我该如何测试？

Answer 1

这是一个解决方案：

index.tsx：

import React from 'react';
import { compose, Dispatch, AnyAction } from 'redux';
import { connect } from 'react-redux';
import { removeFilter, shipmentsPagination, toggleFiltersModal, setFilters, setCSVDataAction } from './actionCreators';

class GetShipments extends React.Component {
  constructor(props) {
    super(props);
  }

  public render() {
    return <div>unit test coverage</div>;
  }
}

export const mapDispatchToProps = (dispatch: Dispatch<AnyAction>) => {
  return {
    removeFilterHandler: filterKey => {
      dispatch(removeFilter(filterKey));
    },
    shipmentsPaginationHandler: pagination => {
      dispatch(shipmentsPagination(pagination)); // LINE NEEDS COVERAGE
    },
    toggleFiltersModalHandler: () => {
      dispatch(toggleFiltersModal()); // LINE NEEDS COVERAGE
    },
    setFiltersHandler: filters => {
      dispatch(setFilters(filters)); // LINE NEEDS COVERAGE
    },
    setCSVDataHandler: data => {
      dispatch(setCSVDataAction(data)); // LINE NEEDS COVERAGE
    }
  };
};

export default compose(connect(mapDispatchToProps)(GetShipments));

actionCreators.ts：

const REMOVE_FILTER = 'REMOVE_FILTER';
const SHIPMENTS_PAGINATION = 'SHIPMENTS_PAGINATION';
const TOGGLE_FILTERS_MODAL = 'TOGGLE_FILTERS_MODAL';
const SET_FILTER = 'SET_FILTER';
const SET_CSV_DATA = 'SET_CSV_DATA';

export const removeFilter = (filterKey: string) => ({ type: REMOVE_FILTER, payload: { filterKey } });
export const shipmentsPagination = (pagination: any) => ({ type: SHIPMENTS_PAGINATION, payload: pagination });
export const toggleFiltersModal = () => ({ type: TOGGLE_FILTERS_MODAL });
export const setFilters = (filters: any) => ({ type: SET_FILTER, payload: filters });
export const setCSVDataAction = data => ({ type: SET_CSV_DATA, payload: data });

单元测试：

import { mapDispatchToProps } from './';
import { removeFilter, shipmentsPagination, toggleFiltersModal, setFilters, setCSVDataAction } from './actionCreators';

describe('mapDispatchToProps', () => {
  it('t1', () => {
    const dispatch = jest.fn();
    const actualValue = mapDispatchToProps(dispatch);
    expect(Object.keys(actualValue)).toEqual([
      'removeFilterHandler',
      'shipmentsPaginationHandler',
      'toggleFiltersModalHandler',
      'setFiltersHandler',
      'setCSVDataHandler'
    ]);
    actualValue.removeFilterHandler('some filter key');
    expect(dispatch).toBeCalledWith(removeFilter('some filter key'));
    actualValue.shipmentsPaginationHandler({ page: 1 });
    expect(dispatch).toBeCalledWith(shipmentsPagination({ page: 1 }));
    actualValue.toggleFiltersModalHandler();
    expect(dispatch).toBeCalledWith(toggleFiltersModal());
    actualValue.setFiltersHandler(['filter 1']);
    expect(dispatch).toBeCalledWith(setFilters(['filter 1']));
    actualValue.setCSVDataHandler('some data');
    expect(dispatch).toBeCalledWith(setCSVDataAction('some data'));
  });
});

带有覆盖率报告的单元测试结果：

 PASS  src/stackoverflow/54340281/index.spec.tsx
  mapDispatchToProps
    ✓ t1 (7ms)

-------------------|----------|----------|----------|----------|-------------------|
File               |  % Stmts | % Branch |  % Funcs |  % Lines | Uncovered Line #s |
-------------------|----------|----------|----------|----------|-------------------|
All files          |    93.94 |        0 |    85.71 |    92.59 |                   |
 actionCreators.ts |      100 |      100 |      100 |      100 |                   |
 index.tsx         |    88.89 |        0 |    77.78 |    88.24 |              8,12 |
-------------------|----------|----------|----------|----------|-------------------|
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        3.764s, estimated 5s

以下是完整的演示：https://github.com/mrdulin/jest-codelab/tree/master/src/stackoverflow/54340281

如何测试撰写中的某些动作处理程序？

1 个答案: