CODEWITHSUNDEEP
reactjsjestjsenzyme
Jonathan
Jonathan

Reputation: 469

Test the dispatch function with jest

How can I test the return dispatch from mapDispatchToProps? 

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

Have this but not working...

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

Upvotes: 0

Views: 2753

Answers (3)

Lin Du
Lin Du

Reputation: 102317

Here is the solution, mapDispatchToProps function just a javascript function. You don't need to test it using Shallow render with 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());
    }
  };
};

Unit test:

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

Unit test result with 100% coverage:

 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

Upvotes: 2

Amit Chauhan
Amit Chauhan

Reputation: 6879

mapDispatchToProps is not React component you don't need enzyme to test this. one of way testing is you can pass mocked dispatch and call all the function and check if mocked dispatch is called that many times.

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

Upvotes: 1

Clarity
Clarity

Reputation: 10873

mapDispatchToProps isn't a React component so you can't render it. If you really want to test that it returns the defined functions, which doesn't make much sense imo, you can just check if the object has the defined props:

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

Upvotes: 1

Related Questions