Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Bug]: Fetch API unavailable in "jsdom" test environment #13834

Closed
hahanein opened this issue Jan 28, 2023 · 2 comments
Closed

[Bug]: Fetch API unavailable in "jsdom" test environment #13834

hahanein opened this issue Jan 28, 2023 · 2 comments
Labels
Bug Report Needs Triage

Comments

@hahanein
Copy link

hahanein commented Jan 28, 2023 •
edited

Version

29.4.1

Steps to reproduce

  1. Clone my repo at https://github.com/hahanein/no-fetch-api-in-jsdom-environment
  2. pnpm i
  3. pnpm test
  4. You should see the error "ReferenceError: fetch is not defined"

Expected behavior

I expect to see the following results:

 PASS  ./script.test.js
  ✓ testing fetch (670 ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total

Actual behavior

The test is failing with the error message "ReferenceError: fetch is not defined".

However, when you remove the line testEnvironment: 'jsdom' from jest.config.js everything is working as expected.

Additional context

Due to this behavior we are forced to polyfill the Fetch API (fetch, Response, Request, ...) at my workplace. This is becoming progressively more tedious. node-fetch/node-fetch#1263

Environment

System:
    OS: Linux 6.1 Arch Linux
    CPU: (8) x64 AMD Ryzen 5 PRO 3500U w/ Radeon Vega Mobile Gfx
  Binaries:
    Node: 19.4.0 - /usr/bin/node
    Yarn: 1.22.19 - /usr/bin/yarn
    npm: 8.19.2 - /usr/bin/npm
  npmPackages:
    jest: ^29.4.1 => 29.4.1
@SimenB
Copy link
Member

SimenB commented Jan 28, 2023

Yeah, fetch is only available in using the node environment atm.

See jsdom/jsdom#1724

@SimenB SimenB closed this as not planned Won't fix, can't repro, duplicate, stale Jan 28, 2023
lucasgarfield added a commit to lucasgarfield/image-builder-frontend that referenced this issue Feb 7, 2023
@lucasgarfield
Jest: Polyfill fetch and Request
c19f780 
We are migrating towards using RTK Query for API calls, and using `msw`
to mock APIs in our tests.

RTK Query's `fetchBaseQuery` requires the use of `fetch` and `Request`.

`fetch()` was added to Node in v18, and the ability to use it in
Jest tests was added to Jest in v28. However, it still cannot be used
with a `jsdom` test environment.

Therefore, it is necessary to add a polyfill. There are several
libraries available for this but many others in this situation have had
success using `whatwg-fetch` and so it was selected somewhat
arbitrarily.

It is also important that `whatwg-fetch` is imported before
`fetchBaseQuery` (otherwise, a nuisance console warning will be issued).
To ensure this happens, it is imported in a Jest setup file.

References:
reduxjs/redux-toolkit#2084
reduxjs/redux-toolkit#1271
jestjs/jest#13834
@lucasgarfield lucasgarfield mentioned this issue Feb 7, 2023
Closed
@github-actions
Copy link

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
Please note this issue tracker is not a help forum. We recommend using StackOverflow or our discord channel for questions.

@github-actions github-actions bot locked as resolved and limited conversation to collaborators Feb 28, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
Bug Report Needs Triage
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@SimenB @hahanein