Am I testing connected components correclty?

Hey folks!

Would like to know if I’m testing correclty my connected component, I’ve made some search, but still not clear for me and the way I’m doing right now doesn’t sounds correclty, thats why I’m asking helping for the jedi council hahaha

The problem: I want to know if action.fetchPurveyors is being called on fetchData that is passed on mapDispatchToProps:

const mapDispatchToProps = (dispatch) => {
  return {
    fetchData: () => {
      dispatch(actions.fetchPurveyors());
    }
  };
};

export const PurveyorsViewContainer = connect(
  mapStateToProps,
  mapDispatchToProps
)(PurveyorsView);

So, on my unit test I’m doing this:

describe('Map Dispatch To Props', () => {
    it('should call fetch data action', () => {
      const dispatchSpy = sinon.spy();

      // I'm replacing store's dispatch by an spy
      store.dispatch = dispatchSpy; 

      // I'm justing passing the store as props instead of wrapping it in a Provider
      const tree = sd.shallowRender(<PurveyorsViewContainer store={store}/>); 
      const vdom = tree.getRenderOutput();

      // Here I'm calling fetchData that was passed as props by mapDispatchToProps 
      vdom.props.fetchData();

      // And finally I'm checking if the dispatch was called with the action's parameters
      const expectedAction = actions.fetchPurveyors();
      const spyLastCall = dispatchSpy.args[0][0];
      expect(spyLastCall.types).to.be.eql(expectedAction.types);
      expect(spyLastCall.callAPI).to.be.ok;
    });
  });

Is there a better way of doing this? Am I doing an integration test instead of a simple unit test?

Thanks in advance!

[gaearon]

I would just test mapStateToProps and mapDispatchToProps themselves to be honest. Otherwise you seem to be testing what React Redux already tests—that it works 😄 .

You can find a discussion on this here: https://github.com/reactjs/redux/issues/1534.

Hope it helps!

[atkinchris]

@flushentitypacket; write selectors and use them in your mapStateToProps. They’ll allow you to get parts of state in your components, without the component needing to know the structure of state.

// Bad
const mapStateToProps = state => ({
  items: state.data.items
})

// Good
import { selectItems } from './store/selectors'

const mapStateToProps = state => ({
  items: selectItems(state),
})

Then, test your reducers, actions and selectors together - so your test starts with dispatching an action, and ends with expectations about the selector’s output.