用 jest 测试 dispatch 函数答案

【问题标题】：Test the dispatch function with jest用 jest 测试 dispatch 函数
【发布时间】：2020-01-08 03:56:36
【问题描述】：

如何测试来自mapDispatchToProps 的返回调度？

    export const mapDispatchToProps = (dispatch) => {
        return {
            sidebarSettings: () => {
                dispatch(showSettings)
            },
            setFilterText: (value) => {
                dispatch(setFilterText(value))
            },
            setExportCount: () => {
                dispatch(setExportCount())
            }
        }
    }

有这个但不工作...

describe('mapDispatchToProps', () => {
        test('should retrun a dispatch of sidebar settings, filter text and of export count', () => {
            const wrapper = shallow(<mapDispatchToProps />)
            expect(wrapper.find('dispatch')).toHaveLength(3)
        })
    })

【问题讨论】：

标签： reactjs jestjs enzyme

【解决方案1】：

这是解决方案，mapDispatchToProps 函数只是一个 javascript 函数。您无需使用Shallow 渲染和enzyme 对其进行测试。

const ACTION_TYPES = {
  SHOW_SETTINGS: 'SHOW_SETTINGS',
  SET_FILTER_TEXT: 'SET_FILTER_TEXT',
  SET_EXPORT_COUNT: 'SET_EXPORT_COUNT'
};

export const showSettings = { type: ACTION_TYPES.SHOW_SETTINGS };
export const setFilterText = value => ({ type: ACTION_TYPES.SET_FILTER_TEXT, payload: { value } });
export const setExportCount = () => ({ type: ACTION_TYPES.SET_EXPORT_COUNT });

export const mapDispatchToProps = dispatch => {
  return {
    sidebarSettings: () => {
      dispatch(showSettings);
    },
    setFilterText: value => {
      dispatch(setFilterText(value));
    },
    setExportCount: () => {
      dispatch(setExportCount());
    }
  };
};

单元测试：

import { mapDispatchToProps, showSettings, setFilterText, setExportCount } from './';

const dispatch = jest.fn();

describe('mapDispatchToProps', () => {
  it('t1', () => {
    const actualValue = mapDispatchToProps(dispatch);
    expect(Object.keys(actualValue)).toEqual(['sidebarSettings', 'setFilterText', 'setExportCount']);

    actualValue.sidebarSettings();
    expect(dispatch).toBeCalledWith(showSettings);

    actualValue.setFilterText('name');
    expect(dispatch).toBeCalledWith(setFilterText('name'));

    actualValue.setExportCount();
    expect(dispatch).toBeCalledWith(setExportCount());
  });
});

100% 覆盖率的单元测试结果：

 PASS  src/stackoverflow/57802233/index.spec.ts
  mapDispatchToProps
    ✓ t1 (11ms)

----------|----------|----------|----------|----------|-------------------|
File      |  % Stmts | % Branch |  % Funcs |  % Lines | Uncovered Line #s |
----------|----------|----------|----------|----------|-------------------|
All files |      100 |      100 |      100 |      100 |                   |
 index.ts |      100 |      100 |      100 |      100 |                   |
----------|----------|----------|----------|----------|-------------------|
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        4.201s

【讨论】：

【解决方案2】：

mapDispatchToProps 不是 React 组件，因此您无法渲染它。如果您真的想测试它是否返回定义的函数，这在 imo 中没有多大意义，您可以检查对象是否具有定义的道具：

describe('mapDispatchToProps', () => {
  test('should retrun a dispatch of sidebar settings, filter text and of export count', () => {
    expect(Object.keys(mapDispatchToProps())).toHaveLength(3)
  })
})

【讨论】：

mapDispatchToProps 是函数，需要调用它才能得到一个对象作为回报。

【解决方案3】：

mapDispatchToProps 不是 React 组件，您不需要酶来测试它。一种测试方法是您可以通过模拟调度并调用所有函数并检查是否多次调用模拟调度。

describe('mapDispatchToProps', () => {
    const dispatch = jest.fn();
    const props = mapDispatchToProps(dispatch);
    props.setExportCount();
    props.setFilterText();
    props.sidebarSettings();
    expect(dispatch).toHaveBeenCalledTimes(3);
})

【讨论】：