score:0

You are really asking to test two different things:

  1. That mapToProps will call your action helpers as you suspect
  2. That your event handlers passed as props will be called when an event is triggered

I don't see the value in doing #1 for such simple functions, and anyway, in order to test mapToProps alone you would need to be able to inject the functions used in its definition to be able to test that they are called. Doing that would require seeing more of your code.

Alternatively, assuming the action creator functions are coming from another module you could use a link seam to intercept calls to the action creators module and substitute the return values with your own.

Using proxyquire your test could look something like this:

const sinon = require('sinon');
let fakeActions;
let MyComponent, mapToProps;

function setupFakeActions() {
    fakeActions = { 
        fetchPaymentDetails: sinon.stub(), 
        /* etc ... */
    };

    const module = proxyquire('../src/my-component', {
        './actions': fakeActions
    });
    {MyComponent, mapToProps} = module;
}

describe('MyComponent propmapping', ()=> {
    setupFakeActions();
    it('should create a function that dispatches actions', () => {
        const dispatchStub = sinon.stub();
        const result = mapToProps(dispatchStub);
        result.fetchPaymentDetails();

        assert(dispatchStub.calledOnce);
        assert(fakeActions.fetchPaymentDetails.calledOnce);
        // more assertions: http://sinonjs.org/releases/v2.3.4/assertions/
        assert(dispatchStub.calledWith(fakeActions.fetchPaymentDetails));
    });
});

You have not tagged your question with redux, but assuming you use that, there is another way you could test that the functions do what they should, and that is of course to just create a store, trigger the action, and see if the right result comes out of the store, but that is quite obscure in intent and implementation, and so not recommended.

Now, the second point is more valuable, and quite straight forward using Enzyme:

/* assuming existing test setup code for Mocha is in place: describe, it, ... */
it('calls assigned props on click events', () => {
    const props = {};
    props.fetchPaymentDetails = sinon.spy();
    const wrapper = shallow(
        <MyComponent fetchPaymentDetails={fetchPaymentDetails} />
    );
    wrapper.find('button').simulate('click');
    expect(props.fetchPaymentDetails).to.have.property('callCount', 1);
});

Related Query

More Query from same tag