Fetch la manipulation promesse

Question

Im en utilisant cette configuration pour mon application:

• ReactJS
• KarmaJS
• Instanbul

A ce stade, je continue à recevoir cette erreur: Object is not a constructor (evaluating '(0, _whatwgFetch2['default'])')

Tout en vérifiant le web, il ne cesse de me dire d'importer whatwg-fetch que je en fait déjà fait, je suis un peu perdu où aller.

Ma méthode qui exécute l'appel:

import fetch from 'whatwg-fetch'; 

export function authenticateUser(username, password) { 

    return function (dispatch, getState) { 
    dispatch({type: 'LOGIN'}); 

    return fetch(getState().config.components.Authentication.login_endpoint, { 
     method: 'POST', 
     headers: { 
     'Content-Type': 'application/json' 
     }, 
     credentials: 'same-origin', 
     body: JSON.stringify({ 
     username: username, 
     password: password, 
     }) 
    }).then(resp => { 
     if (resp.status === 302) { 
     window.location = resp.url; 
     } else if (resp.status >= 300 && resp.status < 500) { 
     return Promise.resolve(resp); 
     } else { 
     return Promise.reject(resp.statusText); 
     } 
    }).then(resp => resp.json()) 
     .then(resp => { 
     const error = data.errors[0]; 
     dispatch({ type: 'LOGIN_FAILED', payload: error.detail }); 
    }).catch(error => { 
     console.error(error); // I know, still needs to be catched 
    }); 
    }; 
} 

Mon testcase:

import { expect } from 'chai'; 
import configureMockStore from 'redux-mock-store'; 
import thunk from 'redux-thunk'; 
import sinon from 'sinon'; 
import { authenticateUser } from '../../src/actions/index'; 

const initialConfig = { 
    authentication: { 
    loginform_loading: false, 
    loginform_errorMessage: null, 
    forgotpassword_loading: false, 
    forgotpassword_errorMessage: null, 
    forgotpassword_passwordSent: false 
    }, 
    config: { 
    components: { 
     Authentication: { 
     'login_endpoint': '/api/auth/login', 
     'forgotpassword_enabled': true, 
     'forgotpassword_path': '/auth/forgot-password', 
     'forgotpassword_endpoint': '/auth/forgot-password' 
     } 
    } 
    } 
}; 

const middlewares = [ thunk ]; 
const mockStore = configureMockStore(middlewares); 
let store; 

describe('Action/Index/authenticateUser',() => { 

    const testUsername = 'User'; 
    const testPassword = 'Test123'; 
    let sandbox; 

    beforeEach(function() { 
    sandbox = sinon.sandbox.create(); 
    store = mockStore(initialConfig); 
    }); 

    afterEach(function() { 
    sandbox.restore(); 
    }); 

    it('LOGIN is dispatched',() => { 
    var response = mockResponse(400, 'Found', '{"errors": [{ "message": "first" }] }'); 
    sandbox.stub(window, 'fetch') 
     .resolves(response); 

    return store.dispatch(authenticateUser(testUsername, testPassword)) 
     .then(() => { 
     var expectedActions = store.getActions(); 
     expect(expectedActions).to.not.be.empty; 

     var action = expectedActions[0]; 
     expect(action.type).to.equal('LOGIN'); 
     }); 
    }); 
}); 

espoir que quelqu'un peut me aider sur ce qui ne va pas. Et peut-être aussi sur la façon d'améliorer la gestion des erreurs dans la Promesse se

Merci, Pim

Answer 1

Panther a donné la bonne réponse sur celui-ci.

import 'whatwg-fetch' a fait l'affaire