2017-06-09 64 views
2

我想从karma + PhantomJS迁移到Jest + jsDom,但我遇到了问题。所有在UT中获取失败的Jest。我试图找出原因。所以,我只是写一个简单的UT这样提取不起作用,并返回TypeError:网络请求失败

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

任何人都可以帮助我就可以了。

回答

1

在tests.initialState.jest.js添加

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

这个问题得到解决。

之前,我使用的是w3c-xmlhttprequest,它不起作用。

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