Redux-observable: failed jest test for epic

Question

I followed the steps from documentation to test epic.

...
store.dispatch({ type: FETCH_USER });

expect(store.getActions()).toEqual([
   { type: FETCH_USER },
   { type: FETCH_USER_FULFILLED, payload }
]);
...

But I get failed because second action is been received some later like following.

Test failed
    Expected value to equal:
      [{"type": "FETCH_USER"}, {"type": "FETCH_USER_FULFILLED", "payload": [some]}]
    Received:
      [{"type": "FETCH_USER"}]

    Difference:

    - Expected
    + Received

    @@ -1,20 +1,5 @@
     Array [
       Object {"type": "FETCH_USER"},
       Object {"type": "FETCH_USER_FULFILLED", "payload": [some]} ] // this is what should be.

So I think I should know when the dispatch is finished or some like that. How can I solve this?

I used fetch() and Rx.Observable.fromPromise instead of ajax.getJSON()

Here is my epic.

const fetchUserEpic = (action$) =>
  action$
    .ofType(FETCH_USER)
    .mergeMap(() => {
      return Rx.Observable.fromPromise(api.fetchUser())
        .map((users) => ({
          type: FETCH_USER_FULFILLED,
          payload: { users }
        }))
        .catch((error) => Rx.Observable.of({
          type: FETCH_USER_ERROR,
          payload: { error }
        }))
        .takeUntil(action$.ofType(FETCH_USER_CANCELLED))
    })

Answer 1

The reason is that promises always resolve on the next microtask so your api.fetchUser() isn't emitting synchronously.

You'll need to either mock it out, use something like Promise.resolve().then(() => expect(store.getActions).toEqual(...) to wait until the next microtask, or you can experiment with testing your epics directly without using redux.

it('Epics with the appropriate input and output of actions', (done) => {
  const action$ = ActionsObservable.of({ type: 'SOMETHING' });

  somethingEpic(action$, store)
    .toArray() // collects everything in an array until our epic completes
    .subscribe(actions => {
      expect(actions).to.deep.equal([
        { type: 'SOMETHING_FULFILLED' }// whatever actions
      ]);

      done();
    });
});

This will be our preferred testing story in the docs when I (or someone else) has time to write them up. So instead of using redux and the middleware in your tests, we just call the epic function directly with our own mocks. Much easier and cleaner.

With that approach, we can leverage the new dependency injection feature of redux-observable: https://redux-observable.js.org/docs/recipes/InjectingDependenciesIntoEpics.html

---

import { createEpicMiddleware, combineEpics } from 'redux-observable';
import { ajax } from 'rxjs/observable/dom/ajax';
import rootEpic from './somewhere';

const epicMiddleware = createEpicMiddleware(rootEpic, {
  dependencies: { getJSON: ajax.getJSON }
});

---

// Notice the third argument is our injected dependencies!
const fetchUserEpic = (action$, store, { getJSON }) =>
  action$.ofType('FETCH_USER')
    .mergeMap(() =>
      getJSON(`/api/users/${payload}`)
        .map(response => ({
          type: 'FETCH_USER_FULFILLED',
          payload: response
        }))
    );

---

import { ActionsObservable } from 'redux-observable';
import { fetchUserEpic } from './somewhere/fetchUserEpic';

const mockResponse = { name: 'Bilbo Baggins' };
const action$ = ActionsObservable.of({ type: 'FETCH_USERS_REQUESTED' });
const store = null; // not needed for this epic
const dependencies = {
  getJSON: url => Observable.of(mockResponse)
};

// Adapt this example to your test framework and specific use cases
fetchUserEpic(action$, store, dependencies)
  .toArray() // buffers all emitted actions until your Epic naturally completes()
  .subscribe(actions => {
    assertDeepEqual(actions, [{
      type: 'FETCH_USER_FULFILLED',
      payload: mockResponse
    }]);
  });

Answer 2

First, use isomorphic-fetch instead of Observable.ajax for nock support, like this

const fetchSomeData = (api: string, params: FetchDataParams) => {
const request = fetch(`${api}?${stringify(params)}`)
  .then(res => res.json());
  return Observable.from(request);
};

So my epic is:

const fetchDataEpic: Epic<GateAction, ImGateState> = action$ =>
  action$
    .ofType(FETCH_MODEL)
    .mergeMap((action: FetchModel) =>
      fetchDynamicData(action.url, action.params)
        .map((payload: FetchedData) => fetchModelSucc(payload.data))
        .catch(error => Observable.of(
          fetchModelFail(error)
      )));

Then, you may need an interval to decide when to finish the test.

describe("epics", () => {
  let store: MockStore<{}>;
  beforeEach(() => {
    store = mockStore();
  });
  afterEach(() => {
    nock.cleanAll();
    epicMiddleware.replaceEpic(epic);
  });
  it("fetch data model succ", () => {
    const payload = {
      code: 0,
      data: someData,
      header: {},
      msg: "ok"
    };
    const params = {
      data1: 100,
      data2: "4"
    };
    const mock = nock("https://test.com")
      .get("/test")
      .query(params)
      .reply(200, payload);
    const go = new Promise((resolve) => {
      store.dispatch({
        type: FETCH_MODEL,
        url: "https://test.com/test",
        params
      });
      let interval: number;
      interval = window.setInterval(() => {
        if (mock.isDone()) {
          clearInterval(interval);
          resolve(store.getActions());
        }
      }, 20);
    });
    return expect(go).resolves.toEqual([
      {
        type: FETCH_MODEL,
        url: "https://test.com/assignment",
        params
      },
      {
        type: FETCH_MODEL_SUCC,
        data: somData
      }
    ]);
  });
});

enjoy it :)