testing-library / testing-library-docs

docs site for @testing-library/*
https://testing-library.com
MIT License
452 stars 702 forks source link

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

Open dwjohnston opened 2 weeks ago

dwjohnston commented 2 weeks ago

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.

MatanBobi commented 2 weeks ago

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

dwjohnston commented 2 weeks ago

@MatanBobi - here you go #1418