Test an Action with multiple dispatches (Loading, error and success) - reactjs

Question

How could I create a test for an Action with multiple dispatches(Loading, error & success), let see one of my actions:
import axios from 'axios';
import { CompaniesActionTypes } from './types';
export const getCompanies = () => async (dispatch: any) => {
dispatch({
type: CompaniesActionTypes.LOADING
})
try {
const response = await axios.get('app/admin/companies');
dispatch({
type: CompaniesActionTypes.GET_COMPANIES,
payload: response.data
})
} catch (error) {
console.log(error.message);
dispatch({
type: CompaniesActionTypes.ERROR,
payload: 'There was an error while requesting list of companies, please try again later.'
})
}
}
To have more information, below is my reducer for this scenario:
import { CompaniesActionTypes, CompaniesState } from './types';
import { Reducer } from 'redux';
const INITIAL_STATE: CompaniesState = {
data: [],
loading: false,
error: ''
}
export const reducer: Reducer<CompaniesState> = (state = INITIAL_STATE, action) => {
switch (action.type) {
case CompaniesActionTypes.GET_COMPANIES:
return {...state, data: action.payload, loading: false, error: ''}
case CompaniesActionTypes.LOADING:
return {...state, loading: true};
case CompaniesActionTypes.ERROR:
return {...state, error: action.payload, loading: false};
default:
return state
}
}
Note: As you can see I'm using typescript, should not be a problem.
so what I'm trying is:
// Actions
describe('creating actions', () => {
it('should create an action to get companies', () => {
const expectedAction = {
type: CompaniesActionTypes.GET_COMPANIES,
payload: Promise.resolve()
}
expect(actions.getCompanies()).toEqual(expectedAction)
})
})
For the first action test Im getting this error:
Expected: {"payload": {}, "type": "##companies/GET_COMPANIES"}
Received: [Function anonymous]
const middlewares = [thunk]
const mockStore = configureMockStore(middlewares)
describe('actions', () => {
afterEach(() => {
fetchMock.restore()
})
it('creates GET_COMPANIES when fetching companies', () => {
fetchMock.getOnce('app/admin/client/companies', {
body: mock,
headers: { 'content-type': 'application/json' }
})
const expectedActions = [{ type: CompaniesActionTypes.GET_COMPANIES, payload: mock }]
const store = mockStore({})
return store.dispatch(actions.getCompanies()).then(() => {
expect(store.getActions()).toEqual(expectedActions)
})
})
})
For this example I'm having problems with the dispatches:
- Expected
+ Received
Array [
Object {
- "payload": Array [
- Object {
- "id": 1,
- "name": "Company Test 1",
+ "type": "##companies/LOADING_COMPANIES",
},
Object {
- "id": 2,
- "name": "Company Test 2",
- },
- Object {
- "id": 3,
- "name": "Company Test 3",
- },
- ],
- "type": "##companies/GET_COMPANIES",
+ "payload": "There was an error while requesting list of companies, please try again later.",
+ "type": "##companies/ERROR_COMPANIES",
},
]
whats going on with:
"type": "##companies/LOADING_COMPANIES",
"type": "##companies/GET_COMPANIES",
"type": "##companies/ERROR_COMPANIES",
Any idea how to manage this scenario for testing? I guess it's because timing but I have no idea how to implement all the steps