Testing an epic that consumes delay and from operators - redux-observable

Question

I have this epic, need help for testing, the epic calls to async method (from operator) and it uses the delay operator
export const getAll$ = (
action$: any,
state: { value: TStore },
{ stock, Error }: TDependencies
) => {
return action$.pipe(
ofType(getAll.toString()),
map(({ meta: { failures} }) => ({
failures,
})),
switchMap(({ failures }) => {
return merge(
of(getAllStart()),
// call api service stock.getAll, this is async
from(stock.getAll()).pipe(
// wait a 1 second, not matter if stock.getAll finish early
delay(OPERATION_DELAY),
switchMap((response: TGetAllResponse) => {
if(response instanceof Error) {
return throwError(response);
}
return of(
getAllSuccess()
);
}),
catchError((error) => {
return failures === 0 ?
of(getAllFailure({ error }))
:
of(getAll({
failures: failures + 1,
})).pipe(
delay(FAILURE_RETRY_TIME),
);
}),
// "cancel" this epic if getAllAbort action is emitted
takeUntil(
action$.ofType(
getAllAbort.toString()
)
)
)
)
})
)
};
Here is my test
import { ActionsObservable } from 'redux-observable';
// some mocking
const state = { value: {} };
const dependencies = {
api: {},
stock: {
getAll() {
return [];
}
},
Error: class Error {},
};
describe('stock epic', () => {
it('should return all products', (done) => {
// start epic getAll$
getAll$(ActionsObservable.of(getAll()), state, dependencies).subscribe((action) => {
console.log(action); // { type: 'STOCK/GET_ALL_START' }
done();
});
});
});
If you see console.log(action); only returns { type: 'STOCK/GET_ALL_START' }
If I use .toArray() test never ends
I am posting lorem impsun because stack overflow complains about my question
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ac blandit leo. Phasellus non turpis eu mi finibus pharetra nec vel ante. Phasellus non feugiat lorem, nec ultricies quam. In porttitor bibendum facilisis. Donec euismod imperdiet tincidunt. Mauris enim ante, suscipit iaculis mi et, convallis fermentum ante. Vestibulum eget purus pharetra, finibus velit in, porta metus. Vivamus interdum lobortis elit, dignissim tempor sem. Nam ultricies, odio sed tempus convallis, nibh lectus maximus tortor, non sollicitudin enim ex sit amet justo. Nam vel lacus feugiat lorem venenatis interdum.

Answer 1

After several hours, I found the solution, if your epic uses from operator you cannot test it, you need to mock up this operator, in my case I just map this operator to the of operator, with jest this is easy, create in your root project folder, a folder named __mocks__ and create a js file called rxjs.js inside it, and put this code inside
const rxjs = jest.requireActual('rxjs');
rxjs.from = rxjs.of;
module.exports = rxjs;
Then for testing your need to use the class TestScheduler, it is available in rxjs/testing as export const
The code will would like this
import { ActionsObservable } from 'redux-observable';
import { TestScheduler } from 'rxjs/testing';
// your epics to be tested
import epics from './stock';
// actions that you epic will emit
import {
getAll,
getAllStart,
getAllSuccess,
} from '../actions/stock';
// mock the state param (if your epic use it)
import { initialState } from '../reducers/stock';
const state = {
value: {
stock: initialState,
},
};
// mock your dependencies param
const dependencies = {
api: {},
stock: {
getAll() { // in my real code, this is a promise, here is just a normal function, perfect to be use with the of operator
return [];
},
},
Error: class Error {},
};
describe('stock epic', () => {
it('should return all products', (done) => {
// this is just copy-paste
const testScheduler = new TestScheduler((actual, expected) => {
expect(actual).toStrictEqual(expected);
});
testScheduler.run(({ cold, hot, expectObservable, expectSubscriptions, flush }) => {
expectObservable(
epics.getAll$(
ActionsObservable.of(getAll()), // transform action to action$
state, // pass mocked state
dependencies // pass mocked dependencies
)
).toBe(
// my epic has a delay(1000) call
'a 999ms (b|)', {
a: getAllStart(),
b: getAllSuccess()
}
);
done();
});
});
});