Jest / React / Redux - MapDispatchToProps Undefined

Question

I am trying to learn React w/ Jest / Enzyme.

I have a component that receives 2 props -

loadTenantListAction,
filterTenantListAction,

These props are passed in via mapDispatchToProps -

import { withRouter } from 'react-router-dom';
import { connect } from 'react-redux';

import {
  loadTenantListAction,
  filterTenantListAction,
} from '../../store/actions';

import TenantList from './TenantList';

const mapStateToProps = tenants => ({ tenants });
const mapDispatchToProps = {
  loadTenantListAction,
  filterTenantListAction,
};

export default withRouter(
  connect(mapStateToProps, mapDispatchToProps)(TenantList)
);

I have declared propTypes in my component as such -

import React, { Component } from 'react';
import PropTypes from 'prop-types';

export default class TenantList extends Component {
  static propTypes = {
    loadTenantListAction: PropTypes.func.isRequired,
    filterTenantListAction: PropTypes.func.isRequired,
  };
  render() {
    return <p>Foo</p>;
  }
}

My unit test is failing now showing that these props are marked as required, but are undefined. I expect this, as I am not passing them into my test -

import React from 'react';
import { shallow } from 'enzyme';

import TenantListContainer from '../../../src/containers/TenantList';
import TenantList from '../../../src/containers/TenantList/TenantList';

describe('<TenantList />', () => {
  it('should render the TenantList Component', () => {
    const wrapper = shallow(<TenantListContainer />);
    expect(wrapper.find(<TenantList />)).toBeTruthy();
  });
});

I can pass the test doing something like

 expect(
      wrapper.find(
        <TenantList
          loadTenantListAction={() => {}}
          filterTenantListAction={() => {}}
        />
      )
    ).toBeTruthy();

But that does not seem right at all, nor do I expect to be able to write useful tests by carrying on like that.

How should I be handling props passed in via mapDispatchToProps?

Amit Chauhan Amit Chauhan · Accepted Answer · 2017-12-19T13:56:26

You can pass props directly to your component in shallow method.

describe('<TenantList />', () => {
  const props = {
    loadTenantListAction: () => {}, // or you can use any spy if you want to check if it's called or not
    filterTenantListAction () => {}, 
  }
  it('should render the TenantList Component', () => {
    const wrapper = shallow(<TenantListContainer {...props} />);
    expect(wrapper.find(<TenantList />)).toBeTruthy();
  });
});

Jest / React / Redux - MapDispatchToProps Undefined

1 Answers