All geek questions in one place

Fetch doesn't work as a joke and returns TypeError: failed network request

I am trying to switch from karma + PhantomJS to Jest + jsDom, but I am having a problem. all extracts in UT failed in Jest. I'm trying to find out the reason. So I just write a simple UT, like this one

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

but still get an error like this

  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)

this is my .json package

  { 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/" ] } }

Anyone can help me with this.

+2
source share
2 answers

this issue is resolved by adding

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

in test.initialState.jest.js.

before, I used w3c-xmlhttprequest and it does not work.

+1
source

I am facing the same problem. And I use fetch-mock to solve this problem.

 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
source

Source: https://habr.com/ru/post/1011470/

More articles:


All Articles