JestでES6のフェッチメソッドをテストする方法

Question

Jest & Jestモックアップを使用してES6アプリケーションのテストケースを作成しようとしています。しかし、モックアップはテストスイートでは一切選択されていません。誰かが私に

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 //冗談-モックアップ

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をテストするための適切な方法を知らせることができます //ユニットテスト

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" } 
}); 
    }); 
}); 

Answer 1

fetchは約束を返すという問題があります。そのため、あなたは（docs）、あなたのテストからの約束を返すか、async/awaitを使用するかがあります。

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); 
    }); 
}); 

Answer 2

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;