CRA with Typescript setup instructions do not seem to work

[EthanML]

Spent today attempting to get jest-fetch-mock working with a fresh TypeScript CRA app and ran into some issues and general confusion:

• When reading the documentation it's confusing whether users are expected to reference fetch or fetchMock. The line "Fetch will be used as usual by your code and you'll use fetchMock in your tests" from the README implies the latter, but then the examples go on to use just fetch? What is the actual expected usage here?
• Under CRA instructions in the README it states: "the code for setupTest.js above should be placed into src/setupTests.js". However the code in question is actually named setupJest. Guessing this is just leftover from a previous version or a simple typo.

Looking at differing recent versions of the README I've seen there have been two different approaches to initializing the library in the test setup file. The currently listed method:

require('jest-fetch-mock').enableMocks();

...and the previous suggested method:

import { GlobalWithFetchMock } from "jest-fetch-mock";
const customGlobal: GlobalWithFetchMock = global as GlobalWithFetchMock;
customGlobal.fetch = require('jest-fetch-mock');
customGlobal.fetchMock = customGlobal.fetch;

First I'll go over issues I had when using enableMocks().

1. I wrote tests that referenced fetch.
2. Test makes use of fetch.mockResponseOnce.
3. Test DOES pass
4. However, in the editor (VS Code) I get typing errors as it appears to assume fetch is referencing the "real" fetch object:

(Ignore the git diff portion, but notice the typing error)

5. I did try adding a global.d.ts file with import "jest-fetch-mock" inside it as the README suggests however this appears to do nothing.
6. Using fetchMock instead of fetch in my tests still allows them to run and pass successfully, but the editor does not know what fetchMock is:

After some searching I then tried the second approach above involving GlobalWithFetchMock.

1. Same tests as above.
2. Same type errors in editor when I try to use e.g. fetch.mockResponseOnce, however using fetchMock now works correctly and has no errors in the editor 🎉

---

I should also state I have only just picked up TS recently and so admittedly I might be missing something very simple here, but it seems to me like the instructions around TS and/or CRA usage with this library may be a little mixed up?

For anyone else struggling with this in the meantime, the test setup approach detailed above appears to be a solution, but it would be nice if the maintainer/s could weigh in on how this is expected to be used.

I did read through https://github.com/jefflau/jest-fetch-mock/issues/82 which made it sound like these issues were resolved however it didn't help. Having looked at that I'm also still confused over whether users are intended to explicitly import jest-fetch-mock in their individual test files?

[EthanML]

Update: I eventually noticed that CRA projects also have a react-app-env.d.ts file. It appears that putting import "jest-fetch-mock" inside this instead of adding a global.d.ts does in fact work when using require('jest-fetch-mock').enableMocks() ! 🎉

The following syntax also works, so I opted to use it instead as it matched the existing file contents that seem to have been autogenerated by CRA:

// src/react-app-env.d.ts
/// <reference types="jest-fetch-mock" /> 

I guess I'll leave the original post above for context in case anything useful might come out of this. It does seem like perhaps README instructions are CRA w/ Typescript could be improved. Happy to make those changes if people are satisfied that this ^ is the correct way to go about setting this up?