fetch 无法正常工作，并返回 TypeError: Network request failed答案

【问题标题】：fetch doesn't work in jest, and return TypeError: Network request failedfetch 无法正常工作，并返回 TypeError: Network request failed
【发布时间】：2017-11-12 07:38:27
【问题描述】：

我正在尝试从 karma + PhantomJS 迁移到 Jest + jsDom，但我遇到了问题。 UT 中的所有获取都在 Jest 中失败。我试图找出原因。所以我就这样写一个简单的UT

import fetch from 'isomorphic-fetch';
import $ from 'jquery';

describe('test', () => {
  it('should fetch success....', (done) => {
    return fetch('http://www.ebay.com/', { method: 'get' })
    .then((res) => {
      console.log(res);
      done();
    })
    .catch(err => console.log(err));
  })

   it('should get success....', (done) => {
    $.get('http://www.ebay.com/', (res) => {
      console.log(res);
      done();
    }).fail((xhr, statusText, err) => {
      console.log(statusText, err); 
    })
  })
})

但还是会出现这样的错误

    TypeError: Network request failed
            at XMLHttpRequest.xhr.onerror (/Users/davidhe/work/activenet/git/aui/node_modules/whatwg-fetch/fetch.js:436:16)
            at XMLHttpRequest.callback.(anonymous function) (/Users/davidhe/work/activenet/git/aui/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/events/EventTa
    rget-impl.js:289:32)
            at invokeEventListeners (/Users/davidhe/work/activenet/git/aui/node_modules/jest-environment-jsdom/node_modules/jsdo

m/lib/jsdom/living/events/EventTarget-impl.js:219:27)
        at invokeInlineListeners (/Users/davidhe/work/activenet/git/aui/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:166:7)
        at EventTargetImpl._dispatch (/Users/davidhe/work/activenet/git/aui/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:122:7)
        at EventTargetImpl.dispatchEvent (/Users/davidhe/work/activenet/git/aui/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:87
:17)
        at XMLHttpRequest.dispatchEvent (/Users/davidhe/work/activenet/git/aui/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:61:35
)
        at dispatchError (/Users/davidhe/work/activenet/git/aui/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/xmlhttprequest.js:994:9)
        at validCORSHeaders (/Users/davidhe/work/activenet/git/aui/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/xmlhttprequest.js:1009:7)
        at receiveResponse (/Users/davidhe/work/activenet/git/aui/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/xmlhttprequest.js:871:12)
        at Request.client.on.res (/Users/davidhe/work/activenet/git/aui/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/xmlhttprequest.js:691:38)
        at emitOne (events.js:96:13)
        at Request.emit (events.js:188:7)
        at Request.onRequestResponse (/Users/davidhe/work/activenet/git/aui/node_modules/request/request.js:1074:10)
        at emitOne (events.js:96:13)
        at ClientRequest.emit (events.js:188:7)
        at HTTPParser.parserOnIncomingClient [as onIncoming] (_http_client.js:473:21)
        at HTTPParser.parserOnHeadersComplete (_http_common.js:99:23)
        at Socket.socketOnData (_http_client.js:362:20)
        at emitOne (events.js:96:13)
        at Socket.emit (events.js:188:7)
        at readableAddChunk (_stream_readable.js:176:18)
        at Socket.Readable.push (_stream_readable.js:134:10)
        at TCP.onread (net.js:547:20)

这是我的 package.json

 {
   devDependencies:{   
      "jsdom": "^11.0.0",
      "babel-jest": "^20.0.3",
      "jest": "^20.0.4"
    },
"dependencies": {
   "isomorphic-fetch": "^2.2.1"
}
"jest": {
    "browser": true,
    "testEnvironment": "jsdom",
    "cacheDirectory": "./node_modules/.cache",
    "verbose": true,
    "globals": {
      "__STATIC__": true,
      "__DEV__": false,
      "__TESTING__": true
    },
    "transformIgnorePatterns": [
      "/node_modules/(?!react-aaui).+\\.js$"
    ],
    "moduleNameMapper": {
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/test/__mocks__/fileMock.js",
      "\\.(css|less)$": "<rootDir>/test/__mocks__/styleMock.js",
      "^imports": "<rootDir>/test/__mocks__/jestImportsMock.js"
    },
    "testRegex": "(fetch\\.(test|spec))\\.(jsx|js)$",
    "moduleFileExtensions": [
      "json",
      "jsx",
      "js"
    ],
    "moduleDirectories": [
      "node_modules",
      "src",
      "test"
    ],
    "modulePathIgnorePatterns": [],
    "snapshotSerializers": [
      "enzyme-to-json/serializer"
    ],
    "collectCoverage": false,
    "collectCoverageFrom": [
      "src/**/*.{js,jsx}",
      "!**/__mocks__/**"
    ],
    "coverageReporters": [
      "text",
      "html"
    ],
    "coverageDirectory": "test/coverage",
    "setupFiles": [
      "./test/tests.initialState.jest.js"
    ],
    "testPathIgnorePatterns": [
      "/node_modules/",
      "/examples/",
      "/dist/"
    ]
  }
    }

任何人都可以帮助我。

【问题讨论】：

标签： fetch jsdom jestjs

【解决方案1】：

我遇到了同样的问题。我使用fetch-mock 很好地解决了它。

import fetchMock from 'fetch-mock'
it ("normally should return success", () => {
    fetchMock.getOnce('*', {user: 'ron'})

    expect(fetch('http://your.example.com').then(x=>x.json())
    .resolves.toEqual({user: 'ron})
})

【讨论】：

【解决方案2】：

这个问题通过添加解决

import { XMLHttpRequest } from 'xmlhttprequest';
global.XMLHttpRequest = XMLHttpRequest;

在 tests.initialState.jest.js 中。

之前，我用的是w3c-xmlhttprequest，结果不行。

【讨论】：