How to write unit test case for async method in react? - react-redux

Question

I am trying to write a unit test case for an async function which having for loop inside and in each iteration it calls Axios "get" method.
I am new to unit test cases, and I know how to write it for simple async function, but for the complicated case, I need some help. Thanks in advance.
export const someMethod = ({ collections }) => {
return dispatch => {
if (collections.length > 0) {
for (let index = 0; index < collections.length; index++) {
const collection = collections[index];
const { libraryUrl, bookUrl } = collection;
const containerId = Math.random().toString();
dispatch(getBook({ boolURL: bookUrl, libraryURL: libraryUrl, libraryId }));
dispatch({
type: ASSESSMENT.BOOK.ADD,
payload: { boolURL: bookUrl, libraryId }
});
}
}
};
};

Answer 1

Here is the solution:
actionCreators.ts:
export const ASSESSMENT = {
BOOK: {
ADD: 'ADD',
GET: 'GET'
}
};
export const getBook = data => ({ type: ASSESSMENT.BOOK.GET, payload: { data } });
export const someMethod = ({ collections }) => {
return dispatch => {
if (collections.length > 0) {
for (let index = 0; index < collections.length; index++) {
const collection = collections[index];
const { libraryUrl, bookUrl, libraryId } = collection;
const containerId = Math.random().toString();
dispatch(getBook({ boolURL: bookUrl, libraryURL: libraryUrl, libraryId }));
dispatch({
type: ASSESSMENT.BOOK.ADD,
payload: { boolURL: bookUrl, libraryId }
});
}
}
};
};
actionCreators.spec.ts:
import { someMethod, ASSESSMENT } from './actionCreators';
import createMockStore from 'redux-mock-store';
import thunk, { ThunkDispatch } from 'redux-thunk';
import { AnyAction } from 'redux';
const middlewares = [thunk];
const mockStore = createMockStore<any, ThunkDispatch<any, any, AnyAction>>(middlewares);
describe('someMethod', () => {
it('t1', () => {
const intialState = {};
const store = mockStore(intialState);
const collections = [
{ libraryUrl: 'aa', bookUrl: 'a', libraryId: '1' },
{ libraryUrl: 'bb', bookUrl: 'b', libraryId: '2' }
];
const expectedActions = [
{
type: ASSESSMENT.BOOK.GET,
payload: {
data: {
boolURL: collections[0].bookUrl,
libraryURL: collections[0].libraryUrl,
libraryId: collections[0].libraryId
}
}
},
{ type: ASSESSMENT.BOOK.ADD, payload: { boolURL: collections[0].bookUrl, libraryId: collections[0].libraryId } },
{
type: ASSESSMENT.BOOK.GET,
payload: {
data: {
boolURL: collections[1].bookUrl,
libraryURL: collections[1].libraryUrl,
libraryId: collections[1].libraryId
}
}
},
{ type: ASSESSMENT.BOOK.ADD, payload: { boolURL: collections[1].bookUrl, libraryId: collections[1].libraryId } }
];
store.dispatch(someMethod({ collections }));
expect(store.getActions()).toEqual(expectedActions);
});
});
Unit test result with coverage report:
PASS src/stackoverflow/58012116/actionCreators.spec.ts
someMethod
✓ t1 (6ms)
-------------------|----------|----------|----------|----------|-------------------|
File | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s |
-------------------|----------|----------|----------|----------|-------------------|
All files | 100 | 50 | 100 | 100 | |
actionCreators.ts | 100 | 50 | 100 | 100 | 12 |
-------------------|----------|----------|----------|----------|-------------------|
Test Suites: 1 passed, 1 total
Tests: 1 passed, 1 total
Snapshots: 0 total
Time: 5.523s
Here is the completed demo:https://github.com/mrdulin/jest-codelab/tree/master/src/stackoverflow/58012116