Question

我正试图从业力+ PhantomJS迁移到Jest + jsDom，但我遇到了问题。在Jest中，UT中的所有提取都失败了。我想找出原因。所以我只是写一个像这样的简单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/"
    ]
  }
    }

任何人都可以帮助我。

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

Answer 2

通过添加

解决了这个问题

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

in tests.initialState.jest.js。

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

fetch没有在jest中工作，并返回TypeError：网络请求失败

2 个答案: