testing-library-docs icon indicating copy to clipboard operation
testing-library-docs copied to clipboard

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

Open dwjohnston opened this issue 1 year ago • 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: 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.

dwjohnston avatar Aug 29 '24 05:08 dwjohnston

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

MatanBobi avatar Aug 29 '24 06:08 MatanBobi

@MatanBobi - here you go #1418

dwjohnston avatar Aug 30 '24 07:08 dwjohnston