CORS POST請求在授權標頭上拋出

Question

我想向我的API發送一個CORS POST請求，並且每次使用'授權'標頭時都會引發TypeError。該請求甚至沒有發送，所以服務器不參與。但是這隻發生在我的測試中。當我在Chrome中試用它時，它工作得很好。

這裏是函數，我測試：

export const postNewEmployee = formData => { 
    return fetch('http://localhost:3003', { 
          method: 'POST', 
          headers: { 
           'Authorization': 'Bearer test123', 
           'Content-Type': 'application/json' 
          }, 
          body: JSON.stringify(formData) 
          }) 
          .then(response => response) 
          .catch(error => { 
          throw error; 
          }); 
    }; 

及其試驗：

import * as API from './api'; 
describe('postNewEmployee',() => { 

    it('posts the form data asynchronously',() => { 

    let formData = { 
     employee: { 
     name: 'Test Person', 
     email: 'test@person.nu', 
     address: 'an adress 123' 
     } 
    }; 

    return API.postNewEmployee(formData) 
     .then(json => { 
     expect(json.status).toEqual(201); 
     }).catch(error => { 
     console.log(error); 
     }); 
    }); 
}); 

該應用程序是一個反應/ Redux的應用與創造，react-創建應用程序，所以我使用Jest和JSDOM來測試它。問題是，如果我從fetch（）調用註釋掉Authorization標頭，它可以正常工作。但是，如果我添加該標題，我可以得到：

TypeError: Cannot convert undefined or null to object 
    at Object.getRequestHeader (/Users/johanh/Kod/react-app/node_modules/react-scripts/node_modules/jsdom/lib/jsdom/living/xhr-utils.js:20:23) 
    at setDispatchProgressEvents (/Users/johanh/Kod/react-app/node_modules/react-scripts/node_modules/jsdom/lib/jsdom/living/xmlhttprequest.js:909:38) 
    at XMLHttpRequest.send (/Users/johanh/Kod/react-app/node_modules/react-scripts/node_modules/jsdom/lib/jsdom/living/xmlhttprequest.js:700:11) 
    at /Users/johanh/Kod/react-app/node_modules/react-scripts/node_modules/whatwg-fetch/fetch.js:429:11 
    at Object.<anonymous>.self.fetch (/Users/johanh/Kod/react-app/node_modules/react-scripts/node_modules/whatwg-fetch/fetch.js:373:12) 
    at Object.<anonymous>.exports.postNewEmployee.formData [as postNewEmployee] (/Users/johanh/Kod/react-app/src/api/api.js:20:10) 
    at Object.it (/Users/johanh/Kod/react-app/src/api/api.test.js:75:16) 
    at Object.<anonymous> (/Users/johanh/Kod/react-app/node_modules/react-scripts/node_modules/jest-jasmine2/build/jasmine-async.js:42:32) 
    at attemptAsync (/Users/johanh/Kod/react-app/node_modules/react-scripts/node_modules/jest-jasmine2/vendor/jasmine-2.4.1.js:1919:24) 
    at QueueRunner.run (/Users/johanh/Kod/react-app/node_modules/react-scripts/node_modules/jest-jasmine2/vendor/jasmine-2.4.1.js:1874:9) 

正如我所說的，這隻發生在測試中。在瀏覽器中，它工作正常。

我覺得我在這裏錯過了一些明顯的東西，但我看不到它。我查看了獲取規範和jsdom文檔，但無濟於事。有任何想法嗎？

Answer 1

通常情況下，你不應該在單元測試中提出真正的請求。處理這個問題的最好方法是使用模擬而不是真正的fetch實現。

我假設您使用的是fetch的JS實現。所以你可以設置fetch到你想要的測試中。

import * as API from './api'; 
describe('postNewEmployee',() => { 

    it('posts the form data asynchronously',() => { 
    // set fetch to a mock that always returns a solved promise 
    const fetch = jest.fn((url, options) => return Promise.resolve({status: 201})) 
    global.fetch = fetch; 
    let formData = { 
     employee: { 
     name: 'Test Person', 
     email: 'test@person.nu', 
     address: 'an adress 123' 
     } 
    }; 
    //test that fetch was called with the correct parameters 
    expect(fetch.mock.calls[0][0]).toBe('http://localhost:3003') 
    expect(fetch.mock.calls[0][1]).toEqual(formData) 
    return API.postNewEmployee(formData) 
     .then(json => { 
     expect(json.status).toEqual(201); 
     }).catch(error => { 
     console.log(error); 
     }); 
    }); 
});