lundi 18 novembre 2019

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

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

Aucun commentaire:

Enregistrer un commentaire