Cannot proper handle error in ajax from rxjs

Question

I write application in React an Redux and I have a case that I have to send request to some resource when specific action was called and response of type 'text/html' write to state. This resource can return status 200 or 404, and I cannot write correct test for case with response 404. To run tests I use jest library.

Action.js:

export const actions = {
    GET_RESOURCE_SUCCESS: 'GET_RESOURCE_SUCCESS',
    GET_RESOURCE_FAILURE: 'GET_RESOURCE_FAILURE'
};

export const getResourceSuccess = (response) => ({
    type: actions.GET_RESOURCE_SUCCESS,
    payload: response
});

export const getResourceFailure = () => ({
    type: actions.GET_RESOURCE_FAILURE
});

Reducer.js:

import { handleActions } from 'redux-actions';
import { actions } from './Action';

const initialState = {
    content: ''
};

export const getResourceReducer = handleActions(
    {
        [actions.GET_RESOURCE_SUCCESS]: (state, action) => ({ ...state, content: action.payload })
    },
    {
        [actions.GET_RESOURCE_FAILURE]: () => ({ initialState })
    },
    initialState
);

In brief: when resource returns status 200 and content exists I want to overwrite content from initialState and call action GET_RESOURCE_SUCCESS, when resource returns status 404 and content doesn't exist I want not to overwrite the content and call action GET_RESOURCE_FAILURE.

GetResourceEpic.js:

import { ajax } from 'rxjs/observable/dom/ajax';
import { combineEpics } from 'redux-observable';
import { Observable } from 'rxjs';
import { getResourceSuccess, getResourceFailure } from '../Action';

const specificActionTypes = [
    'SPECIFIC_ACTION_ONE',
    'SPECIFIC_ACTION_TWO'
];

const getResource = () => ajax({
    method: 'GET',
    url: 'http://example.com',
    headers: {
        Accept: 'text/html'
    },
    crossDomain: true,
    responseType: 'text/html'
});

const getResourceEpic = (action$, store) => action$
    .filter(action => specificActionTypes.includes(action.type))
    .flatMap(() => getResource()
        // when response has status 200 and field response call getResourceSuccess
        .map(({ response }) => getResourceSuccess(response))
        // when response has status 404 and doesn't have field response call getResourceFailure
        .catch(() => {
            // helper statement to show in browser that the .catch() was called
            console.log('Error');
            return getResourceFailure();
        })
    );

export default combineEpics(
    getResourceEpic
);

And it works in generally, but I get two errors:

first:

Uncaught TypeError: You provided an invalid object where a stream was expected. You can provide an Observable, Promise, Array, or Iterable.
    at Object.subscribeToResult (subscribeToResult.js:73)
    at CatchSubscriber../node_modules/rxjs/operator/catch.js.CatchSubscriber.error (catch.js:111)
    at MapSubscriber../node_modules/rxjs/Subscriber.js.Subscriber._error (Subscriber.js:128)
    at MapSubscriber../node_modules/rxjs/Subscriber.js.Subscriber.error (Subscriber.js:102)
    at AjaxSubscriber../node_modules/rxjs/Subscriber.js.Subscriber._error (Subscriber.js:128)
    at AjaxSubscriber../node_modules/rxjs/Subscriber.js.Subscriber.error (Subscriber.js:102)
    at XMLHttpRequest.xhrReadyStateChange (AjaxObservable.js:327)
    at XMLHttpRequest.d (raven.js:363)

and second:

