testing-library/testing-library-docs

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

dwjohnston opened this issue · 2 comments

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: jsdom/jsdom#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:

mswjs/msw#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.

Thanks @dwjohnston.
We're open to any PR that will help clarifying this :)

@MatanBobi - here you go #1418