How to test the ES6 fetch method with Jest

Question

I'm trying to write test case for my ES6 app using Jest & Jest mockup. But the mockup is not at all picked by the test suite. Can someone let me know the proper way to test

request.js

class Request{

  //
  // Set Header for All the requests
  //
  static get HEADERS() {
    return  {
              "Accept":  "application/json, text/plain", 
              "Content-Type": "application/json"
            };
    }

  //
  // GET Request
  //  
  static get(url){
    return fetch(url)
            .then(response => {
                if (!response.ok) {
                throw new Error(response.statusText);
              }
              return response.json();
          })
   .catch(err => {
      console.log(err);
    });
  }
  }

request.js //jest-mockup

import configureMockStore from 'redux-mock-store' // mock store 
import thunk from 'redux-thunk'

const middlewares = [ thunk ]
const mockStore = configureMockStore(middlewares)
const tasks = {
  "1": { "id": '1', "text": "Read description of programming challenge" },
  "2": { "id": "2", "text": "Implement awesome web app" },
  "3": { "id": "3", "text": "Polish project" }
};
import Request from '../scripts/lib/request';

describe('Request', () => {
    it('List all task fetch request', () => {
      console.log("11111");
      fetch.mockResponses(JSON.stringify(tasks));
      const expectedActions = [{ type: 'SET_TASKS', tasks}];
      const store = mockStore(tasks);
      return store.dispatch(store.get()) 
      .then(() => { // return of async actions
        expect(store.getActions()).toEqual(expectedActions)
      })
    }
}

request.spec.js //unit test

import Request from '../../scripts/lib/request';

describe('request', () => {
    it('Should return all tasks', function() {
        var allTasks = Request.get("api/tasks");
        expect(allTasks).toEqual({
  "1": { "id": '1', "text": "Read description of programming challenge" },
  "2": { "id": "2", "text": "Implement awesome web app" },
  "3": { "id": "3", "text": "Polish project" }
});
    });
});

Don't abuse `class` syntax to create object - never write a class with only static methods! And instead of default-exporting a module object, you better should use multiple named exports — Bergi, May 18 '17 at 09:15
why it is not recommended to use class for static features, i'm new to js development — loganathan, May 18 '17 at 14:21
Because of all the overhead. Unlike certain other languages, classes are not the central building block, but a feature that should only be used when you want to instantiate objects. — Bergi, May 18 '17 at 14:24

score 0 · Answer 1 · answered May 18 '17 at 07:02

The problem is that fetch returns a promise. Therefor you have to either return the promise from your test or use async/await, (docs):

import Request from '../../scripts/lib/request';
const result = {
  "1": {
    "id": '1',
    "text": "Read description of programming challenge"
  },
  "2": {
    "id": "2",
    "text": "Implement awesome web app"
  },
  "3": {
    "id": "3",
    "text": "Polish project"
  },
  "9": {
    "id": "9",
    "text": "Send solution to LogMeIn"
  }
});
describe('request', () = > {
  it('Should return all tasks', function () {
    var allTasks = Request.get("api/tasks");
    return get.then(() = >
      expect(allTasks).toEqual(result);
    )
  });
});
describe('request', () = > {
  it('Should return all tasks', async
    function () {
      var allTasks = await Request.get("api/tasks");
      expect(allTasks).toEqual(result);
    });
});

score 0 · Answer 2 · answered May 24 '17 at 15:47

jest.dontMock('../scripts/lib/request');
import Request from '../scripts/lib/request';
const fs = require('fs')
Request.get = jest.genMockFn();
Request.get.mockImplementation(function(url) {
   let data = {
        "1": { "id": '1', "text": "Read description of programming challenge" },
          "2": { "id": "2", "text": "Implement awesome web app" },
          "3": { "id": "3", "text": "Polish project" },
        };
 return Promise.resolve(data);
});
export default Request;

How to test the ES6 fetch method with Jest

2 Answers2