how to test api calls using fetch?

I’m having a hard time understanding below behaviour and would appreciate any help to pointing me into the right direction.

I have a generic class for my api calls:

class Api {
 static ack(param1, param2) {
  return fetch(process.env.REACT_APP_ACK_URL + param1 + '/' + param2, {
          method: 'PUT',
          headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json'
          }
        })
        .then((response) => {
          if(response.ok) {
            return response.json();
          } else {
            console.log('ack failed', response.statusText)
          }
        })
        .catch((ex) => {
          throw new Error('fetch failed' + ex)
        });
 }
}

in my Api.test.js I have a following code

import Api from './Api';

describe("Api", function () {

  beforeEach(function() {
    window.fetch = jest.fn().mockImplementation(() => Promise.resolve({ok: true, Id: '123'}));
  });

  it("ack", function () {

    Api.ack('foo', 'bar').then(response => {
      console.log(response); //< this is never printed
      expect(response.Id).toBe(1); //< always pass / gets ignored?
    });

  });
});

regardless of what I set the response.Id in Promise.resolve({ok: true, Id: '123'})

expect(response.Id).toBe(1) or expect(response.Id).toBe('abc') always pass

[bondarewicz]

@gaearon you rock dude, thanks so much 😃 I ended up changing the mockImplementation as per below and using async/await

Api.test.js

beforeEach(function() {

  global.fetch = jest.fn().mockImplementation(() => {
      var p = new Promise((resolve, reject) => {
        resolve({
          ok: true, 
          Id: '123', 
          json: function() { 
            return {Id: '123'}
          }
        });
      });

      return p;
  });

});


it("ack", async function() {
  const response = await Api.ack('foo', 'bar');
  console.log(response);
  expect(response.Id).toBe(1); 
});

results in :

expect(received).toBe(expected)

Expected value to be (using ===):
  1
Received:
  "123"

Difference:

Comparing two different types of values:
  Expected: number
  Received: string

can this be considered as good practice for testing promises returned by fetch in jest?

[gaearon]

By the way I noticed you don’t return Promise from the test. The runner can’t know to wait for the promise to finish in this case.

Have you tried returning Promise or using async await? See the async tutorial.

  it("ack", async function () {
    const response = await Api.ack('foo', 'bar');
    console.log(response);
    expect(response.Id).toBe(1);
  });