is there another way to mock component's mapDispatchToProps when using Jest

Question

I currently have a component like so:

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { getDataAction } from ' './my-component';

export class MyComponent extends { Component } {
   componentWillMount() {
      this.props.getData();
   }
   render(){

      <div>
      this.props.title
     </div>

   }
}

const mapStateToProps = (state) => ({
   title: state.title
});

const mapDispatchToProps = (dispatch) ({
   getData() {
      dispatch(getDataAction());
   }
});

export default connect(mapStateToProps, mapDispatchToProps)(MyComponent)

and I am trying to shallow render test it using jest and enzyme.

test:

import React from 'react';
import { shallow } from 'enzyme';
import { MyComponent } from './index';

it('renders without crashing', () => {
  shallow(<MyComponent getData={jest.fn()} />);
});

My question is, is this the conventional way to mock? Jest official docs don't mention specifically about mocking props and this post Using Jest to mock a React component with props is about testing with full mounting instead. Is there another way to mock dispatchToProps? In this example there is only one, but what if I have a lot of functions in dispatchToProps?

Side Question: in my real file, I have a reference to a value like this.props.information.value which I expect to throw an error like cannot get value of undefined since information is not mocked/defined, but it doesn't. It's only when functions are not present that an error is thrown.

Uday Sravan K Uday Sravan K · Accepted Answer · 2019-04-23T15:45:51

You can export mapDispatchToProps and write tests for it by importing it in your tests.

Add export { mapDispatchToProps }; at the end of your MyComponent.js

Create MyComponent.tests.js file beside MyComponent.js

import configureMockStore from 'redux-mock-store';
import thunkMiddleware from 'redux-thunk';
import { mapDispatchToProps } from './MyComponent';

const configMockStore = configureMockStore([thunkMiddleware]);
const storeMockData = {};
const mockStore = configMockStore(storeMockData);

describe('mapDispatchToProps', () => {
  it('should map getDataAction action to getData prop', () => {
     // arrange
     const expectedActions = [getDataAction.type];
     const dispatchMappedProps = mapDispatchToProps(mockStore.dispatch);
     // act
     dispatchMappedProps.getData();
     // assert
     expect(mockStore.getActions().map(action => action.type)).toEqual(expectedActions);
  }
});

Here I have used thunk, just to let you know that how to do it if there are middlewares configured in your store setup.

Here getDataAction can also be a function instead of a simple action like { type: 'FETCH_DATA' } if you are using middlewares like thunks.

However, the approach to test is same except that you will create expectedActions with explicit action types like const expectedActions = ['FETCH_CONTACTS']

Here FETCH_CONTACT is another action dispatched in your thunk i.e getDataAction

is there another way to mock component's mapDispatchToProps when using Jest

1 Answers