CODEWITHSUNDEEP
javascriptreactjstestingreduxjestjs
assembler
assembler

Reputation: 3300

How to set a test for multiple fetches with Promise.all using jest

I'm using jest for my tests. I'm using react and redux and I have this action:

function getData(id, notify) {
 return (dispatch, ...) => {
   dispatch(anotherFunction());
   Promise.all(['resource1', 'resource2', 'resource3'])
   .then(([response1,response2,response3]) => {
        // ... handle responses
    })
   .catch(error => { dispatch(handleError(error)); }
 };
}

I've been looking for into the jest documentation how to set a test for this action, but I was unable to find a way. I tried myself something like this:

it('test description', (done) => {
  const expectedActions = [{type: {...}, payload: {...}},{type: {...}, payload: {...}},...];
  fetchMock.get('resource1', ...);
  fetchMock.get('resource2', ...);
  fetchMock.get('resource3', ...);
  // ... then the rest of the test calls
});

Unsuccessfully. So how should I proceed?

Upvotes: 14

Views: 29035

Answers (2)

NearHuscarl
NearHuscarl

Reputation: 81370

You can tell Jest to wait for the promise to resolve by returning the promise in the callback. See this section here for more info.

it('should fetch some food', () => {
  const fetchItem1 = () => fetchData1().then(data => {
    expect(data).toBe('peanut butter');
  })
  const fetchItem2 = () => fetchData2().then(data => {
    expect(data).toBe('boiled egg');
  })
  const fetchItem3 = () => fetchData3().then(data => {
    expect(data).toBe('fried salad');
  })

  return Promise.all([fetchItem1(), fetchItem2(), fetchItem3()])
    .then(() => runOtherTests());
});

Upvotes: 6

whtlnv
whtlnv

Reputation: 2207

To use Promise.all you could do the following

test('Testing Stuff', async (done) => {

  const expectedActions = [{ foo: {...}, bar: {...} }, { foo: {...}, bar: {...} }];

  // we pass the index to this function 
  const asyncCall = async (index) => {
    // check some stuff
    expect(somestuff).toBe(someOtherStuff);
    // await the actual stuff
    const response = await doStuff( expectedActions[index] );
    // check the result of our stuff
    expect(response).toBe(awesome);
    return response;
  };

  // we put all the asyncCalls we want into Promise.all 
  const responses = await Promise.all([
    asyncCall(0),
    asyncCall(1),
    ...,
    asyncCall(n),
  ]);

  // this is redundant in this case, but wth
  expect(responses).toEqual(awesome);

  done();

});

Upvotes: 7

Related Questions