Confused about how to pass dispatch as a prop when using jest

Question

Confused about how to pass dispatch as a prop when using jest

Opened this issue 8 years ago · 3 comments

I am trying to test a connected component that uses dispatch(action). dispatch is a required prop and I am trying to pass it in as a prop, but the state.js version of dispatch (without connect) requires state, action as parameters. I've spent a few hours on this to no avail and have posted a question on stackoverflow asking for help. My guess is that I just need to pass dispatch in with the state already specified, something like dispatch={(state, action) => dispatch(action)} but that doesn't look right.

http://stackoverflow.com/questions/41375502/how-do-i-pass-a-redux-dispatch-function-into-a-smart-component-without-using-con

Any helpful suggestions very welcome and much appreciated:-)

Answer 1 · 2017-01-07T04:48:02.000Z

I still can't figure this out. My smart component renders a page. I just want to test it using jest and snapshot. My problem is that my smart component is normally connected to a store using connect(). How can I dispatch the normal way from within my smart component when I am testing it in isolation. connect() is not being used. I seem to have to pass a dispatch() function down to my smart component, but it is clearly not the right function. Maybe I am supposed to approaching this in a whole different way?

Answer 2 · 2017-01-07T04:52:24.000Z

import {dispatch} from '../../../../test/state';
export const dispatch = (state, action) => reducer(state, action);

So when I dispatch something without using connect I have to give it state and action and the reducer runs on that action. But in my smart component, dispatch is mostly used with a single parameter, an action, so where does it get the state information on when under test?

Answer 3 · 2017-01-08T18:28:32.000Z

I think I figured this out.

In pepperoni-app-kit there is a test function provided for use by test code only that passes an action through all reducers. It happens to be called "dispatch" and takes two arguments (state, action) which means it is really a reducer.

In my code (also derived from pepperoni-app-kit) I am dispatching actions using a dispatch function that only requires the action to be passed because it already knows what store it is dealing with and the store knows about state.

Instead of trying to pass the dispatch(state, action) function down to my components (really a reducer), I imported a redux store itself and now pass the store.dispatch function down to the unit under test.

I have to pass it in, because I don't want to have to change my source code under test.