Add GlobalFetch API - Headers, Request, Response

[piuccio]

https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
https://developer.mozilla.org/en-US/docs/Web/API/Headers
https://developer.mozilla.org/en-US/docs/Web/API/Request
https://developer.mozilla.org/en-US/docs/Web/API/Response

[jods4]

+1 would be nice as General availability in browsers means more web apps use it and fail in JSDOM.
Given that JSDOM implements XMLHttpRequest, it could be as simple as running whatwg-fetch polyfill at startup, right?

[domenic]

No, unfortunately the whatwg-fetch polyfill is not very spec compliant. Someone needs to write an implementation of the fetch algorithm in the standard: https://fetch.spec.whatwg.org/#fetching

That said, in your own usage of jsdom you're welcome to include <script src="fetch-polyfill.js"> in the HTML you pass to it, and that should work, if you're willing to accept the non-compliant polyfill semantics. We just can't bake them into jsdom.

[jods4]

Yes, for now I'm using the whatwg polyfill in JSDOM.
I'm not sure how much "non-compliant" it is, but it seems to work well enough for my case.

It would be nice to see something built-in, though. Especially since the Fetch API has become commonplace.

[domenic]

Yeah, it definitely would be nice! I hope someone is able to pull-request an implementation of the spec.

[KyleGalvin]

My application tests run in node rather than the browser. The lack of server-side fetch API (and typescript bindings to match) has become a show-stopper.

This issue looks like the most promising solution.

Does anyone else know of a workaround for the mean-time? I can use fetch in the browser. I can use node-fetch for tests, but I can't switch on the two packages dynamically. One environment or the other will always fail.

Edit: whatwg-fetch seems to be the answer. Install the package, dont install the typings. import it only in the test runner so the browser application does not have conflicting definitions

[ghostd]

Is this issue still relevant since v15 supports fetch?

[domenic]

v15 does not support fetch.

[ghostd]

Sorry, i misread the Changelog about the 15.1, only Headers was provided

[Dscheksn]

Does anyone else know of a workaround for the mean-time?

My workaround looks like this:

    const firstTodo: Todo = { title: 'Todo 1' };
    const secondTodo: Todo = { title: 'Todo 2' };
    const todos: Todo[] = [firstTodo, secondTodo];

    global['fetch'] = jest.fn().mockImplementation(() =>
      Promise.resolve({
        json: () => Promise.resolve(todos),
      })
    );

    await act(async () => {
      render(<App />, container);
    });

[alexfromapex]

but in all seriousness, I have an easy workaround:

First, npm install --save-dev whatwg-fetch

.. then ..

jest.config.js:

...
  setupFiles: ['<rootDir>/setupJest.js'],
...

setupJest.js:

...
import 'whatwg-fetch';
...

and then you'll automagically have all of the fetch related globals defined in your test code

[luchillo17]

I've fixed this by using the import 'cross-fetch/polyfill'; on the test file (my library has a mixed environment, half of it is meant for node, the other half for jsdom, SSR and RSC in Next.js makes it hard to know what environment it should be using in tests).

[darrinmn9]

I just want to add on to the suggested workaround of patching jest-environment-jsdom, you might also need AbortController in order to abort fetch requests.

this.global.AbortController = AbortController