Could not consume error: TypeError: Cannot read property 'length' of null
    at getLinesAround (http://localhost:3000/static/js/bundle.js:47197:74)
    at http://localhost:3000/static/js/bundle.js:47537:402
    at Array.map (native)
    at _callee2$ (http://localhost:3000/static/js/bundle.js:47517:54)
    at tryCatch (http://localhost:3000/static/js/bundle.js:58220:40)
    at Generator.invoke [as _invoke] (http://localhost:3000/static/js/bundle.js:58458:22)
    at Generator.prototype.(anonymous function) [as next] (http://localhost:3000/static/js/bundle.js:58272:21)
    at step (http://localhost:3000/static/js/bundle.js:47553:191)
    at http://localhost:3000/static/js/bundle.js:47553:361
raven.js:51 

And mentioned above problems don't allow me to write a tests, because only responses with status 200 pass the tests, other throws errors.

it('should dispatch GET_RESOURCE_SUCCESS when SPECIFIC_ACTION_ONE was dispatched', async () => {
        store = mockStore();

        const response = 'some content';
        nock('http://example.com')
            .get('/')
            .reply(200, response);

        const payload = { type: 'SPECIFIC_ACTION_ONE' };
        // specificActionOne() produces and action of type 'SPECFIC_ACTION_ONE'
        const action$ = ActionsObservable.of(specificActionOne(payload));
        const resultAction = await getResourceEpic(action$, store).toPromise();

        expect(resultAction)
            .toEqual(getResourceSuccess(response));
    });

And test above pass, but case with status equal to 404 doesn't pass:

it('should dispatch GET_RESOURCE_FAILURE when SPECIFIC_ACTION_ONE was dispatched', async () => {
            store = mockStore();
            nock('http://example.com')
                .get('/')
                .reply(404);

            const payload = { type: 'SPECIFIC_ACTION_ONE' };
            const action$ = ActionsObservable.of(specificActionOne(payload));
            const resultAction = await getResourceEpic(action$, store).toPromise();

            expect(resultAction)
                .toEqual(getResourceFailure());
        });

And test above doesn't pass and I get the result:

TypeError: You provided an invalid object where a stream was expected. You can provide an Observable, Promise, Array, or Iterable.

      at Object.subscribeToResult (node_modules/rxjs/util/subscribeToResult.js:73:27)
      at CatchSubscriber.Object.<anonymous>.CatchSubscriber.error (node_modules/rxjs/operator/catch.js:111:42)
      at MapSubscriber.Object.<anonymous>.Subscriber._error (node_modules/rxjs/Subscriber.js:128:26)
      at MapSubscriber.Object.<anonymous>.Subscriber.error (node_modules/rxjs/Subscriber.js:102:18)
      at AjaxSubscriber.Object.<anonymous>.Subscriber._error (node_modules/rxjs/Subscriber.js:128:26)
      at AjaxSubscriber.Object.<anonymous>.Subscriber.error (node_modules/rxjs/Subscriber.js:102:18)
      at XMLHttpRequest.xhrReadyStateChange [as onreadystatechange] (node_modules/rxjs/observable/dom/AjaxObservable.js:327:32)
      at XMLHttpRequest.callback.(anonymous function) (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:289:32)
      at invokeEventListeners (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:219:27)
      at invokeInlineListeners (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:166:7)
      at EventTargetImpl._dispatch (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:122:7)
      at EventTargetImpl.dispatchEvent (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:87:17)
      at XMLHttpRequest.dispatchEvent (node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:61:35)
      at readyStateChange (node_modules/jsdom/lib/jsdom/living/xmlhttprequest.js:829:9)
      at Request.properties.client.on (node_modules/jsdom/lib/jsdom/living/xmlhttprequest.js:947:7)
      at Request.emit (events.js:132:15)
      at IncomingMessage.<anonymous> (node_modules/request/request.js:1085:12)
      at Object.onceWrapper (events.js:219:13)
      at IncomingMessage.emit (events.js:132:15)
      at endReadableNT (_stream_readable.js:1101:12)
      at process._tickCallback (internal/process/next_tick.js:114:19)

Answer 1

The function passed to catch has to return an observable. You are returning an action.

Instead, you should do this:

import { of } from 'rxjs/observable/of';
...
.catch(() => {
  console.log('Error');
  return of(getResourceFailure());
})