Title: Unit testing Redux async actions
Tags: javascript;unit-testing;redux;redux-thunk;nock
Question: I am trying to add unit test cases to my redux actions.
I have tried this, this &amp; this
I am using thunk, promise-middleware in my actions
one of my action is like this
export function deleteCommand(id) {
return (dispatch) =&gt; {
dispatch({
type: 'DELETE_COMMAND',
payload: axios.post(`${Config.apiUrl}delete`, { _id: id })
})
unit test for this is
import configureMockStore from "redux-mock-store"
const middlewares = [thunk, promiseMiddleware()];
const mockStore = configureMockStore(middlewares)
it('creates DELETE_COMMAND_FULFILLED after deleting entry', (done) =&gt; {
nock('http://localhost:8081/')
.post('/delete',{
_id: 1
})
.reply(200, {})
const expectedActions = [{
type: 'DELETE_COMMAND_FULFILLED',
payload: {}
}]
const store = mockStore({
command: {
commands: []
}
})
store.dispatch(actions.deleteCommand({_id: 1}).then(function () {
expect(store.getActions())
.toEqual(expectedActions)
done();
})
I am using nock,redux-mock-store configured with thunk, promise middleware
It gives then of undefined
then I changed the action to return the promise, then I got unhandled promise reject exception, I added a catch to the action dispatch call.
Now I am getting Network Error because nock is not mocking the call.
Also tried moxios, changed axios to isomorphic-fetch, whatwg-fetch. Doesn't seem to be working
Where am I doing it wrong?.
Comment: Are you configuring your mock store correctly? i.e. adding the thunk
and promise middleware.

Comment: I have updated my question with mock store as well


Here is another answer: I know It's from 2017,
But maybe someone will have the same issue.
So the problem is that the arrow function inside deleteCommand returns undefined.
That's why you get
It gives then of undefined
if you using redux-thunk with redux-promise-middleware
You must return the inner dispatch
here is the official redux-promise-middleware docs
The solution is very simple :
Option 1.
Add return inside the arrow function
export function deleteCommand(id) {
return (dispatch) =&gt; {
return dispatch({
type: 'DELETE_COMMAND',
payload: axios.post(`${Config.apiUrl}delete`, { _id: id })
})
}
Option 2.
Remove the curly braces from the arrow function
export function deleteCommand(id) {
return (dispatch) =&gt;
dispatch({
type: 'DELETE_COMMAND',
payload: axios.post(`${Config.apiUrl}delete`, { _id: id })
})
Now you can do
store.deleteCommand(<some id&gt;).then(...)
In general arrow functions and return
Return a plain object
// option 1
const arrowFuncOne = () =&gt; {
return {...someProps}
// option 2
const arrowFuncTwo = () =&gt; ({
...someProps
// This means that you returning an expression
//same as
// return a result of other function
const arrowFuncCallFunOne = () =&gt; callSomeOtherFunc()
const arrowCallFunkTwo = () =&gt; {return callSomeOtherFunc()}
// However
// wrong
const arrowCallFunkNoReturn = () =&gt; {callSomeOtherFunc()}
// in this case the curly braces are just the body of the function
// and inside this body there is no return at all

{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 1, 'CommentCount': 2, 'ContentLicense': 'CC BY-SA 3.0', 'CreationDate': '2017:00:05/15/17', 'FavoriteCount': None, 'PostTypeId': 1, 'Tags': '<javascript><unit-testing><redux><redux-thunk><nock>', 'Title': 'Unit testing Redux async actions', 'ViewCount': 592, 'id': 43986386, 'user_AboutMe': "<p>a 'love to learn new things' guy</p>\n\n<h1>SOreadytohelp</h1>\n", 'user_AccountId': 1333385.0, 'user_DisplayName': 'Sreevisakh', 'user_Reputation': 1846.0, 'user_Views': 254.0, 'user_id': 1276724.0}}