How does one mock a browser fetch call in a unit test using vitest?

[Tim Cooke]

Howdy, I'm trying to write a unit test for a TypeScript function that makes a couple of HTTP calls to an external service, and I'd like my test to assert that the calls are made in the right order with the right payload particularly because the second call content depends on the response of the first.

The function under test looks roughly like this. The first call gets a json object containing a pre-signed URL for the client to make a PUT request to.
export async function saveFile(caseId: string, fileBlob: Blob) {  const firstResponse = await fetch(new URL(firstUrl + "?" + caseId), { method: POST, body: {} } );  await fetch(new URL(firstResponse.presignedUrl), { method: PUT, body: fileBlob } ); }
As far as my understanding of the browser environment goes, fetch appears to be kinda built in and always there, so how can I get a handle on it to inject my own responses and assert on the call parameters?

The project this belongs to is using vitest. I have a similar question for calls made using the openapi-fetch library but let's start with fetch and stick with one question at a time.

Cheers, Tim

[Tim Holloway]

Ick. I hate Javascript's inside-out thread model.

The biggest problem with await-promise etc. is that the actual code execution doesn't literally wait, like in sane threading systems. The await means "come back later and do this".  

You'd probably suffer less if you did an outer "login" request and did an inner work request inside the outer request's callback.

Barf.

[Tim Cooke]

The async/await/promise stuff is definitely something I don't have a clear mental model of. In this case I'm following existing patterns that are in the codebase written by my colleagues who I have no doubt are more skilled in JS / TS than I am.