Cannot read property '.then' of undefined when testing async action creators with redux and react

Question

I'm trying to write some test using react, redux-mock-store and redux, but I keep getting and error. Maybe because my Promise has not yet been resolved?

The fetchListing() action creator actually works when I try it on dev and production, but I'm having problems making the test pass.

error message

(node:19143) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 3): SyntaxError (node:19143) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.  FAIL  src/actions/__tests__/action.test.js   ● async actions › creates "FETCH_LISTINGS" when fetching listing has been done      TypeError: Cannot read property 'then' of undefined        at Object.<anonymous> (src/actions/__tests__/action.test.js:44:51)           at Promise (<anonymous>)       at Promise.resolve.then.el (node_modules/p-map/index.js:42:16)           at <anonymous>       at process._tickCallback (internal/process/next_tick.js:169:7)    async actions     ✕ creates "FETCH_LISTINGS" when fetching listing has been done (10ms) 

action/index.js

// actions/index.js import axios from 'axios';  import { FETCH_LISTINGS } from './types';  export function fetchListings() {    const request = axios.get('/5/index.cfm?event=stream:listings');    return (dispatch) => {     request.then(( { data } ) => {       dispatch({ type: FETCH_LISTINGS, payload: data });     });   } }; 

action.test.js

// actions/__test__/action.test.js  import configureMockStore from 'redux-mock-store'; import thunk from 'redux-thunk'; import { applyMiddleware } from 'redux'; import nock from 'nock'; import expect from 'expect';  import * as actions from '../index'; import * as types from '../types';   const middlewares = [ thunk ]; const mockStore = configureMockStore(middlewares);  describe('async actions', () => {   afterEach(() => {     nock.cleanAll() })   it('creates "FETCH_LISTINGS" when fetching listing has been done', () => {   nock('http://example.com/')     .get('/listings')     .reply(200, { body: { listings: [{ 'corpo_id': 5629, id: 1382796, name: 'masm' }] } })      const expectedActions = [       { type: types.FETCH_LISTINGS }, { body: { listings: [{ 'corpo_id': 5629, id: 1382796, name: 'masm' }] }}     ]      const store = mockStore({ listings: [] })      return store.dispatch(actions.fetchListings()).then((data) => {       expect(store.getActions()).toEqual(expectedActions)     })   }) }) 

Answer 1

store.dispatch(actions.fetchListings()) returns undefined. You can't call .then on that.

See redux-thunk code. It executes the function you return and returns that. The function you return in fetchListings returns nothing, i.e. undefined.

Try

return (dispatch) => {     return request.then( (data) => {       dispatch({ type: FETCH_LISTINGS, payload: data });     });   } 

After that you will still have another problem. You don't return anything inside your then, you only dispatch. That means the next then gets undefined argument