Test the dispatch function with jest - reactjs

Question

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

Answer 1

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

Answer 2

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

Answer 3

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