ReferenceError: Response is not defined

[FredericRuaudel]

Hi!

I'm experiencing a strange bug today. I was using your module successfully until this morning when suddenly all my test suites failed with error:

Test suite failed to run

    ReferenceError: Response is not defined

      at Object.<anonymous> (node_modules/jest-fetch-mock/src/index.js:11:24)
      at Object.<anonymous> (__tests__/setupJest.js:1:103)

The only thing I did was removing my node-modules folder and then npm install them again. I imagine that I had some modules (or version of modules) in cache that disappeared with the rm command and were replaced by a new one after that. 🤔 But it doesn't seems that any module associated with jest-fetch-mock has changed since yesterday.

I've attached a little project that should reproduce the bug. Just unzip it and run:

npm install
npm test

Thanks in advance for your help!

BugFetchJest.zip

[FredericRuaudel]

ok, I've fixed my issue by adding import 'isomorphic-fetch' at the beginning of my setupJest.js file. But I still don't understand how it was working previously without it...

[sturdynut]

Same issue, but adding the import 'isomorphic-fetch' fixed it for me. Why???

[FredericRuaudel]

I have absolutely no idea. The problem seemed to come out of nowhere and disappears with this fix while it was working perfectly without it, the day before...

[sturdynut]

Looking at isomorphic-fetch, it sets the global Response object, as well as fetch, Request and Headers (see below). So, that remedies the issue, but still just a band-aid.

@jefflau - Should we be setting these globals (Response, etc) in our jestSetup files or is there a better way?

"use strict";

var realFetch = require('node-fetch');
module.exports = function(url, options) {
    if (/^\/\//.test(url)) {
        url = 'https:' + url;
    }
    return realFetch.call(this, url, options);
};

if (!global.fetch) {
    global.fetch = module.exports;
    global.Response = realFetch.Response;
    global.Headers = realFetch.Headers;
    global.Request = realFetch.Request;
}

[xareelee]

Adding the import 'isomorphic-fetch' fixed it for me too.

[xareelee]

Furthermore, before I imported jest-fetch-mock, jest reports a warning:

Warning: flattenChildren(...): Encountered two children with the same key, `0`. Child keys must be unique; when two children share a key, only the first child will be used.

After adding jest-fetch-mock, the flattenChildren was fixed, but introducing a new error Response is not defined .

// Adding 'jest-fetch-mock' will suppress `flattenChildren(...)` error, 
// but introduce the `Response is not defined`  error.
global.fetch = require('jest-fetch-mock');

After adding import 'isomorphic-fetch' to fix the problem, the flattenChildren(...) error was back again.

// After adding `import 'isomorphic-fetch'`,
// the `Response is not defined`  error was gone,
// but the `flattenChildren(...)` error was back again.
import 'isomorphic-fetch'
global.fetch = require('jest-fetch-mock');

[wwwdata]

8 did also fix it and I don't know why that was undone again

[wwwdata]

I'm doing it like this in my jest setup file now:

const { Response, Headers, Request } = require('whatwg-fetch');

global.Response = Response;
global.Headers = Headers;
global.Request = Request;

[britter]

8 did also fix it and I don't know why that was undone again

The change in #8 broke stuff for other people. See #9. Maybe we can find a why to fix this for all?

[jefflau]

I've merged in a PR that now supports blobs and uses cross-fetch and adds the Response, Headers and Request as globals. This should resolve this issue as well. Closing this for now, but should be good now.