Test redux actions which uses Redux Thunk and authentication - reactjs

Question

I am pretty new to testing React-Redux and I would like to test my loadUser-action which uses redux-thunk and calls an end point which has an auth middle ware. Here is code I would like to test:
export const loadUser = () => (dispatch, getState) => {
dispatch({ type: USER_LOADING });
axios
.get('/auth/user', tokenConfig(getState))
.then((res) =>
dispatch({
type: USER_LOADED,
payload: res.data,
})
)
.catch((err) => {
console.log(err);
dispatch({
type: LOADING_FAILURE,
});
});
};
export const tokenConfig = (getState) => {
const token = getState().auth.token;
const config = {
headers: {
'Content-type': 'application/json',
},
};
if (token) {
config.headers['x-auth-token'] = token;
}
console.log('CONFIG', config);
return config;
};
And this is my test this far:
import { mockStore } from '../../test/utils/mockStore';
import { USER_LOADED } from '../types/authTypes';
import { loadUser } from './authActions';
describe('loadUser', () => {
fit('gets user', async () => {
const store = mockStore();
const tokenConfig = jest.fn();
await store.dispatch(loadUser());
const actions = store.getActions();
expect(actions[0]).toEqual({ type: USER_LOADED, meta: {} });
});
});
The tokenConfig function must be called in a different way. I can't figure out how!

Answer 1

I would mock axios because you don't want to be doing actual API calls when running unit tests because it would use resources on your server. Also by mocking axios, you don't have to mock tokenConfig.
This is how I have done it on a personal project of mine:
import { mockStore } from '../../test/utils/mockStore';
import { USER_LOADED, LOADING_FAILURE } from '../types/authTypes';
import { loadUser } from './authActions';
import axios from 'axios';
jest.mock('axios'); // mock axios library
describe('loadUser', () => {
fit('gets user', async () => {
const store = mockStore();
axios.get.mockImplementationOnce(() => Promise.resolve({ data: {} })); // mock resolve success
await store.dispatch(loadUser());
const actions = store.getActions();
expect(actions[0]).toEqual({ type: USER_LOADED, payload: {} });
});
it('handles api failure', () => {
const store = mockStore();
axios.get.mockImplementationOnce(() => Promise.reject('Error')); // mock error
await store.dispatch(loadUser());
const actions = store.getActions();
expect(actions[0]).toEqual({ type: LOADING_FAILURE });
});
});