support custom fetch option

[juliusmarminge]

Scope

Adds a new behavior

Compatibility

• This is a breaking change

Feature description

Our lib takes an optional fetch option to let users override the fetch function used to make requests. Something like this:

const sdk = new SDK({
  fetch: myFetch, // this is necessary to support cf workers etc who's fetch has some gotchas
})

class SDK {
  constructor(opts) {
    this.fetch = opts.fetch ?? globalThis.fetch,
  }

  public getX = () => {
    this.fetch( ... );
  }
}

It doesn't seem like MSW is able to intercept the requests made with this approach, so I'd like to suggest the option to provide the fetch implementation to use:

const server = setupServer(...handlers)
server.fetch = ...

Is there some way to achieve this already? Up until now I've mocked the fetch by passing in a custom function as argument to every test and mocking based on that, but it doesn't work for browser tests so now i need to define all the mocks twice, I would like to be able to mock everything in one place

[kettanaito]

Hi, @juliusmarminge.

If I may, what does your custom fetch use to make requests then?

MSW will always rely on the standards and that's unlikely to change. Your custom fetch is likely wrapping the native fetch or tapping into things like http in Node.js. In either case, MSW will work because for the library your custom fetch is the same as you using React Query or Axios—abstractions over the actual things MSW intercepts and gives you control over.

I don't believe we need server.fetch in any shape or form but I'm always happy to learn more about your use case.

[juliusmarminge]

@kettanaito so the problem im having is that msw doesn't intercept these fetches for me...

see pingdotgg/uploadthing#679

[kettanaito]

What is fetchMock() (here)?

I suggest to do the following:

1. Confirm if MSW works without the custom fetch function on your end.
2. Check what fetch() equals to in your custom fetch function.
3. Make sure you are not mocking globalThis.fetch for any reasons. This is hard requirement for MSW to work: requests must happen.

[juliusmarminge]

it's just a vi.fn()

[kettanaito]

@juliusmarminge, that's not going to work. You are throwing the fetch away by replacing it with vi.fn(). Because of that, your code will stop making actual requests. Everything fetch does, such as the input validation and no-op requests/responses, you also throw away. I strongly advise you against this because it harms the quality of your test.

Instead, if you wish to spy on fetch, just spy on it without replacing it.

vi.spyOn(globalThis, 'fetch')

This will leave the implementation of fetch intact, execute the actual requests in a test, which will trigger MSW, giving you control over how to resolve those requests.

You can also spy on the request handlers directly if you absolutely have to.

[juliusmarminge]

I'm not overriding the global fetch with a mock.

I'm just calling it as part of the user-provided fetch:

{
  fetch: (url, init) => {
    fetchMock(url, init); // allows easy assertions of what fetch has been called with, although a spy could work just as well i guess
  return fetch(url, init);
  }
}

[kettanaito]

Oh, got it. Then MSW will trigger. As long as your test makes requests, MSW request handlers will always trigger. If it ever doesn't, please follow the Debugging runbook, it can point out some common issues.

If nothing helps, please submit a reproduction repository and I will take a look. Thanks!