How to mock http request in sagas (black box testing approach)

Question

I am trying to take a black box approach and use sagaTester to test my sagas.

This is the saga.js from react-boilerplate:

export function* getRepos() {
  // Select username from store
  const username = yield select(makeSelectUsername());
  const requestURL = `https://api.github.com/users/${username}/repos?type=all&sort=updated`;

  try {
    // Call our request helper (see 'utils/request')
    const repos = yield call(request, requestURL);
    yield put(reposLoaded(repos, username));
  } catch (err) {
    yield put(repoLoadingError(err));
  }
}

export default function* githubData() {
  // Watches for LOAD_REPOS actions and calls getRepos when one comes in.
  // By using `takeLatest` only the result of the latest API call is applied.
  // It returns task descriptor (just like fork) so we can continue execution
  // It will be cancelled automatically on component unmount
  yield takeLatest(LOAD_REPOS, getRepos);
}

This is my saga.test.js:

it('black box testing using sagaTester', async () => {
    const initialState = fromJS({
      home: {
        username: 'john',
      },
    });
    const sagaTester = new SagaTester({ initialState });
    sagaTester.start(githubData);

    sagaTester.dispatch(loadRepos());

    nock('https://api.github.com/repos?type=all&sort=updated')
      .get('/users/john')
      .reply(200, 'hello world');

    await sagaTester.waitFor(reposLoaded.type);
  });

This is the error that I've got:

Error: Timeout - Async callback was not invoked within timeout specified by jasmine.DEFAULT_TIMEOUT_INTERVAL.

All I am trying to do is to mock the response from this line:

const repos = yield call(request, requestURL);

What am I doing wrong????

Any help is appreciated!!!

Answer 1

I hope this will help others who stumble across this problem. The problem here was whatwg-fetch which is the baked in library in react-boiler-plate.

I looked at the example here and I noticed that node-fetch was being used.

So I replaced this line:

const repos = yield call(request, requestURL);

with:

const repos = yield call(() => fetch(requestURL));

and my test worked.

Another thing, if you want to use axios instead of whatwg, then you better use axios-mock-adapter to mock the request. Finally got this working after hours of fiddling. Thanks for your help!