如何对该将Redux连接到React组件的实用程序进行单元测试？

Question

I have a "utility" called "reduxify" that automatically does a lot of the Redux/React boilerplate for you, so that instead of writing "mapStateToProps" and "mapDispatchToProps" functions on every component, you just write your component like this:

// usage. 

class Foo extends Component {
  // component stuff
}

export default reduxify(actions, Foo); 

The reduxify function (with comments) are at this gist: https://gist.github.com/brianboyko/904d87da2a75c98e8cd5f5352dd69d57

Without the comments (for brevity), it's produced below:

import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { getStore } from '../store/storeConfig'

export function reduxify(actions, component){ 
  let mapStateToProps = (state) => {
    state = Object.assign({}, state, {store: state}, {getStore: getStore});
    return (state);
  }
  let prepareActions = (actions) => (dispatch) =>
    ({ actions: bindActionCreators(actions.default, dispatch),
       dispatch: dispatch,
     })
  let mapDispatchToProps = (dispatch) => (prepareActions(actions, dispatch))
  return connect(mapStateToProps, mapDispatchToProps)(component);
}

So, here's the question: What's the best way to mock a component (one that will have access to the Provider) so that I can unit test this sucker, put it out there for people to use and enjoy, and not feel like a hack?

Answer 1

Have a look at the unit tests used by react-redux for an example of how to test a component that is wrapped by <Provider> : https://github.com/reactjs/react-redux/blob/master/test/components/Provider.spec.js#L50-64 . Basically, they just declared a component and then wrapped it with a <Provider> component whose store prop is a mocked Redux store. (They're using 'react-addons-test-utils' to do their test component rendering, but it would be even easier with enzyme.)

In your case, you could spy on the mocked store's dispatch() method to ensure that your component's action-dispatching props are calling it as expected.