Unit testing with takeLatest or takeEvery

From the examples I’ve seen, if you use a watcher saga that uses takeLatest or takeEvery, the tests do not ensure the saga is run after seeing the correct action dispatched.

For example here are my sagas.

function* getDataSaga(action) {
  try {
    const response = yield call(api.getData, action.payload);
    yield put(getDataSucceeded(response));
  } catch (e) {
    yield put(getDataFailed(e));
  }
}

function* watchGetDataSaga() {
  yield* takeLatest(GET_DATA, getDataSaga);
}

I could write some tests like this:

describe('My Saga', () => {
  it('should first call the getData api', () => {
    // arrange
    const action = {
      type: GET_DATA,
      payload: { foo: 'bar' },
    };
    const iterator = getDataSaga(action);
    const expectedYield = call(api.getData, action.payload);

    // act
    const actualYield = iterator.next().value;

    // assert
    expect(actualYield).to.deep.equal(expectedYield);
  });
});

However, I can’t write tests that make sure the saga is kicked off from a GET_DATA action. It seems to me the only way to do this sort of test is to use a while(true) in my getDataSaga instead of having the watchGetDataSaga. Is this the case, or is there a way around this?

[npbee]

Not dumb! I’m no expert myself, but I’ll explain as I understand it.

Both of these basically have the same functional outcome. You can test both in the way we discussed above but the return values are different, so the tests would change.

The yield* expression is just a plain JS feature, and it essentially just allows to you to yield to nested iterables. In this context, doing yield* takeEvery would mean that you’re yielding to the every value that the takeEvery iterable itself yields. So to test yield* takeEvery, you’d be testing for what values takeEvery itself yields back to you, which means you need to know the internals of takeEvery.

When using yield call(takeEvery, ..), that’s a declarative effect from redux-saga and it will only ever yield one value and that is a CALL effect. You can easily test that the correct effect was yielded.

So long story short: functionally they are basically the same but testing call effects are easier.

I made another fiddle that might be more clear: https://jsfiddle.net/npbee/Lqreq12b/2/.

Hope that helps!

[Andarist]

call(takeEvery, ...) is old recommendation, please just use takeEvery(...) from the redux-saga/effects ‘subpackage’