testing-library / testing-library/testing-library-docs

Add an MSW example that works with native fetch. (or highlight issues with native fetch)

Open
#1,415 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
JavaScript
Stars
479
Forks
740
PR merge metrics
No merged PRs in 30d

Description

Is your feature request related to a problem? Please describe.

There is a straight forward and concise example of how to use MSW with RTL here:

https://testing-library.com/docs/react-testing-library/example-intro/

However, what this neglects to highlight is that the code-sample-under-test uses axios, not native fetch to do its requests.

Testing for applications native fetch is non-trivial as JSDOM doesn't implement native fetch ( see: https://github.com/jsdom/jsdom/issues/1724) it uses node-fetch instead, and node fetch will error with a

    TypeError: Only absolute URLs are supported
        at getNodeRequestOptions (.../node_modules/cross-fetch/node_modules/node-fetch/lib/index.js:1327:9)

See for example this thread discussing it:

https://github.com/mswjs/msw/issues/992

Describe the solution you'd like
Documentation should include example of what additional set up is required to use applications that use native fetch.

Describe alternatives you've considered

Add a caveat/disclaimer that MSW + RTL/JSDOM will not work for native fetch.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the React Testing Library example linked in the issue and review the native-fetch, JSDOM, and node-fetch references. Document the additional setup needed for applications using native fetch, or clearly state the limitation and its scope; the example or caveat should let readers understand how to proceed.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react
Domain
documentation, testing-qa
Issue type
Documentation
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.