How do I test a function inside an if statement or try/catch? For instance,

export function* onFetchMessages(channel) {
    yield put(requestMessages())
    const channel_name = channel.payload
    try {
        const response = yield call(fetch,'/api/messages/'+channel_name)

        if(response.ok){
            const res = yield response.json();

            const date = moment().format('lll');
            yield put(receiveMessages(res,channel.payload,date))
        }


    } catch (error){
        yield put(rejectMessages(error))
    }
}

I need to input a real channel name that actually exist in the database for it to return a valid response for the yields that follow to execute, otherwise it will throw an error. In addition, I will get an error message, cannot read property json of undefined, so the yield after that cannot be reached due to this error message. So my first problem is 'if(response.ok)' but even if I remove it, yield response.json() would return an error and in addition the yield after that wont be executed. If anyone can show me how to test these, would be much appreciated.

How do I test a function inside an if statement or try/catch? For instance,

export function* onFetchMessages(channel) {
    yield put(requestMessages())
    const channel_name = channel.payload
    try {
        const response = yield call(fetch,'/api/messages/'+channel_name)

        if(response.ok){
            const res = yield response.json();

            const date = moment().format('lll');
            yield put(receiveMessages(res,channel.payload,date))
        }


    } catch (error){
        yield put(rejectMessages(error))
    }
}

I need to input a real channel name that actually exist in the database for it to return a valid response for the yields that follow to execute, otherwise it will throw an error. In addition, I will get an error message, cannot read property json of undefined, so the yield after that cannot be reached due to this error message. So my first problem is 'if(response.ok)' but even if I remove it, yield response.json() would return an error and in addition the yield after that wont be executed. If anyone can show me how to test these, would be much appreciated.

• javascript
• testing
• redux-saga

3 Answers 3

Pass the response object to the previous execution and test conditional, I would do it like this, hope this helps:

 export function* onFetchMessages(channel) {
try {
    yield put(requestMessages())
    const channel_name = channel.payload
    const response = yield call(fetch,'/api/messages/'+channel_name)

    if(response.ok){
        const res = yield response.json();

        const date = moment().format('lll');
        yield put(receiveMessages(res,channel.payload,date))
    }

   } catch (error){
      yield put(rejectMessages(error))
  }
}

describe('onFetchMessages Saga', () => {
 let output = null;
 const saga = onFetchMessages(channel); //mock channel somewhere...

 it('should put request messages', () => {
  output = saga.next().value;
  let expected = put(requestMessages()); //make sure you import this dependency
  expect(output).toEqual(expected);
 });

 it('should call fetch...blabla', ()=> {
  output = saga.next(channel_name).value; //include channel_name so it is avaiable on the next iteration
  let expected = call(fetch,'/api/messages/'+channel_name); //do all the mock you ned for this
  expect(output).toEqual(expected);
 });

 /*here es you answer*/
 it('should take response.ok into the if statemenet', ()=> {
  //your json yield is out the redux-saga context so I dont assert it
   saga.next(response).value; //same as before, mock it with a ok property, so it is available
   output = saga.next(res).value; //assert the put effect
   let expected = put(receiveMessages(res,channel.payload,date)); //channel should be mock from previous test
   expect(output).toEqual(expected);
 });

});

Notice your code probably does more stuff I'm not aware of, but this at least should put u in some line to solve your problem.

You might want to use an helper library for that, such as redux-saga-testing.

Disclaimer: I wrote this library to solve that exact same problem

For your specific example, using Jest (but works the same for Mocha), I would do two things:

• First, I would separate the API call to a different function
• Then I would use redux-saga-testing to test your logic in a synchronous way:

Here is the code:

import sagaHelper from 'redux-saga-testing';
import { call, put } from 'redux-saga/effects';
import { requestMessages, receiveMessages, rejectMessages } from './my-actions';

const api = url => fetch(url).then(response => {
    if (response.ok) {
        return response.json();
    } else {
        throw new Error(response.status); // for example
    }
});

function* onFetchMessages(channel) {
    try {
        yield put(requestMessages())
        const channel_name = channel.payload
        const res = yield call(api, '/api/messages/'+channel_name)
        const date = moment().format('lll');

        yield put(receiveMessages(res,channel.payload,date))
    } catch (error){
        yield put(rejectMessages(error))
    }
}


describe('When testing a Saga that throws an error', () => {
    const it = sagaHelper(onFetchMessages({ type: 'foo', payload: 'chan1'}));

    it('should have called the API first, which will throw an exception', result => {
        expect(result).toEqual(call(api, '/api/messages/chan1'));
        return new Error('Something went wrong');
    });

    it('and then trigger an error action with the error message', result => {
        expect(result).toEqual(put(rejectMessages('Something went wrong')));
    });
});

describe('When testing a Saga and it works fine', () => {
    const it = sagaHelper(onFetchMessages({ type: 'foo', payload: 'chan2'}));

    it('should have called the API first, which will return some data', result => {
        expect(result).toEqual(call(api, '/api/messages/chan2'));
        return 'some data';
    });

    it('and then call the success action with the data returned by the API', result => {
        expect(result).toEqual(put(receiveMessages('some data', 'chan2', 'some date')));
        // you'll have to find a way to mock the date here'
    });
});

You'll find plenty of other examples (more plex ones) on the project's GitHub.

Here's a related question: in the redux-saga docs, they have examples where take is listening for multiple actions. Based on this, I wrote an auth saga that looks more or less like this (you may recognize that this is a modified version of an example from the redux-saga docs:

function* mySaga() { 
    while (true) {
        const initialAction = yield take (['AUTH__LOGIN','AUTH__LOGOUT']);
        if (initialAction.type === 'AUTH__LOGIN') {
            const authTask = yield fork(doLogin);
            const action = yield take(['AUTH__LOGOUT', 'AUTH__LOGIN_FAIL']);
            if (action.type === 'AUTH__LOGOUT') {
                yield cancel(authTask);
                yield call (unauthorizeWithRemoteServer)
            }
        } else {
            yield call (unauthorizeWithRemoteServer)
        }
    }
}

I don't think this is an anti-pattern when dealing with Sagas, and the code certainly runs as expected outside the test environment (Jest). However, I see no way to handle the if statements in this context. How is this supposed to work?