ReferenceError: fetch is not defined

Environment

| msw | 0.28.1 |

Request handlers

I’m currently using msw to mock fetch in my jest test. The component uses the default javascript fetch and works fine with that.

When I run the test without adding node-fetch to my component, the test fails : ReferenceError: fetch is not defined When I run the test with “const fetch = require(“node-fetch”);” in my component file, the test works fine (but the component breaks when it’s rendered in a browser so it can’t be a solution for me)

Also, I noticed that if I don’t use node-fetch but I install jest-fetch-mock and I disable it (to still use MSW), then things work require('jest-fetch-mock').enableMocks() fetchMock.dontMock()

Without node-fetch or jest-fetch-mock it says fetch is not defined (but the component works fine with the javascript fetch)

I’m so confused, installing but not using jest-fetch-mock make the error go away and why do I need all this, why can’t I mock the window.fetch with msw ?

[kettanaito]

Hey, @pqr. I’m sorry to hear you’re having trouble setting up your tests.

You don’t find fetch mentions in our docs because this isn’t the library’s responsibility. You need to polyfill fetch yourself. The problem is that you rarely realize you do, as some tools (like Create React App) do that for you, making you think fetch is automagically available in tests.

In reality, your React component gets rendered in Node.js when you run Jest, and fetch doesn’t exist in Node.js—that’s the whole reason to polyfill it. I know our examples don’t mention this test setup either, but you need to forgive us on this: we write examples that use common tech (such as CRA) and are easy to get started with.

I’ve added a new usage example that will help you set up Jest and MSW:

• Using MSW with a manual Jest setup (React)

[kettanaito]

The first thing to understand is that fetch is a browser-specific API and doesn’t exist in Node.js. Jest tests run in Node.js, although they execute your components that may use window.fetch. How this works usually is testing environment polyfills fetch for you (i.e. with node-fetch, whatwg-fetch, or any other compatible polyfills). Most of the frameworks like CRA come with that polyfill built-in, so you rarely pay attention that you need it.

The solution to your issue is to include a suitable fetch polyfill in your testing setup (just as @msutkowski has pointed out).

The other part is this question:

I’m so confused, installing but not using jest-fetch-mock make the error go away and why do I need all this, why can’t I mock the window.fetch with msw ?

It’d be much more straightforward to understand and debug any potential MSW issues when you realize it’s request client-agnostic. MSW doesn’t have any fetch-related logic and doesn’t rely on fetch in any way. Seeing errors like “fetch is not defined” may hint to you that it’s not a library’s problem.

It’s the core philosophy and one of the main benefits of MSW: you forget about mocking fetch/axios/etc. Departing from that mentally is also helpful to keep your tests clean and debugging easier.